One of the first things to understand is, of course, what Storybook is, how it works, and who it is for.

Starting with a use case#

Let's start by seeing how the development process normally goes on a project:

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 on which the feature will live.

It's quite bothersome having to navigate between multiple pages, filling forms and clicking buttons every time you have to get to where the feature should be. Sometimes, you're building components that contain multiple states (e.g., loading, success, error), and it's not always easy to replicate all states of a component, leading you to alter the component's code just to force a specific state.

Most, if not all, developers have gone through these situations and understand the pain that is going through them daily.

Most of the time while you're developing, you might want to focus on the component you're building, so anything else (like other elements on a page) becomes noise. Having a way to quickly access any component or feature, and also being able to mock all use-cases for them, can be incredibly beneficial and save you lots of time. Storybook is here as a solution for that.

What is Storybook?#

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

You could think of it as an actual book, with a nice index for pages that link to your UI components. Every component has stories to tell about itself, and these stories represent the different UI states of that component. Regardless of the situation, even if you're offline, you will be able to access that page and easily find and play around with the components.

Storybook is used vastly for component libraries, but it also has great potential to help develop features of an application, even pages. In this course, I will show you all of that potential.

Storybook addons#

In the Storybook ecosystem, there are addons, installable packages that you can add to your project, that will provide extra functionality to Storybook. There are incredible addons that help you do great things, such as connect with design tools, analyze the accessibility of your components, measure performance, automatically generate documentation for your components, and so on. You can also create your own addons with any functionality you want! We will be covering all about them in this course.