Happo for Storybook

You wrote the stories. Happo checks them all.

Your Storybook shows every state of every component. Happo renders each story in Chrome, Firefox, Edge, Safari, and on iPhone and iPad, and shows you what a pull request changed before you merge.

Start for free

Start free with 5,000 snapshots a month. No credit card needed.

happo.config.ts
export default defineConfig({
  integration: { type: 'storybook' },
  targets: {
    chrome: { type: 'chrome', viewport: '1024x768' },
    safari: { type: 'safari', viewport: '1024x768' },
    iphone: { type: 'ios-safari' },
  },
});
The CI run

npx happo

Storybook built: 612 stories

Happo 3 diffs need reviewSafari, iOS Safari

Review

The gap

Your stories build. Do they still look right?

A story that builds and an interaction test that passes say nothing about how a component looks in Safari. With hundreds of stories and five browsers, nobody checks them all by hand. Happo does, on every pull request.

What CI checked

  • storybook build (612 stories)
  • test-storybook (84 interaction tests)
  • tsc, eslint, and unit tests

All checks passed

What Happo saw1 diff

BookingCard / defaultSafari

Every story built and every interaction test passed. In Safari, the wider button pushed the price onto its own line, everywhere BookingCard is used.

Happo is a straight up life-saver. How many times did you think your change was contained only to discover that ten other teams started using what you built, and your change breaks three of the ten? Without Happo, you might not know.

Adam NearyAirbnb

Setup

Add Happo in an afternoon.

You keep your Storybook setup. Happo adds a step to it, and every pull request gets a status that links to its diffs.

  1. Install Happo

    Terminal
    npm install --save-dev happo

  2. Point it at your Storybook

    happo.config.ts
    import { defineConfig } from 'happo';

export default defineConfig({
  apiKey: process.env.HAPPO_API_KEY,
  apiSecret: process.env.HAPPO_API_SECRET,
  integration: {
    type: 'storybook',
  },
  targets: {
    chrome: { type: 'chrome', viewport: '1024x768' },
    safari: { type: 'safari', viewport: '1024x768' },
    iphone: { type: 'ios-safari' },
  },
});

    The key and secret come from your Happo account. That’s the whole setup: no decorators, and no changes to your stories.

  3. Run it in CI

    Terminal
    npx happo

    Happo builds your Storybook, renders the stories in parallel, and posts a status on the pull request that links to its diffs.

The full Storybook guide

Built for Storybook

Made for component libraries.

Storybook is where your components live, so it’s the best place to watch them. Happo knows its way around.

  • Nothing to change in your stories

    Happo builds your Storybook and visits every story on its own. There is nothing to register and no wrapper to add.

  • Interaction tests become screenshots

    A play function can open the menu, fill the form, or show the error. Call forceHappoScreenshot at each step and you get a snapshot of every state along the way.

  • Every theme from one story

    Tell Happo how your theme switcher works, and each story renders in light mode, dark mode, or any theme you have.

  • Pay only for what you render

    Changed three story files? Render just those with --only, and the rest of the report carries over from your base branch. Only the snapshots Happo renders count.

Happo allows us to make changes to components used on hundreds of screens and upgrade core UI dependencies with confidence. It has been a big productivity boost over our previous workflow.

Phil GlassMonzo

In every run

Your Storybook suite, in every browser.

Happo builds your Storybook, renders every story in each browser you pick, and compares each one with your base branch.

  • Chrome
  • Firefox
  • Edge
  • Safari
  • iOS Safari

  • Every browser your users have

    Each story renders in the browsers you pick: Chrome, Firefox, Edge, Safari, and Safari on iPhone and iPad, at any viewport, in light mode and dark.

    Browsers and targets

  • Accessibility in the same run

    Add an accessibility target and every story is checked too, with each violation pointed out on a screenshot. New ones block approval; the ones you already have don't.

    Accessibility testing

  • Animations, frame by frame

    Spinners, toasts, and transitions get stepped to exact moments and compared frame by frame, so a change to the motion is a diff like any other.

    Animation testing

  • Only real changes

    Rendering noise under your threshold is filtered out, every diff is deterministic, and a flake you report once stays ignored.

    Keeping diffs stable

  • A status on every pull request

    Happo compares with your base branch and posts a status that links to the review. It turns green when someone signs off.

    Continuous integration

  • Diffs your agents can read

    Claude Code and Cursor read the same diffs through Happo’s MCP server, fix what they broke, and hand you a pull request that already passes.

    The MCP server

FAQ

Questions, answered

What is Storybook screenshot testing?

Storybook screenshot testing, or visual regression testing, renders your stories, takes a screenshot of each one, and compares it with the same story on your base branch. A change you didn’t mean to make shows up as a diff before you merge.

How is it different from Storybook’s interaction tests?

Interaction tests check behavior: what happens when you click, type, or tab. Screenshot tests check appearance: layout, color, type, and spacing, in each browser. A story can pass every interaction test and still look broken in Safari. Most teams run both.

Can Happo take screenshots from my interaction tests?

Yes. Use your play functions to move a component through its states, and call forceHappoScreenshot at each one. You get the behavior coverage and a diff of every state.

Does Happo test accessibility too?

Yes, with no new tests to write. Add an accessibility target and Happo checks every story for accessibility violations in the same run, next to the visual diffs. It’s included on every plan.

How does Happo keep screenshots from being flaky?

Happo waits for fonts and images, holds animations still unless you ask it to test them, and filters out rendering noise below a threshold you set. When a diff is a flake, report it once and Happo ignores it from then on.

Does it run in CI on every pull request?

Yes. Run npx happo in CI and Happo compares the pull request with your base branch and posts a status that links to its diffs. It works with GitHub Actions, CircleCI, Azure DevOps, and the rest.

How many snapshots will I use?

Stories times targets times runs. 300 stories in three browsers, built 100 times a month, is 90,000 snapshots. The pricing page works it out for you.

Integrations

Happo works with what you have

Every story, every browser.

Point Happo at your Storybook this afternoon. Your next pull request shows which stories it changed, in the browsers your users have.

Start for free

Start free with 5,000 snapshots a month. No credit card needed.

Need help?