There are currently two options for installing and working with Stylable as described in the following sections.
Starting from a boilerplate
To begin writing your own project, you can create a Stylable app from our boilerplate. The project can be created by the following commands:
npm init stylable-app <project-name>
yarn create stylable-app <project-name>
<project-name> placeholder above, replace with the name of your project, Once you run the command, a directory with that same name is created. Go to that directory and run
npm start to view the project in a browser, or
npm run build to build your project's target code.
The project includes several basic components and Stylable stylesheets with the suffix
The default template when starting
ts-react-webpack, which combines Typescript, React, and Webpack. A different template which uses Rollup instead of Webpack can be installed with:
npm init stylable-app <project-name> --template ts-react-rollup
yarn create stylable-app <project-name> --template ts-react-rollup
Working with an existing project
There are several different integrations for stylable to pick from:
To take advantage of code completion and diagnostics, install Stylable Intelligence (currently only supported for Visual Studio Code).
To configure Stylable to work with TypeScript, check out our TypeScript Integration guide.
Write in Stylable
Once you've installed either the boilerplate or the manually configured Stylable, you can begin writing in Stylable. Look through the Handbook and Specifications Reference to help guide you in your work.