Mockpup – Pixel Perfect Overlay: Compare Your Mockup to the Live Page

Pixel perfect overlay: put your mockup or Figma frame on the live page, see every diff, get a match score. Free, no ads, no account.

Pixel perfect overlay for front-end developers and designers: lay your design mockup over the live page and see exactly where the build drifts, pixel by pixel. Free, with unlimited layers. No ads, no account, no tracking. Your mockups never leave your browser. Drop a PNG, JPG, SVG or WebP export, paste an image from the clipboard, load it from a URL, or paste a frame copied in Figma at its exact size. It lands on top of the page, semi-transparent, on localhost, staging or production. ━━━━━━━━━━━━━━━━━━━━ COMPARE DESIGN AND BUILD • Overlay: drag, resize (aspect ratio locked; Shift to free-resize), nudge 1 px with the arrow keys (10 px with Shift), set exact X / Y / scale. • Diff mode (Alt+C): identical pixels turn black, every mismatch glows. • Blend modes: Normal, Difference, Multiply, Overlay, Invert. • Wipe (W): drag a handle across the page, design on one side, build on the other. • Onion skin: pulse the opacity to catch small shifts. • Loupe (Alt+L): magnifier up to ×10 that follows your cursor. • Eyedropper: pick any pixel and copy its hex code. MEASURE THE MATCH • Match analyzer: compares every pixel under your mockup and gives a match score, a heatmap of the differences and the three biggest problem zones. Click a zone to jump to it. • Snap: align it to any corner, edge or the center in one click. • Pin to element: anchor a layer to a page element so it follows the layout when the page reflows or scrolls. ORGANIZE YOUR MOCKUPS • Unlimited layers per site, saved automatically and restored when you come back. • Folders: group layers by breakpoint, page or variant. • Multi-select, move, fade or delete several layers at once. Every delete can be undone (Cmd/Ctrl+Z). • Copy layers from another site: bring what you placed on localhost to staging or production in one click. • Figma (optional): connect a personal access token once, then paste a copied frame at its exact size. Copy as PNG then paste always works, with no token and no limit. • Export / import your whole setup as one .json file to share it with a teammate. • Export a PNG of the page with the overlay on top. • Light and dark theme, custom accent colour. KEYBOARD Alt+P toggle the panel Alt+H show / hide the active layer Alt+C diff mode Alt+L loupe W wipe Esc exit the current tool ? all shortcuts (Change them at chrome://extensions/shortcuts. The analyzer can be bound there too, Alt+A recommended.) ━━━━━━━━━━━━━━━━━━━━ PRIVACY Mockpup collects nothing. No analytics, no ads, no remote code, no servers. Layers and images are stored locally in your browser. Analyzer captures are processed in memory and never saved or sent. If you connect Figma, your token stays in your browser and is only sent to Figma's API when you paste a frame. WHY MOCKPUP NEEDS ACCESS TO ALL SITES The overlay has to be drawn on whatever page you are building (localhost, staging or production), and your layers come back when you reload. The analyzer, the loupe and Export PNG capture the visible tab when you use them. Everything stays on your device. Tip: for local files (file://), turn on "Allow access to file URLs" on the extension's details page. Website and guides: https://mockpup.com Found a bug or missing a feature? hello@mockpup.com