Storybook

Storybook is an open-source UI expert tool to build UI components and pages. It is easy to test UI components during development. Developers going with storybooks because it is easy to focus on the user interface. Storybook makes your job is simpler by isolating UI concerns from the noise of backend, APIs, and data.

Storybook maid for multiple platforms like,

1. React
2. Vue
3. Angular
4. Web Components
5. Ember
6. HTML
7. Mithril
8. Marko
9. Svelte
10. Riot
11. Preact
12. Rax

Installing Storybook

Open a terminal in the root folder of the project and perform the below steps to install/configure Storybook in your application.

1. Use the Storybook CLI to install it in a single command. Run this inside your existing project’s root directory:

npx sb init

The command above will make the following changes to your local environment:

• 📦 Install the required dependencies.
• 🛠 Setup the necessary scripts to run and build Storybook.
• 🛠 Add the default Storybook configuration.
• 📝 Add some boilerplate stories to get you started.

2. Depending on your framework, first build your app and then check that everything worked by running:

npm run storybook

It will start the Storybook locally and output the address. Depending on your system configuration, it will automatically open the address in a new browser tab and you’ll be greeted by a welcome screen.

You will find some configuration files/ folder changes after . Find default stories located in folder, folder where you can find your configuration file for the storybook.

Let’s develop your own stories :)

Originally published at https://www.linkedin.com.