Quick Start Guide
Storybook supports many different frontend view layers with more coming! React, Vue, Angular, Mithril, Marko, HTML, Svelte, Meteor, Ember, Riot and Preact are currently supported. Follow these steps to get started with Storybook.
Get started using the automated command line tool. This command adds a set of boilerplate files for Storybook in your project:
cd my-project-directory npx -p @storybook/cli sb init
The tool inspects your
package.json to determine which view layer you’re using. If you want to develop HTML snippets in storybook, we can’t determine that automatically. So to install storybook for HTML, use the
--type flag to force that the HTML project type is set:
npx -p @storybook/cli sb init --type html
It’s also useful if our automatic detection fails.
By default npx will use the latest version, if you want to try out the next version (or any specific version), you can use the following:
npx -p @firstname.lastname@example.org sb init
To setup a project manually, take a look at the Slow Start Guide.
Start Storybook with:
npm run storybook
Storybook should now be available in the browser with a link provided in the console.
To learn more about what the Storybook CLI command
sb init command does, have a look at the slow start guides:
A step-by-step tutorial is available at Learn Storybook.