Difframe by Kite

Difframe overlays a reference website or Figma prototype on top of the page you're building — as a live iframe, not a screenshot — for pixel-perfect comparison.

Because the overlay is a real page, it always reflects the latest version of your reference and scrolls like the real thing.

Features:

• Difference blend mode: matching areas turn black, so misalignments stand out instantly
• Scroll sync between your page and the overlay
• Explicit input-target switching: send clicks and scrolls to the page or the overlay
• Presets saved per page or per host: URL, opacity, scale, size, position, blend mode
• Tab scope: override the preset in a single tab, e.g. to compare desktop and mobile side by side
• Image mode as a fallback for sites that refuse to be embedded (paste or drop an image)
• Paste a Figma share link as is — it is converted to the embed URL automatically

Difframe collects no data. To display the reference page in an iframe, it removes frame-blocking headers (X-Frame-Options / CSP) only in tabs where the overlay is enabled, via per-tab session rules that are deleted when the tab closes. Other tabs and normal browsing are unaffected.