Pixel Mirror
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. After a complete refactor with Solid.js, it’s now ready to be shared with others. 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 menu bar featuring a group of icons - this is the core interface of Pixel Mirror. Initially, you haven’t uploaded any designs (to IndexedDB) yet. To get started, click to upload designs or any images as examples. Once uploaded, select one design 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 design overlay’s visibility. You can drag the overlay while monitoring its coordinates in real time. The coordinates show the position between the top-left corner of the body element and the overlay. This helps ensure precise alignment to the edge and detect any unintended shifts.
Lock Mode
The button toggles Lock Mode. When locked, all pointer events of the overlay are disabled, allowing you to select and inspect elements beneath the overlay. While locked, you cannot drag the overlay but can use arrow keys for 1px adjustments. Use the keyboard shortcut Esc to toggle Lock Mode.
Adjust Overlay Opacity
The button displays the current overlay opacity. With the overlay visible, hold Control and scroll to adjust opacity (10% to 90%). Click the button to reset opacity to 50%.
Alignment Options
The button shows alignment options in a popover:
- Align overlay to page left
- Align overlay to page top
- Center overlay horizontally
- Align overlay to page bottom
- Align overlay to page right
Clicking resets the overlay to top-center position, typically the most useful default.
Adjust Scale Ratio
The button controls overlay scale ratio, offering 1x and .5x options. For 2x exported designs, use .5x to match the intended size.
Grid Settings
The button opens grid settings, supporting vertical rhythm and grid systems. Define multiple grid configurations and activate them as needed.
This page itself uses an 8px vertical rhythm grid and 1080px container width with 12 columns and 24px gutter width, no gutters on container edges. Try entering these same settings to see how the layout matches the grid guide.
Manage Designs
The button opens design management. Click to upload or drag-and-drop images (.jpg and .png only).
Adjust Menu Bar Position
The button toggles the menu bar between bottom and top positions, helping avoid workflow interference.
Solid Mode
Press Spacebar while the overlay is visible to enter Solid Mode, setting opacity to 100%. Click the design to enable 2x zoom for detailed inspection.
Limitations
This tool doesn’t support touch devices or browser device emulators. For responsive design work, use DevTools docked to either side and adjust the viewport width by dragging the DevTools edge.
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.