open source · MIT · self-hostable

Catch the regression, not the noise.

Teams add visual regression tests — then mute the channel they post to, because ~40% of failures aren't real bugs. Frontguard uses AI vision to label every diff a regression, an intentional change, or content — so a red run means something again.

$ npm install @frontguard/cli

Get started →Star

frontguard run

🔍 Discovering routes... found 47 routes
📊 12/47 routes affected by changed files
🖥 Rendering 12 routes × 3 viewports
───────────────────────────────────
  ✓ /           375 768 1440  PASS
  ✓ /pricing    375 768 1440  PASS
  ⚠ /checkout   375 768 1440  WARN
  ✘ /dashboard  375 768 1440  REGRESSION
  ★ /settings   375 768 1440  NEW
───────────────────────────────────
1 regression · 1 warning · 9 passed · 1 new

AI ANALYSIS — REGRESSION · 94% CONFIDENCE

“The sidebar overlaps main content on mobile. A flex-direction change in Dashboard.module.css:28 removed column stacking.”

// WHY TEAMS MUTE VISUAL TESTS

Everyone adds visual regression tests. Then everyone mutes the channel they post to.

Around 40% of pixel-diff runs go red for things that aren't real bugs — a 2px font shift, a changed date, a lazy image. Once a red run usually means nothing, the tool is dead — worse than no tests. That's the problem Frontguard exists to solve.

~40%

of visual-diff runs fail for reasons that aren't real bugs

73%

of teams have lost faith in test automation to flake

<10%

of frontend teams run visual regression testing at all

$100M

a single mobile CSS bug cost on Prime Day

// HOW FRONTGUARD THINKS

Not just “pixels differ.” Detect, understand, fix.

01 / DETECT

Find what changed

Pixel diff plus DOM and computed-style diff across every viewport and browser — catching what humans miss. Multi-render consensus kills the flaky-screenshot noise.

02 / UNDERSTAND

Explain why it broke

AI vision classifies every diff — regression, intentional, or content update — maps it to the exact code change, and explains the root cause in plain language.

03 / FIX

Verified, not guessed

Generate a fix, apply it, re-render, and compare again. Only fixes that provably resolve the regression are suggested — no hallucinated guesses.

// RUN IT YOUR WAY

One command, or three lines.

Run it standalone against any URL, or drop visual assertions straight into the Playwright suite you already have. No proprietary snapshot format, no test files to port.

Standalone CLI@frontguard/cli

$ npx frontguard run \
    --url http://localhost:3000

  ✓ 11 passed   ✘ 1 regression
  AI: "submit button lost its background"

Point it at any URL. It auto-discovers routes, renders, diffs, and posts the verdict — zero test files to write.

Playwright-native@frontguard/playwright

import { expectVisual } from '@frontguard/playwright';

test('home page', async ({ page }) => {
  await page.goto('/');
  await expectVisual(page);
});

Three lines in a test you already wrote. Reuses the page Playwright just rendered — no second browser launch.

Terminal

$ npm install @frontguard/cli
$ npx frontguard init
$ npx frontguard run --url http://localhost:3000

Terminal

$ npm install -D @frontguard/cli @frontguard/playwright

.github/workflows/visual.yml

- name: Frontguard
  uses: ravidsrk/frontguard@v1
  with:
    url: ${{ steps.preview.outputs.url }}
  env:
    FRONTGUARD_OPENAI_KEY: ${{ secrets.OPENAI_KEY }}
    GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

// THE PIPELINE

Six stages, fully self-hostable.

Each stage is independent with error boundaries — one page failing doesn't kill the run. A fast pixel gate means ~90% of pages never hit the AI.

01
Discover
Crawl, filesystem scan, or config — finds every route automatically.
02
Filter
Dependency graph renders only pages affected by your changes.
03
Render
Playwright × viewports × browsers. Anti-flake multi-render.
04
Diff
pixelmatch fast gate, then DOM + computed-style diff.
05
Analyze
AI vision classifies, explains, and scores confidence.
06
Report
Console, JSON, HTML, and a GitHub PR comment with diffs.

// AI CLASSIFICATION

Kills the #1 pain of visual testing: false positives.

A diff isn't a bug. Frontguard tells a regression apart from an intentional redesign, so your suite stops crying wolf — and teams stop disabling it.

Severity and confidence scoring on every issue
Bring your own key — OpenAI or Anthropic
Runs locally first; AI activates only on real diffs

/dashboard @ 375pxREGRESSION · 94%

“The sidebar overlaps the main content on mobile. A flex-direction change in Dashboard.module.css:28 removed the column stacking.”

Suggested fix: restore flex-direction: column at the < 768px breakpoint.

/pricing @ 1440pxINTENTIONAL · 91%

“New 'Enterprise' pricing tier added. Layout intact, content expanded. Not a regression.”

// EVERYTHING IN THE BOX

CLI-first. Zero dashboards required.

