Storybook

Storybook is an open source tool for building UI components and pages in isolation. Developers render each component in its different states without running the whole application.

Each state of a component is saved as a story. Stories open in a browser at a local address while you work, so you can see edge cases such as empty, loading or error states. The same stories can be reused for interaction tests, visual tests and documentation. Addons add extra panels for accessibility checks, controls and more. The project works alongside the tools a team already uses.

• Build components in isolation
• Save states as reusable stories
• Interaction and visual tests
• Automatically generated documentation
• Over 400 integrations

Frontend teams that build shared component libraries or design systems will get the most from it. QA staff and designers can also use the stories as a reference for every UI state.

Storybook is free and open source under the MIT licence. It runs on the developer's own machine during development, and it works with several front-end frameworks. Setting it up takes some effort for a large existing project, because each component needs a story to get the full benefit.