(Posts)

Pixel Mirror

Dec 28, 2024 Updated: Feb 4, 2026 [ Design , CSS , Svelte]

This project began as a personal tool I used to overlay design mockups directly on front-end development sites, helping me achieve pixel-perfect UI by visually aligning designs with live pages. V2 is a complete rewrite in Svelte 5 with the help of Claude Code — its runes system ($state, $derived, $effect) turned out to be a natural fit for the overlay’s 5-state machine and reactive store pattern. V2 also brings full mobile and touch device support alongside a refined desktop experience. The code is available on GitHub, and this page serves as an interactive walkthrough of the project.

At the bottom of the viewport, there’s a dock featuring a group of icons — this is the core interface of Pixel Mirror. Initially, you haven’t uploaded any mockups (stored in IndexedDB) yet. To get started, click to open the Mockup Manager and upload images. Once uploaded, select one mockup to use as the overlay.

Before using this tool, please note that it sets the position of the :root element to relative. This ensures overlays work correctly with minimal impact on the host project. Be sure to verify compatibility with your project before proceeding.

Features

Toggle Overlay Visibility

The button toggles the mockup overlay’s visibility. You can drag the overlay to reposition it while monitoring its position in real time — displayed as alignment (e.g., top center) when aligned, or pixel coordinates (e.g., x:123, y:456) when manually positioned.

Lock Mode

The button toggles Lock Mode. When locked, the overlay is completely frozen — no dragging, no keyboard nudging — allowing you to freely select and inspect elements beneath it. While unlocked, use arrow keys for 1px nudge adjustments, or hold Shift for 10px steps. Toggle Lock Mode with Esc or the toolbar button.

Adjust Overlay Opacity

The button displays the current overlay opacity (range: 10% to 90%). On desktop, hold Ctrl and scroll to adjust. On mobile, touch and slide horizontally on the button. Click the button to reset opacity to 50%.

Alignment Options

The button follows a three-stage click cycle: first click opens the alignment popover, second click resets to the default top center position, and third click closes the popover. On desktop, you can also hover to open the popover.

The popover provides alignment controls:

  • Align overlay to page left
  • Align overlay to page top
  • Center overlay horizontally
  • Align overlay to page bottom
  • Align overlay to page right

Alignment is automatically cleared when you drag the overlay and recalculates on window resize.

Adjust Scale Ratio

The button cycles the overlay scale between 1x and .5x. For 2x exported designs, use .5x to match the intended size.

Solid Mode & Zoom

Press and hold Space while the overlay is visible to enter Solid Mode, setting opacity to 100%. On desktop, click the overlay to enable 2x zoom for detailed inspection, then move your mouse to pan around. On mobile, double-tap anywhere on the page to toggle Solid Mode, and use pinch gestures to zoom (range: 0.25x to 4x).

Grid Overlay

The button opens the Grid Manager, supporting both layout grids (columns, gutters, max-width) and spacing grids (horizontal lines at a specified height). Define multiple grid configurations with custom colors and switch between them as needed.

This page itself uses an 8px spacing grid and a 1080px container width with 12 columns and 24px gutter width. Try entering these settings to see how the layout matches the grid guide.

Manage Mockups

The button opens the Mockup Manager. Upload images by clicking the upload button or dragging and dropping files.

Theme & Position

Pixel Mirror includes a theme toggle for switching between light and dark modes, and a button to move the dock between the bottom and top of the viewport.

Mobile & Touch Support

V1 was desktop-only. V2 introduces full support for touch devices — phones, tablets, and hybrid devices like touch-enabled laptops:

  • Drag: Touch and drag to reposition the overlay
  • Double-tap: Tap twice anywhere on the page to toggle Solid Mode
  • Pinch zoom: In Solid Mode, use a two-finger pinch gesture to zoom in and out
  • Pan: In Solid Mode, drag with one finger to pan around
  • Opacity slide: Touch and slide horizontally on the opacity button to adjust
  • Keyboard shortcuts: All shortcuts remain available when an external keyboard is connected

Get Started!

Try it out and see how it fits into your workflow. If you encounter any issues or have ideas for improvement, don’t hesitate to open an issue on GitHub.