Storybook 8 Has a Free API That Most Developers Don't Know About

Storybook 8 introduced a completely new architecture with massive performance improvements and a powerful visual testing API.

Component Story Format 3 (CSF3)

import type { Meta, StoryObj } from "@storybook/react";
import { Button } from "./Button";

const meta: Meta<typeof Button> = {
  component: Button,
  tags: ["autodocs"],
  argTypes: {
    variant: { control: "select", options: ["primary", "secondary"] },
    size: { control: "radio", options: ["sm", "md", "lg"] }
  }
};
export default meta;
type Story = StoryObj<typeof meta>;

export const Primary: Story = {
  args: { variant: "primary", children: "Click me" }
};

Interaction Testing

import { expect, userEvent, within } from "@storybook/test";

export const FilledForm: Story = {
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    await userEvent.type(canvas.getByLabelText("Email"), "[e-mail]");
    await userEvent.click(canvas.getByRole("button", { name: "Sign In" }));
    await expect(canvas.getByText("Welcome!")).toBeInTheDocument();
  }
};

Portable Stories

import { composeStories } from "@storybook/react";
import * as stories from "./Button.stories";
const { Primary } = composeStories(stories);
test("renders", () => { render(<Primary />); });

Key Features in v8

• SWC compiler — 2-4x faster builds
• Visual testing with Chromatic
• Autodocs from TypeScript
• RSC support

---

Need to scrape or monitor web data at scale? Check out my web scraping actors on Apify — ready-made tools that extract data from any website in minutes. Or email me at [e-mail] for custom solutions.