CSS Superset
Extending CSS so that it is easier to use in a component ecosystem, but without losing any of the declarative, familiar, static and fast aspects of CSS.
Style API
Each component exposes a Style API that maps its internal parts and states so you can reuse components across teams without sacrificing stylability or scalability.
Type Safety
Provide the ability to see errors at build time or even while working in your IDE. Wave goodbye to silent run-time breakage misery!
Performant
Perform build-time transpilation and require only a minimal runtime. Use custom states and properties for dynamic interactions.
Mixins & Formatters
Easily create complex designs using CSS or JavaScript and reuse them across projects.
Developer Tooling
Use our language-intelligence IDE extension for a better development experience including completions, defintions, hinting, diagnostics and more.
What is Stylable?
At Wix, we ♥ CSS. Its simple, declarative syntax that is native in browsers is easily the fastest way to add styles to web pages and web apps. But when writing CSS that is scoped to individual components, developers have to maintain highly-specific selectors, using elaborate conventions to fake namespacing. Writing and maintaining CSS across large teams and large projects can be tricky.
We also ♥ TypeScript. TypeScript helps us manage these large projects, exposing at build-time what we could once only see at run-time.
What Does Stylable Do?
- Stylable scopes styles to components so they don’t "leak" and clash with other styles.
- Stylable enables custom pseudo-classes and pseudo-elements that abstract the internal state and structure of a component. These can then be styled externally. For example, you can style the label inside a button, or style the play button of a video player from outside these components.
- At build time, the preprocessor converts the Stylable CSS into flat, static, valid, vanilla CSS that works cross-browser.
Tooling
Treating CSS as a type system opens up a whole new world of tooling. You can:
- Get code completion that hints at the internal structure of components.
- Get types for your parameters. And so much more.
Videos
Introduction to Stylable
The Official Stylable Musical!
Documentation
Learn more about Stylable and get started with step by step instructions and code examples.Demo Project
You can download our Learn more about Mr. Potato Bruce project from GitHub. It's a demo application showcasing the features and typed style API. Bruce explains it in his React Europe 2018 talk:
Play with it and let us know what you think!
Shut up and take my money!
No need! Stylable is open-source. Take it, use it, make your development easier and your apps faster. Viva CSS, and welcome Stylable. We hope you like it.
Click here to access the MIT-licensed Stylable GitHub project.
New ideas will come along, but they will extend CSS rather than replace it. I believe that the CSS code we write today will be readable by computers 500 years from now.
— Håkon Wium Lie, co-creator of CSS.