Visual regression for site upgrades
visualdiff screenshots the same pages on two versions of your site (before and after a Craft, WordPress or Laravel upgrade, or any two git branches) and shows you what changed, pixel by pixel, worst first.
Coming soon · Apple Silicon · Node and Chromium built in · free for up to 10 pages per comparison
Try it: drag the divider, switch views, pick another page. Real captures from the visualdiff demo site.
How it works
Pick the site's folder. visualdiff works out what it is, reads your .env and finds its pages: every page-builder page plus a sample from each section, product type and category.
Two local sites, or any two git branches. Both sides are captured at once in a stabilised browser: animations off, lazy images loaded, trackers blocked.
Work down the list worst first. Mark each change expected, bug or fixed, then export the upgrade report as Markdown or CSV.
Every page gets a heatmap of where it changed and the share of pixels that moved. Pages that broke come first: a 5xx, or an error page that still answers 200, like a Twig error rendered with a success status.
Name any git branch and visualdiff makes it a working site: its own worktree, served by Herd or PHP's built-in server, and its own copy of the database, so running migrations on the upgrade branch never touches the one you compare against.
Example output; your numbers depend on the site.
JSON endpoints, sitemaps and feeds are compared as data, not pictures. Read the changes like a pull request: additions in green, removals in red, with each environment's own hostname ignored and volatile fields like timestamps left out.
{ "id": 1, "name": "Integrated fridge",− "price": 2499,+ "price": {+ "amount": 2499,+ "currency": "GBP"+ }, "inStock": true },⋯ 3 unchanged items− "inStock": true+ "inStock": false "meta": { "total": 6,+ "page": 1 }
Mark changes expected, bug or fixed with a note. Re-shoot a page after a fix and only that page is diffed again. Export the upgrade report for the client or the ticket.
Claude & MCP
visualdiff is an MCP server. Connect it to Claude Code, Claude Desktop or Cursor in one click from the menu bar, and ask in plain language. Claude sees the before, after and difference images of each change, not just a percentage.
Reviews Claude makes show up in the app like anyone else's.
Illustrative exchange.
Both sides shoot at once, each page is diffed the moment both screenshots exist, and an unchanging baseline is reused, so re-runs only capture the after side.
Node and Chromium are built in. It lives in the menu bar, notifies you when a comparison finishes, and installs the vdiff command for your terminal.
Free for up to 10 pages per comparison, no account needed. Yearly licences per seat for full sweeps.