storybookjs/storybook

Storybook is a workshop environment for building, documenting, and testing user interface components in isolation. When you build a website or application, your buttons, dropdowns, forms, and other UI pieces normally only appear inside the full app, which makes them hard to develop, demo, and verify on their own. Storybook gives each component its own isolated playground where you can render it with different inputs, see every state it can be in, and write notes about how it should be used. The result is a living catalog of your design system that designers, engineers, and product managers can all browse. The way it works is that each component you build gets one or more "stories", small pieces of code that say "render this component with these props", and Storybook collects all of them into a single browsable site. The site lets you click through every component, switch between variations, view the source, and run automated tests against them. There are also addons that extend Storybook for accessibility checks, interaction tests, and documentation styling. You would use Storybook when you are building a design system, when your team has many UI components that need to be discoverable and consistent, or when you want to develop a component without spinning up the entire app each time. It supports many front-end frameworks including React, Angular, Vue 3, Web Components, React Native, HTML, and Ember, with extensions for mobile platforms like Android, iOS, and Flutter. The project is written in TypeScript and is used by many teams to coordinate UI development, testing, and documentation in one place.