Appendix D. Storybook
This chapter covers
- Configuring the use of Storybook
- Defining "stories"
- Customizing controls used to modify web component properties
- Implementing and running many kinds of Storybook tests
- Generating web component documentation pages
- Deploying Storybook projects
Storybook is a tool for developing, testing, and documenting web-based user interface components. It runs in isolation from the applications that use those components.
Without using a tool like Storybook, components must be developed and tested within the context of an application that uses them. This is typically more difficult due to the steps required to get the application into a state that causes a web component to be rendered with specific data.
The Storybook user interface is implemented using React, but it can be used with components implemented using many other frameworks including Alpine.js, Angular, Preact, React Native, Next.js, SolidJS, Svelte, and Vue. It can also be used with web components, including those created with libraries like Lit, Stencil, and FAST. That said, Storybook has some features that are supported only, or are best supported, when testing React components.
Note
The steps described in this chapter were tested with Storybook 10.3.4. Details may differ in other versions.
D.1 Initial project
Let’s demonstrate how to use Storybook in a simple project that contains a vanilla hello-world web component implemented in TypeScript.