Skip to content We're live on Product Hunt today Upvote
install

TWO BUILDS 9 browsers

Chrome from the Chrome Web Store Firefox from addons.mozilla.org Edge from Microsoft Edge Add-ons Brave takes the Chrome build Opera takes the Chrome build 4 more Chromium browsers: Arc, Vivaldi, Chromium, Opera GX the Chrome build

tool · one of 34 free, no counter

Mockup

How far off the design is this build?

Holding a screenshot up next to a build finds nothing smaller than about eight pixels. Putting the comp over the page finds everything, provided the difference is computed rather than approximated: this draws the comp inverted at exactly fifty per cent and computes the difference, because mix-blend-mode gives a picture that looks like a diff and is not one.

Reach it Press ⌘ + K on any tab and type mockup. Ctrl + K on Windows and Linux

Lays the mockup over the build and fades between the two
reads a file you choose, in this browser
writes one overlay layer, removed when off
sends nothing
difference computed, never mix-blend-mode
file a data URL, never stored, never uploaded
ceiling 4 MB, because it crosses as a data URL
plan free
Add   LoupeKit - opens the list of browsers it can be installed in

TWO BUILDS 9 browsers

Chrome from the Chrome Web Store Firefox from addons.mozilla.org Edge from Microsoft Edge Add-ons Brave takes the Chrome build Opera takes the Chrome build 4 more Chromium browsers: Arc, Vivaldi, Chromium, Opera GX the Chrome build

in the panel · free, no counter

section#about

What this actually is

At handover, and any time a designer and a developer disagree about whether something shipped as drawn. Position the comp once against a known corner and the rest of the page lines up with it.

section#asked

Asked about this tool

Why not use mix-blend-mode: difference?

Because it blends against whatever is behind the layer, including our own chrome, and the result changes with the page’s own stacking. Drawing inverted at exactly 50% and computing the difference gives a picture that means one thing.

Does my comp get uploaded anywhere?

No. It is read in your browser into a data URL and handed to the page in a message. It is never stored and never sent, which is also why there is a size ceiling.

The comp drifts as I scroll. Why?

It is positioned against the document rather than the viewport, which is what you want for a full-page mockup. If it drifts relative to the content, the page’s own scroll container is not the document - the Scrolling diagnostic will name it.

Can I overlay a second comp?

One at a time. Two comps and a page is three layers with no honest way to say which difference belongs to which, and the answer people actually want is a diff against one reference.

how to use mockup

  1. Open Mockup and choose the comp from this machine. It becomes a data URL and is never uploaded.
  2. Position it once against a corner you can identify on both.
  3. Read the computed difference rather than a blend: at fifty per cent inverted, anything visible has moved.
  4. Turn it off and the overlay layer is removed.
Add   LoupeKit - opens the list of browsers it can be installed in

TWO BUILDS 9 browsers

Chrome from the Chrome Web Store Firefox from addons.mozilla.org Edge from Microsoft Edge Add-ons Brave takes the Chrome build Opera takes the Chrome build 4 more Chromium browsers: Arc, Vivaldi, Chromium, Opera GX the Chrome build

70 of these · no host permissions · three free audits