Difframe overlays a reference site or Figma prototype on the page you're building — as a live iframe, not a screenshot. Because the reference is a real page, it never goes stale and scrolls like the real thing. Switch on Difference blend mode and every matching area turns black, leaving only the misalignment on screen. Presets store the URL, opacity, scale, size, position and blend mode, scoped per tab, page or host — so two tabs can compare desktop and mobile at once. Free, MIT, no tracking.

Hi Product Hunt 👋 I build websites, and checking my work against the design always came down to the same loop: screenshot the reference, load it into an overlay tool, notice the screenshot is already out of date, repeat. So Difframe overlays the actual page instead of a picture of it. The reference is a real iframe, so it's never stale, you can scroll both together, and you can click through the reference itself. The part I reach for most is Difference blend mode — at opacity 1.0 everything that matches turns black, so a 1px gap is impossible to miss. It has also turned out to be handy for checking AI-generated implementations and catching typos against the original copy. It's free, MIT-licensed, and collects no data. Chrome and Firefox. Happy to answer any questions!

Difframe

Overlay a live site or Figma prototype on the page you build

Overlay a live site or Figma prototype on the page you build