Cloud Parts

Storybook

A workshop that renders each UI component on its own, one state per story, and turns those stories into documentation and browser tests.

What it is
Automated testing (component workshops)
Type
Open source
Made by
Chromatic
License
MIT
Facts checked
9 October 2026
Website Source code

What it is

Storybook runs as a separate development server next to your app. It renders components in an isolated iframe, away from the app’s business logic and context, and shows every story in a sidebar. A story is a named export in a Component Story Format (CSF) file: an ES module whose default export names the component and whose other exports each set props (args) and mocked data for one state. Stories work with React, Vue, Angular, Svelte, web components and other frameworks, and the same stories feed auto-generated documentation pages.

Since Storybook 9 (June 2025), testing is built on Vitest. A story can carry a play function that clicks and types through Testing Library queries and then asserts. The Vitest addon transforms every story into a real Vitest test and runs it in Vitest’s browser mode with Playwright, from the Storybook sidebar, the terminal or CI; a story without a play function still counts as a render test. Accessibility tests run axe-core against each story, coverage shows which code the stories exercise, and visual tests use Chromatic, a cloud service made by the Storybook team. Projects that can’t use the Vitest addon can use the older test-runner.

Storybook 10 (October 2025) made the package ESM-only, which cut its install size by 29% on top of roughly halving it in version 9, and added sb.mock for module mocking with both the Vite and Webpack builders.

Why teams pick it

  • Every hard-to-reach state (empty, loading, error, edge-case data) is one click away instead of a walk through the app
  • Stories double as documentation and as tests: interaction, accessibility, visual and coverage, in one tool
  • CSF stories are plain ES modules, so Vitest, Jest, Playwright or Cypress can reuse them
  • Supports every major web framework, with hundreds of addons

Watch out for

  • Its Vitest-based testing needs a Vite-based Storybook framework (such as react-vite or nextjs-vite); Webpack projects fall back to the separate test-runner
  • Components that depend on app context (routing, data fetching, global state) need decorators and mocks before they render on their own
  • Visual regression testing goes through Chromatic, a separate cloud service from the Storybook team
  • Frequent majors with breaking changes: 10.0 came about five months after 9.0, is ESM-only and needs Node 20.16+, 22.19+ or 24+

How it fits with other technologies

A story with a play function, run as a Vitest test in Chromium · ts

// Counter.tsx
import { useState } from 'react';

export const Counter = ({ start = 0 }: { start?: number }) => {
  const [n, setN] = useState(start);
  return <button onClick={() => setN(n + 1)}>Clicked {n} times</button>;
};

// Counter.stories.ts
import type { Meta, StoryObj } from '@storybook/react-vite';
import { expect } from 'storybook/test';
import { Counter } from './Counter';

const meta = { component: Counter } satisfies Meta<typeof Counter>;
export default meta;
type Story = StoryObj<typeof meta>;

// a story: one state of the component, rendered in isolation
export const FromTen: Story = { args: { start: 10 } };

// the same state plus a play function: click twice, then assert
export const ClickedTwice: Story = {
  args: { start: 10 },
  play: async ({ canvas, userEvent }) => {
    const button = canvas.getByRole('button');
    await userEvent.click(button);
    await userEvent.click(button);
    await expect(button).toHaveTextContent('Clicked 12 times');
  },
};

// $ npx vitest run --project storybook --reporter=verbose
//  ✓ |storybook (chromium)| src/stories/Counter.stories.ts > From Ten 205ms
//  ✓ |storybook (chromium)| src/stories/Counter.stories.ts > Clicked Twice 21ms
//  Test Files  1 passed (1)
//       Tests  2 passed (2)

See it in a real stack

No architecture uses Storybook yet. Drop it into the playground and wire it up yourself.Open playground →
Where it came from2016–2025

Storybook began at Kadira, a bootstrapped Sri Lankan startup led by Arunoda Susiripala and known for its Meteor tools. Kadira released React Storybook 1.0 in April 2016: an environment for developing UI components one “story”, or state, at a time, outside the app. It was open source, with a commercial hosted service promised alongside. It reached the top of Hacker News, gained React Native support and an addon API, and 2.0 followed in September 2016.

Kadira shut down in December 2016, and from mid-January 2017 pull requests sat unanswered. After an issue asked whether the project was dead, Dan Abramov proposed community maintenance, and Norbert de Langen stepped up to lead it, with Michael Shilman and other volunteers; Arunoda and Muhammed Thanish helped hand it over. Storybook 3.0, the first community release, shipped in May 2017. In 2019, Storybook 5.2 introduced Component Story Format, designed by Tom Coleman, de Langen and Shilman so stories could be used outside Storybook.

The Storybook maintainers also build Chromatic, a visual testing cloud service. Storybook 9 (June 2025) rebuilt testing on Vitest and Playwright, and Storybook 10 (October 2025) went ESM-only.

Why it’s built this way

One story per component state
Components can render a specific variation from props and mocked data, so there is no need to spin up the whole app and contort it into the right state.
An isolated iframe next to the app
Rendering outside the app keeps business logic and app context from interfering, so you can focus on each variation, including hard-to-reach edge cases.
Stories as plain ES modules (CSF)
The older storiesOf API tied stories to Storybook’s internals. A platform-agnostic format lets other tools, from test runners to design tools, use the same stories.
Build on Vitest and Playwright instead of its own runner
Storybook 9 partnered with Vitest for a fast runner and Playwright for browser fidelity, so stories already written become component tests across thousands of UI states.

Timeline

  1. 2016

    Kadira launches React Storybook 1.0 (April) and shuts down (December)

  2. 2017

    Community maintainers ship Storybook 3.0 (May)

  3. 2019

    Storybook 5.2 introduces Component Story Format

  4. 2025

    Storybook 9 builds testing on Vitest (June); Storybook 10 goes ESM-only (October)

Sources8 · facts checked 9 October 2026

Improve this page on GitHub