For React apps · Visual regression

Visual regression for React.
Without Storybook.

Storybook-only tools (Chromatic, Loki) don’t fit if you don’t publish a Storybook. Lastest tests the running React app at any URL - three diff engines, self-healing selectors, $0 self-hosted.

No Storybook required3 diff engines$0 self-hosted
Visual diff slider showing baseline vs new React app screenshot
Baseline. Diff.

Most visual testing assumes Storybook. Real apps don’t.

Two of the three things you’ll keep hitting if you try to bolt visual regression onto a React app the traditional way.

01

Storybook-first tools test the wrong surface.

Chromatic, Loki and friends render isolated components. Real bugs live in real layouts - header overlapping the modal, sidebar collapsing the dashboard, a route only mounted after auth. If you don’t already publish a Storybook for every screen, you’re testing a parallel reality.

  • Component-only - misses route- and layout-level bugs
  • Storybook maintenance - extra surface to keep current
  • $179+/mo - and that’s before screenshot overage
  • SaaS-only - your DOM ships to a vendor
02

Pixel-only diffs flood you with noise.

Hand-rolled toMatchSnapshot setups using pixelmatch alone fail on a 1px subpixel anti-alias. Engineers stop reading the alerts. Real regressions slip through underneath.

  • One diff engine - can’t separate noise from regression
  • Manual mask config - every dynamic region by hand
  • Selectors break on every refactor
  • No oversight UI for triage

Test the running app. With three diff engines.

Two features that fit a React codebase regardless of how it’s built or whether you have a Storybook.

01 · Record

Click through your React app. That’s the test.

Open the recorder, paste your dev / preview / staging URL, walk through real user flows, hit stop. Lastest emits deterministic Playwright code with seven-layer selector fallback. Component refactor? The selector still finds the button.

  • Works with CRA, Vite, Next.js, Remix, Astro, Gatsby
  • Multi-step screenshots per run
  • No source access required
Recorder timeline capturing a React app user flow

02 · Three diff engines

Pixelmatch. SSIM. Butteraugli. Pick your false-positive tolerance.

Pixelmatch catches sharp shifts. SSIM catches structural changes. Butteraugli is perceptual - it sees what humans see. Lastest runs all three and gives you a slider to triage. Branch-to-branch compare wires straight into your PR review.

  • Auto-mask timestamps, UUIDs, relative times
  • AI failure triage: real regression vs. flake vs. env
  • Approve or reject each change with one click
Visual diff slider comparing React baseline vs new screenshot

Visual regression for React: FAQ

Do I need Storybook to use Lastest?
No. Lastest tests the running React app at any URL: your dev server, a Vercel preview, a Netlify deploy, a staging environment. If a browser can load it, Lastest can test it. Storybook is optional, not required.
How is this different from Chromatic?
Chromatic is excellent if you already publish a Storybook. If you don’t, you’re paying ($179+/mo) to maintain a parallel render harness instead of testing the real app. Lastest tests the real app, ships three diff engines (pixelmatch / SSIM / Butteraugli), and is $0 forever because you self-host the Docker image.
How is this different from Percy or Applitools?
Same comparison surface, different cost model. Percy and Applitools charge per screenshot and ship your UI to their servers. Lastest gives you the same perceptual-class diffing locally, with unlimited screenshots that never leave your network. Open source, FSL-1.1-ALv2 licensed.
Will my React component refactors break the tests?
Not if the user-visible output stays the same. The 7-layer selector fallback ignores wrapper churn. The visual diff only flags changes a human would actually see, like a 1px shift, a missing element, or a color change. Hydration noise and class-name renames are masked.
How do I run this against a Create React App or Vite app?
Run your app: npm run dev on port 3001. Run Lastest: docker-compose up on port 3000. Open the recorder, paste http://host.docker.internal:3001, click through your flow, hit stop. The test is generated. Re-run on every commit.
Will it work in CI?
Yes. Lastest ships a Docker image and a published GitHub Action. Spin up your preview, run the suite against it, fail the PR on a non-trivial diff. Every replay is deterministic and costs zero tokens.
How much does it cost?
Zero. Open source (FSL-1.1-ALv2), self-hosted via Docker. No per-screenshot fee, no per-seat fee, no SSO surcharge, no token cost on replay.

Add visual regression
to your React app.
In five minutes.

No cloud account. No API key. No Storybook. Point it at any React URL and go. Open source, FSL-1.1-ALv2 licensed, $0 forever.

★ Star & Install from GitHub →
install

# 1. clone

$ git clone https://github.com/las-team/lastest

 

# 2. start

$ cd lastest && docker-compose up -d

 

# 3. point at your React app URL

$ open http://localhost:3000

 

View the source