Storybook is a tool for developing components and user interfaces faster than ever. Storybook is incredibly versatile: you can use it with a variety of JavaScript libraries and frameworks, not just React. It is available for Vue, React, Svelte, Angular, and Ember.js.

If you have been developing your components the old-fashioned way, in your text editor or IDE, a tool like Storybook allows you to unlock greater productivity when developing components. Next, you will learn what Storybook is, how it works, and if it is suitable for your team.

The problems of developing components traditionally

Let’s start by looking at the friction involved with the typical component development process:

1. You receive a task to develop a feature: let’s say it’s a form on the checkout page.
2. Then, you need to set up the development environment: connect to the VPN, run the backend, run the frontend, etc.
3. Finally, you get to the page where the feature will live.

It is cumbersome to navigate between multiple pages, fill out forms, and click buttons every time you need to get to where the feature should be. Sometimes, your components have multiple states, for example, loading, success, and error. It is not always easy to replicate all the states of a component, which leads you to modify the component code just to force a specific state.

Storybook isolates your components: easier component debugging

You may have gone through these situations and encountered the pain involved in this type of component development workflow.

Most of the time, while developing, you want to focus on the component you are creating, so other elements on a page become noise. Having a way to quickly access any component or feature, and also being able to simulate all use cases, is incredibly beneficial and saves you a lot of time.

Storybook provides you with this type of component isolation so you can work only on the component you have in mind, without having to interact with other components.

What is Storybook?

Storybook is an open-source tool that helps you develop user interface components in isolation. It runs on your codebase, but separately from your application, so it works like a sandbox, allowing developers not to be distracted by incomplete APIs, unstable data, and other external dependencies. It integrates with frameworks like React, Vue, Svelte, Angular, and others.

Think of Storybook as a real book, with an index of pages that links to the user interface components. Each component has stories to tell about itself, and these stories represent the different states of the component’s user interface. Regardless of the situation, even if you are offline, you will be able to access that page and easily find and play with the components.

Due to its productivity and collaboration advantages, Storybook is used by more than 30,000 open-source projects, especially component libraries. However, many tech companies, such as Airbnb, Atlassian, and JetBrains, are among its users.

Who is Storybook for?

Some people seem to think that Storybook is a tool only for component library developers, and that is certainly not the case.

Storybook helps us build from the simplest and most atomic component, like a button or an input, to complex features or entire pages.

Since Storybook helps us summarize the user interface of applications, designers and QA can benefit from it. With Storybook, you can facilitate the development of a design system and share a single language with designers. QA can get an overview and test functionalities in isolation. Storybook can even be used to demonstrate functionality to stakeholders, as if it were a demo.

Many companies have made their Storybooks public. They are not only an inspiration but also a learning guide for teams new to Storybook, and you can find a list of public Storybooks here.

How it works

From a technical aspect, Storybook is essentially a React application that runs on your codebase, separately from your main application. You start it by running a CLI command. It will look for files in your codebase that contain a .stories.* extension, gather all those components, and display them in a nice user interface.

Suppose you are creating, for example, a restaurant card. You would have a RestaurantCard.stories.tsx file, which represents the component with mocked properties for each scenario.

It is important to note that Storybook does not produce any production code. Your .stories.tsx files are used solely for development purposes.

I hope this was helpful and/or taught you something new!

@khriztianmoreno