Tracing Paper: Pixel Perfect Overlay

Overlay design mockups on any web page to check your build pixel by pixel, with unlimited layers, no ads and no account.

Tracing Paper lays your design mockups over the live page, like a sheet of tracing paper, so you can check an integration against the design, pixel by pixel. One toolbar, two places • A compact dark toolbar sits over the page: at the bottom in the middle, or as a rail in the middle of the right edge. One button switches between the two and the choice is kept for every site. • Each layer has its thumbnail in the toolbar; the selected one is outlined. The registration mark at the start of the toolbar folds it into a small round button and opens it again. • Click a layer on the page, or its thumbnail, to select it: a delete button appears at its top right corner, always inside the window. • Rare settings (free scale, layer order, exact position, delete) open in a panel next to the toolbar. Add your mockups • Click +, pick PNG, JPG or WebP files, drop them on the toolbar or paste an image from the clipboard. • Add as many layers as you need, on every site: the extension sets no limit on layers or sites. Adjust each layer • Show or hide it, set its opacity, change the order of the layers. • Move it with the mouse, with the arrow keys one pixel at a time, or ten pixels at a time with Shift. Type an exact position if you prefer. • Scale it: 100 %, 50 % for a mockup exported at @2x (a file named @2x starts at 50 %), or any value. • Difference mode: pixels that match the mockup turn black, so only the gaps stand out. • Lock a layer and keep using the page: clicks go through it to the links and buttons underneath. Align in two clicks • Press Align (or C), click a point on the mockup, then the same point on the page: the layer moves by the gap between them, and the toolbar tells you by how many pixels. Esc cancels at any time. Work quickly • A keyboard shortcut shows or hides all the layers at once. Chrome suggests Alt+Shift+H; you can change it at chrome://extensions/shortcuts. • While the toolbar is open, single keys do the rest: D difference, L lock, H hide all, C align, Delete or Backspace delete the selected layer (unless it is locked), arrows 1 px, Shift + arrows 10 px. They never fire while you type in a field of the page. • Your layers are remembered for each site. Click the toolbar icon and they come back. • Optional: tick "Restore layers automatically" in the popup and Chrome asks for access to that site only. From then on, your layers come back by themselves when that site reloads. Untick it to withdraw access. • English and French interface. Every button has a name and a tooltip with its shortcut, focus is always visible, and animations stop when your system asks for reduced motion. Private by design • Free, with no ads, no account and nothing to unlock. • The extension sends no network request: no analytics, no telemetry, no remote code. Its Content Security Policy blocks requests from its own pages. • Mockups and settings stay in your browser's local storage, on this device. • It runs on a page only when you click its icon or press its shortcut, or on the sites where you turned on automatic restoration. Permissions • Active tab and scripting: show the overlay on the current tab when you click the icon or press the shortcut. • Storage: remember your layers for each site, on this device. • Access to a site (optional, one site at a time): only if you turn on automatic restoration for that site. Contact: contact@antwork.fr Useful? A rating on the Chrome Web Store helps others find it. https://chromewebstore.google.com/detail/lpkdnchbgenihbnieoagldolkpnkeoon/reviews