Pixel Mirror

This project began as a personal tool for comparing the sites I was building with their design mockups, pixel by pixel. The source is on GitHub, and the dock at the bottom of this page is a live instance of Pixel Mirror. To try it, open Mockup Studio, upload an image and select it as the overlay. Images are stored in IndexedDB. On your first visit, the mockup library is empty.

Starting with 2.1, Pixel Mirror no longer requires position: relative on the host <html> element. The mockup is clipped to the viewport and follows the document as you scroll. Avoid transform or contain: layout on <html>, which can affect the positioning of the mockup, dock and grids.

Features

Toggle overlay visibility

The button shows or hides the overlay. Drag the overlay to move it. The dock reports its position, using an alignment such as top·center or pixel coordinates such as x:123, y:456.

Lock Mode

The button toggles Lock Mode. A locked overlay cannot be dragged or nudged, leaving you free to select and inspect the page beneath it.  Esc  also toggles Lock Mode.

When the overlay is unlocked, the arrow keys nudge it by 1px, or by 10px with  Shift  held.

Adjust overlay opacity

The button shows the overlay’s opacity, from 10% to 90%. With a mouse, hover over it to open the controls, or hold  Ctrl  and scroll anywhere on the page to adjust opacity. Clicking the button resets it to 50%.

On touch devices, slide horizontally on the button. With a keyboard, focus the button and press  Enter  to open the controls.

Alignment options

Hover over the button to open a 2×3 matrix with six positions: top left, top center, top right, bottom left, bottom center and bottom right. Clicking the button resets the overlay to its default top center position.

On touch devices, tap the button once to open the matrix and again to reset alignment. With a keyboard, focus the button and press  Enter  to open the matrix and move focus to its controls.

Moving the overlay clears alignment only on the axis that moves. Resizing the window recalculates the aligned position.

Adjust scale ratio

The 1× / ½× button switches between full and half scale. Use ½× for designs exported at 2×.

Solid Mode and zoom

Hold  Space  while the overlay is visible to enter Solid Mode, which shows the overlay at 100% opacity. With a mouse, click the overlay in Solid Mode to zoom to 2×, then move the mouse to pan.

On touch devices, double-tap anywhere on the page to toggle Solid Mode. In this mode, pinch to zoom between 0.25× and 4×, or drag with one finger to pan.

Grid overlay

Open Grid Studio to configure layout grids (width, columns and gutters) and spacing grids (alternating horizontal stripes). You can save several layout grids, switch between them and set the grid colors.

A new grid library starts with a centered 1044px layout, 12 columns and 24px gutters. The spacing grid defaults to 8px on all screen sizes. Height accepts px and rem, with 4px, 8px and 16px presets. Saved grids and height settings are kept; resizing the window does not change them.

Manage mockups

Open Mockup Studio to manage your images. Add images with the upload button, or drop them anywhere on the page, which also selects the dropped image as the overlay.

Theme and position

Use the theme toggle to switch the dock between light and dark. The button moves the dock between the bottom and top of the viewport.

Mobile and touch support

V1 was desktop-only. V2 supports phones, tablets and touch-screen laptops, with touch controls for dragging, opacity, Solid Mode and zoom. Keyboard shortcuts remain available when an external keyboard is connected.

Get started

Install it as a development dependency:

npm install pixel-mirror --save-dev

The README covers loading it with Vite, Astro, Next.js or a CDN script. Keep it out of production builds. If you run into a problem or have an idea, open an issue on GitHub.