Frontguard vs Chromatic

Chromatic is built by the Storybook maintainers — a hosted visual testing + review platform with first-class Storybook integration, TurboSnap (changed-story detection), and a strong PR review workflow. Frontguard is a newer, CLI-first, MIT-licensed tool that tests any URL or route (Storybook optional) and adds AI vision analysis.

Quick Comparison

When to Choose Chromatic

Honestly, Chromatic is the better choice when:

• You live in Storybook. Component-driven teams with comprehensive Storybook coverage get first-class per-story snapshots, interaction tests, and TurboSnap to skip unchanged stories.
• You need a polished, PR-integrated review dashboard today with multiple reviewers, baselines per branch, and a slick approval UX. Frontguard doesn't have this yet.
• You want a fully managed service with support, and you're fine billing per snapshot.
• You rely on TurboSnap to only re-snapshot stories affected by a code change.

When to Choose Frontguard

• You test full pages/routes, not just components — or you have no Storybook.
• You want AI to explain why a diff happened and classify it (regression vs intentional vs content), reducing manual triage.
• You want predictable/zero cost without per-snapshot metering.
• You want rendering to stay in your own CI (no uploading builds to a third party).
• You value open source + self-hosting (MIT).

Feature-by-Feature Deep Dive

Scope: components vs pages

Chromatic is component-first: it renders each Storybook story in isolation. That's fantastic for design-system coverage but assumes you maintain Storybook. Frontguard is route-first: it captures real, fully-assembled pages at baseUrl (and can point at a served Storybook iframe if you want stories too).

CI model

Chromatic builds your Storybook and uploads it to its cloud for rendering/diffing — snapshots meter your bill and leave your infra. Frontguard renders with Playwright inside your CI and stores baselines on a git orphan branch.

Change scoping / cost control

Chromatic's TurboSnap detects which stories a commit affects and skips the rest — a real strength. Frontguard controls cost differently: AI only runs on pages that actually diffed (pixel-pass pages never hit the model), plus per-route thresholds and viewport limits.

False positives

Chromatic relies on human review (with good tooling) to dismiss noise. Frontguard adds an AI classification layer + anti-flake multi-render consensus to suppress flaky/intentional changes automatically before they reach a human.

AI analysis

Chromatic uses a deterministic pixel + perceptual diff and intentionally avoids LLM-driven classification — predictable, fast, no per-snapshot token cost. Frontguard sends baseline + current images to OpenAI/Anthropic (BYOK) only on pages that actually diffed, and returns a classification, severity, explanation, and optional suggested fix. See AI Analysis.

Review & approval

Chromatic clearly wins today: branch-aware baselines, PR checks, multi-reviewer dashboard. Frontguard's review is CLI/report-based (frontguard accept-fix <id> for individual AI fixes, frontguard update-baselines to promote current screenshots in bulk); a hosted dashboard is on the roadmap, not shipped.

Pricing Comparison

• Chromatic: free for Storybook hobby use (a generous monthly snapshot allotment), then per-snapshot billing as you scale. TurboSnap helps keep counts down.
• Frontguard: CLI is free forever (MIT). Optional $29/mo Pro and an optional cloud add team features. AI cost = your own OpenAI/Anthropic usage (BYOK), only on diffed pages.

Migration Steps (Chromatic → Frontguard)

1. Install Frontguard.

   npm install -D @frontguard/cli
   npx -p @frontguard/cli frontguard init

2. Decide your scope. Keep testing Storybook stories and/or add real page routes.
   Test real pagesTest Storybook stories

   export default {
     baseUrl: 'http://localhost:3000',
     routes: ['/', '/pricing', '/checkout'],
     viewports: [375, 768, 1440],
     threshold: 0.1,
     smartRender: true,
     ai: { provider: 'openai', model: 'gpt-4o' },
   };

   export default {
     // serve storybook-static, e.g. http-server storybook-static -p 6006
     baseUrl: 'http://localhost:6006',
     routes: [
       '/iframe.html?id=button--primary&viewMode=story',
       '/iframe.html?id=card--default&viewMode=story',
     ],
     viewports: [375, 1440],
     threshold: 0.1,
     smartRender: true,
   };

3. Map Chromatic modes/viewports → viewports.
4. Move ignored/dynamic regions to ignore: [{ selector }].
5. For interaction/play-function flows, use the Playwright plugin.
6. Capture baselines and run.

   npx -p @frontguard/cli frontguard baseline
   npx -p @frontguard/cli frontguard run

7. Update CI — replace the chromatic command with frontguard run. Remove CHROMATIC_PROJECT_TOKEN.

Next Steps

• AI Analysis
• Configuration reference
• GitHub Actions