Chromatic

Visit Website

Introduction

Chromatic is the hosted visual testing and review product from the Storybook maintainers. You publish a Storybook, or point Chromatic at another UI test runner, and it screenshots stories or tests, diffs them against the baseline, and posts the result as a pull-request check. Reviewers accept changes in the Chromatic UI. Interaction tests and accessibility checks can run in the same capture.

The capture service is commercial. The Storybook framework itself stays open source and is a separate project. Chromatic bills “billed snapshots.” TurboSnap copies or skips snapshots whose code did not change, and those copies count as a fraction of a snapshot.

Features

1. Storybook publish: chromatic in CI builds Storybook and uploads it. Each git commit can have a published Storybook plus a test result.
2. Visual diffs: Stories are screenshotted and compared to the accepted baseline. Reviewers accept or deny in the hosted UI.
3. UI Review: Designers and developers comment on a story in the published Storybook without checking out the branch.
4. Interaction tests: Storybook play functions run during capture. Those interaction runs are not billed as snapshots; visual and accessibility captures are.
5. Accessibility checks: Chromatic can capture accessibility results next to the visual snapshot. Those captures count toward billed snapshots.
6. TurboSnap: Only stories affected by a file change are recaptured. Unchanged stories are copied (0.2 billed snapshot) or, on current CLI versions, bypassed at no charge when the build does not touch UI.
7. Browsers: The free plan captures Chrome. Paid plans add Safari, Firefox, and Edge.
8. Other runners: Chromatic’s current docs and pricing also cover Git and CI integrations beyond Storybook, including Playwright, Cypress, and Vitest. Storybook remains the primary path.

Pros

1. Built around Storybook: If the design system is already stories, you do not write a second navigation script to reach each component.
2. PR checks are concrete: A visual change shows up as images, not only a failed pixel hash in a log.
3. TurboSnap cuts repeat cost: Untouched stories are not full captures. Builds that do not touch UI can be free on a current CLI.
4. Free tier is team-shaped: 5,000 billed snapshots a month, unlimited projects, users, and collaborators. No credit card to start.
5. One place for the published UI: Reviewers open the branch’s Storybook instead of pulling the branch and running it.

Cons

1. You need stories or tests worth capturing: Chromatic does not invent coverage. A thin Storybook produces a thin visual suite.
2. Free plan is Chrome only: Cross-browser capture starts on the Starter plan at $179 per month.
3. Snapshot math still surprises: Modes, themes, viewports, and accessibility captures multiply billed snapshots. The free plan pauses testing for the rest of the month at 5,000.
4. Vendor UI for baselines: Accepted baselines live in Chromatic, not only in git. Leaving the product means rebuilding that history.
5. The CLI and the cloud are different things: Publishing is a hosted service. Self-hosting Storybook does not give you Chromatic’s diff UI.

Usage and Links (Example)

npm install --save-dev chromatic
npx chromatic --project-token "$CHROMATIC_PROJECT_TOKEN"

In GitHub Actions, run that after install and pass the project token as a secret. Locally, the same command publishes your current Storybook build. TurboSnap needs the CLI to see git history (fetch-depth: 0 in Actions).

Resources:

• Chromatic website
• Chromatic docs
• Pricing
• Billing

Pricing

From chromatic.com/pricing and the billing docs:

1. Free: $0. 5,000 billed snapshots per month (described as equivalent to 25,000 TurboSnaps), Chrome only, unlimited projects, users, and collaborators. Testing and review pause until the next cycle, or until you upgrade, once the allowance is used.
2. Starter: $179 per month. 35,000 billed snapshots. Extra billed snapshots at $0.008. Adds Safari, Firefox, and Edge.
3. Pro: $399 per month. 85,000 billed snapshots, aimed at larger capture volume.
4. Enterprise: Custom, with unlimited snapshots listed on the pricing page.

A captured visual or accessibility snapshot counts as one billed snapshot. A TurboSnap copy counts as 0.2. A bypassed build, when the CLI detects no UI changes, counts as zero. Interaction tests are not billed as snapshots. Paid plans keep testing if you exceed the allowance and bill the overage; the free plan stops.

Recommended for?

1. Design systems that already use Storybook and want a visual check on each pull request.
2. Frontend teams who will review diffs instead of auto-accepting them.
3. Repos with a stable story per component, including light and dark themes only where those themes can regress.
4. Groups that outgrow Chrome-only capture and can justify the Starter plan for extra browsers.

Conclusion

Chromatic makes sense when Storybook is already how you look at UI. The free allowance is large enough to run a real component library in Chrome and see what TurboSnap does to the bill. Cross-browser capture and uninterrupted overage start at $179 a month. It snapshots what your stories render; it does not replace end-to-end tests of user journeys.