Open Source · MIT License

Capture. Compare. Proof.

Browser extension that captures before & after screenshots, auto-aligns them, and generates slider comparisons, pixel diffs, and animated GIFs.

View on GitHub Get Started
📊
Before: Default styling
Basic layout, no visual hierarchy
After: Redesigned UI
Polished design, improved UX
Before After

Everything you need to compare

Powerful visual regression, running entirely in your browser.

📸

Smart Capture

One-click screenshots with automatic DOM fingerprinting. Captures scroll position, viewport, and element selectors for reliable pairing.

🔗

Auto-Pairing

Perceptual hashing and URL matching suggest pairs automatically. You stay in control — confirm or swap in the UI.

🎯

Tiered Alignment

Fast anchor-based alignment first, OpenCV feature-matching as fallback. Handles viewport changes, scaling, and layout shifts.

🎚️

Slider Comparison

Interactive before/after slider overlay. Drag to reveal differences with pixel-perfect precision.

🔴

Pixel Diff

Highlighted difference map shows exactly what changed. Configurable threshold for noise tolerance.

🎬

GIF Export

Animated before/after sequences, generated client-side via Web Workers. No server upload needed.

How it works

1

Install the extension

Load ProofShot in Chrome or Edge from the Chrome Web Store (or load unpacked for development).

2

Capture your "before"

Click the ProofShot icon and hit capture on any page. The extension records the DOM state, scroll position, and screenshot.

3

Make your changes

Update your design, fix a bug, or tweak the layout — whatever you need to compare.

4

Capture "after" and compare

Capture again. ProofShot auto-pairs the screenshots and offers slider, side-by-side, and diff views. Export as PNG or GIF.

Get started in seconds

100% client-side. No account required. No data leaves your browser.

1

Clone the repo

2

npm install && npm run build

3

Load unpacked in Chrome

View source on GitHub →