Chromatic

Visual regression testing

Free tier + paidLibraries & build toolingchromatic.com

What it is

A cloud service from the Storybook team that screenshots every story on each commit and flags pixel differences for review. It adds cross-browser testing, hosted Storybook publishing and PR review workflows. The free tier covers 5,000 snapshots per month.

Why it earns a slot

Unit tests do not catch a CSS change that shifts every button four pixels. Chromatic turns 'did this refactor break the UI' into a diff you approve, which matters most when an agent edits shared styles.

Know before you commit

Requires Storybook first. Snapshot counts climb fast with many stories and browsers, so the jump from free to the $179/mo Starter plan arrives sooner than expected.

Getting started

npm install --save-dev chromatic

Field notes

0 from the community

Loading notes…

Field check

Unverified

Pricing snapshot

Free tier · Starter $179/mo

Snapshots move fast — verify at checkout, and post a field note if it changed.

Drop into your Lovable chat

Evaluate Chromatic (https://www.chromatic.com) for this project, then use it only if it fits what we are already building.
Context: Visual regression testing. A cloud service from the Storybook team that screenshots every story on each commit and flags pixel differences for review. It adds cross-browser testing, hosted Storybook publishing and PR review workflows. The free tier covers 5,000 snapshots per month.
Reviewer notes (general, not written for this codebase): Unit tests do not catch a CSS change that shifts every button four pixels. Chromatic turns 'did this refactor break the UI' into a diff you approve, which matters most when an agent edits shared styles.
Watch out for: Requires Storybook first. Snapshot counts climb fast with many stories and browsers, so the jump from free to the $179/mo Starter plan arrives sooner than expected.
Pricing: Free tier · Starter $179/mo
Setup: npm install --save-dev chromatic
Rules: treat the notes above as background only. Do not assume a theme, style, layout or feature that is not already in this project — inspect the existing code first and ask me before changing visual direction.

/api/public/tools/chromatic

Neighbourhood

How Chromatic sits against the rest of the atlas — swaps, companions and the tools builders actually save alongside it.