Home » Tools »

Storybook Storybook

An open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient.

Web development Design systems

Visit site »

Deliver robust UIs

Storybook provides a sandbox to build UI components in isolation so you can develop hard-to-reach states and edge cases.

Build components in isolation

Create components without needing to stand up screens, fuss with data, or build business logic.

Mock hard to reach use cases

Render components in key states that are tricky to reproduce in an app.

Document use cases as stories

Save use cases as stories in plain JavaScript to revisit during development, testing, and QA.

Supercharge your workflow with addons

Use addons to build UI faster, document a component library, and streamline your workflow.

Ship components with confidence

Storybook makes it easy to keep track of edge cases and as a result you get tests for free.

Ensure consistent user experiences

Whenever you write a story you get a handy visual spec. Quickly browse stories to make sure your UI looks right.

Auto-detect code regressions

Get code snapshot tests out of the box with Storyshots, an official addon.

Unit test components

Reuse stories in your unit tests to confirm nuanced functionality.

Catch UI changes down to the pixel every commit

Pinpoint UI changes with visual testing tools.

Share and reuse everything

Stop reinventing the wheel. Get a birds-eye view of your UI library to find components to reuse in your project.

Find any component in your app

Storybook is a searchable, single source of truth for your UI components.

Get timely feedback during development

Collaborate on UI implementation with your team by deploying Storybook to the cloud.

Share components across screens and apps

Every story is a use case that your team can find and reuse.

Generate a styleguide automatically

Write Markdown/MDX to generate a customizable site that is perfect for component libraries and design systems.


Alternatives to Storybook

Bodymovin

An After Effects extension to export animations for web.

Web development Animation

Catalog

Combine design documentation with real, live components in one single place, making collaboration between designers and developers seamless.

Web development Design systems

Flywheel

Whatever your work environment, Flywheel's powerful WordPress platform removes all the hassles of hosting, streamlines your processes, and lets you get back to doing your best work.

Web development

Fractal

Build. Document. Integrate. Powerful component libraries & styleguides that fit the way you work.

Web development Design systems

HTML Sketchapp

HTML Sketchapp turns HTML nodes into Sketch layers or symbols. Additionally, it allows to export shared text styles and document colors.

Design systems Design-to-code Web development

Hugo

Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again.

Web development

Jekyll

Transform your plain text into static websites and blogs.

Web development

Keyframes

Keyframes helps you write better CSS. Dead simple visual tools to help you generate CSS for your projects.

Web development Animation

Lottie

An iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images.

Web development Animation

Netlify

Netlify is everything you need to build fast, modern websites: continuous deployment, serverless functions, and so much more.

Web development

React Sketch.app

Render React components to Sketch; tailor-made for design systems

Design-to-code Design systems Web development