DISCOVERY
Zero-config routes
Auto-crawls your app to find every page. No manual route lists.
RENDER
Multi-browser
Chromium, Firefox and WebKit via Playwright from day one.
SPEED
Smart rendering
Dependency graph renders only the pages your PR actually affects.
STORAGE
Git-native baselines
Stored in an orphan branch — zero bloat on your main branch.
PREVIEW
Preview deploys
Auto-detects Vercel and Netlify preview URLs. Push and go.
CONFIG
Per-route thresholds
Strict on /checkout, relaxed on /blog — all in one file.
DETECT
Framework detection
Next.js, Remix, SvelteKit, Nuxt and Astro out of the box.
SECURITY
Security hardened
Shell-injection prevention, path-traversal guards, key redaction.
REPORT
PR thumbnails
Baseline / current / diff images embedded right in the PR comment.

// CONFIGURATION

One file. Sensible defaults.

Auto-discover routes by crawling, or list them explicitly. Set per-route thresholds — strict on /checkout, relaxed on /blog.

frontguard init auto-detects Next.js, Remix, SvelteKit, Nuxt or Astro and writes this for you.

frontguard.config.ts

export default {
  baseUrl: 'http://localhost:3000',

  // auto-discover routes (zero config)
  discover: {
    startUrl: '/',
    maxDepth: 3,
    exclude: ['/admin/*', '/api/*'],
  },

  viewports: [375, 768, 1440],
  browsers: ['chromium'],
  threshold: 0.1,

  // AI analysis (optional, BYOK)
  ai: { provider: 'openai', model: 'gpt-4o' },
};

// HOW IT COMPARES

The only one with AI fix verification.

How Frontguard compares with Percy, Chromatic, BackstopJS, and Lost Pixel across seven core capabilities.
Capability	Frontguard	Percy	Chromatic	BackstopJS	Lost Pixel
Open source (MIT)	full support	not available	partial / limited	full support	partial / limited
CLI-first	full support	not available	not available	full support	full support
AI change classification	full support	not available	not available	not available	not available
AI fix verification	full support	not available	not available	not available	not available
Anti-flake rendering	full support	partial / limited	partial / limited	not available	not available
Self-hostable	full support	not available	not available	full support	partial / limited
Free tier	Forever	Trial	Hobby	Free	not available

See all 11 capabilities across 6 tools →

Extensible by design — 5 built-in plugins, 6 lifecycle hooks

beforeDiscover · afterDiscover · afterRender · afterCompare · afterRun · onError

Figma
Design-to-code comparison & token extraction.
Perf Budgets
LCP / CLS / TTFB thresholds tied to the diff.
Accessibility
axe-core WCAG audits in the same render pass.
3rd-Party Scripts
Flags ad / analytics / widget drift between runs.
Monitor
Production visual monitoring & alerting.

// NO MAGIC, JUST HONEST

We'll tell you what it isn't.

Skeptical engineers built this for skeptical engineers. No silver bullets — here's exactly where the edges are.

YOU BRING THE KEY

AI runs on your own OpenAI or Anthropic key, so you pay per judged diff. The anti-flake gate keeps ~90% of pages away from the model — the bill stays small, and your screenshots never touch a server we run.

YOU STAY IN THE LOOP

Vision models misjudge edge cases. Frontguard never silently auto-approves — every classification and every fix is yours to accept or reject, and that feedback trains the local fix-pattern database.

NUMBERS, NOT CLAIMS

It's young. We validate against real, live repositories and publish real false-positive rates rather than asserting accuracy. Trust is earned — tell us where the classifier gets it wrong.

// VALIDATION

Numbers from a real harness, not a slide.

We run Frontguard against live open-source apps and publish what the harness measured — including the repos it couldn't boot. No accuracy figure ships until the AI classification pass clears the gate.

2 / 5

repositories booted end-to-end this run

routes re-rendered and re-checked

false positives flagged on unchanged pages

pixel-diff false-positive rate

Per-repository validation results from the 2026-06-16 harness run on Frontguard CLI 0.2.0.
Repository	Category	Re-check pass	False positives	Pixel FP rate
chakra-ui-docs	component library docs	21	0	0%
tailwind-dashboard	Tailwind dashboard	18	0	0%
taxonomy	Next.js app	skipped — next 13.3.2-canary dev server failed to load config under Node 22; contentlayer dev succeeded but next dev crashed
medusa-storefront	e-commerce storefront	skipped — requires a running Medusa backend and NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY — not provisioned in this harness run
nextra-docs	docs site	skipped — monorepo's root `pnpm dev` builds every package but does not bind a dev server on :3000 within the 120 s timeout

AI classification was disabled in this run, so no accuracy or AI false-positive number is published yet. We gate the launch on accuracy ≥ 70% and a false-positive rate below 15%. Read the full results or the methodology. Run 2026-06-16 · CLI 0.2.0.

Ship with confidence.

Free forever. No per-screenshot pricing cliff, no dashboard lock-in. Install it and run your first check in two minutes.

$ npx frontguard init --ci

Read the docs →★ Star on GitHub

Not just “pixels differ.” Detect, understand, fix.

Find what changed

Explain why it broke

Verified, not guessed

One command, or three lines.

Six stages, fully self-hostable.

Kills the #1 pain of visual testing: false positives.

CLI-first. Zero dashboards required.

Zero-config routes

Multi-browser

Smart rendering

Git-native baselines

Preview deploys

Per-route thresholds

Framework detection

Security hardened

PR thumbnails