Getting started with Storybook

Getting started with Storybook

Play this article

Storybook is a UI development environment and playground for UI components. This tool enables users to create components independently and showcase components interactively in an isolated development environment.

Storybook runs outside of your main app so developers can develop UI components in isolation without worrying about app specific dependencies and requirements.

Storybook supports many different frontend view layers with more coming!

React, Angular, Vue, Mithril, Marko, HTML, Svelte, Meteor, and Ember are currently supported.

Cool Now Let’s move to get started with Storybook. Following instructions are for install Storybook on your project automatically but one thing this automatic tool adds a set of boilerplate files for Storybook in your project.

cd project-directory
npx -p @storybook/cli sb init

Let’s start Storybook with following command then Storybook should be available in the browser with a link provided in the console.

npm run storybook

Now you can enjoy Storybook from developing your customized web application components.