Chromatic

A visual regression testing service built for Storybook. Catches unintended UI changes before they ship.

All Dictionary

In one sentence

Chromatic takes a snapshot of every Storybook story, then tells me on every pull request whether anything looks different.

What it is

Chromatic is a cloud service made by the Storybook maintainers. It hosts Storybook builds, runs visual regression tests across browsers and viewports, and shows diffs as reviewable side-by-side images. Changes need a human approval before they can merge.

Why it matters

A small CSS tweak can ripple through dozens of components. Without visual regression, those ripples reach production unnoticed. Chromatic catches them at the pull request stage, so I can accept the change as intentional or send it back for a fix before users ever see it.

Example

A typical pull request flow with Chromatic:

  1. Engineer opens a PR that changes a shared Button component
  2. CI builds Storybook and uploads it to Chromatic
  3. Chromatic diffs every story against the baseline from the main branch
  4. Three stories show visual changes: Button, ButtonGroup, Toolbar
  5. Designer reviews the diffs in the browser and approves or rejects
  6. PR can merge only after visual changes are accepted

When to use it

  • You already have Storybook and want automated visual checks
  • You want designers in the review loop without forcing them into Git
  • You need cross-browser rendering as part of CI
  • You prefer a hosted service over self-hosted Playwright diffs

See also