🎞️ A Chrome extension that lets you overlay JPEG/PNG/SVG images and HTML mockups on any webpage. Perfect for designers comparing mockups, developers checking pixel-perfect implementations, or anyone who needs to visually compare images against web content. No more switching tabs — compare side by side in real time.
- Drag & Drop Positioning - Move the overlay anywhere on the page
- 8-Direction Resizing - Resize from any corner or edge
- Aspect Ratio Lock - Maintain proportions while resizing (toggleable)
- Opacity Control - Adjust transparency for easy comparison
- Visibility Toggle - Quickly show/hide the overlay
- JPEG/PNG & SVG Support - Works with common image formats
- HTML Mockups - Load a single HTML file with CSS, images and rendering scripts; change its viewport dimensions and scroll within the overlay
- Style Isolation - Shadow DOM ensures no conflicts with host page styles
- Keyboard Shortcuts - Move with arrow keys; Shift+arrow for 10 px jumps; Backspace or Delete to delete
- Clipboard Paste - Paste images with Cmd/Ctrl+V, including SVG as plain text
- Fit to Viewport - Expand image to fill the viewport width and toggle back to original size
- Manual Size Input - Type exact pixel dimensions directly in the toolbar
- Clone or download this repository
- Build the extension:
npm install npm run build
- Open Chrome and navigate to
chrome://extensions/ - Enable Developer mode (toggle in top-right corner)
- Click Load unpacked and select the
dist/folder
- Click the SnapLayer extension icon in Chrome toolbar
- Select a JPEG, PNG, SVG or HTML file from your computer
- The file appears as an overlay on the current page
- Move: Drag any outer edge or the toolbar background to reposition any layer; images can also be dragged directly
- Resize: Drag the corner or edge handles
- Adjust: Use the toolbar to change opacity, toggle visibility, or delete
Select an .html or .htm file to preview HTML. Relative companion files are not imported; clipboard paste supports images and SVG only.
Resizing HTML changes its viewport dimensions so responsive layouts reflow instead of scaling. Scroll over the HTML to scroll the mockup.
| Control | Description |
|---|---|
| Width / Height | Enter exact pixel dimensions |
| Expand Icon | Fit to viewport width (click again to restore) |
| Opacity Slider | Adjust image transparency (0-100%) |
| Lock Icon | Toggle aspect ratio lock |
| Eye Icon | Toggle image visibility |
| Trash Icon | Remove the overlay |
Drag any of the four outer edges to move an image, SVG or HTML layer. The square handles resize it. The toolbar stays within the viewport and its background remains draggable when the edges are offscreen. Buttons and inputs keep their normal actions.
Click an edge, the toolbar background or a resize handle to focus the layer. Shortcuts apply while the layer or its controls are focused; editing a toolbar input keeps its native key behavior. Keys pressed inside an HTML mockup are handled by that HTML.
| Key | Action |
|---|---|
| Arrow keys | Move overlay 1 px |
| Shift + Arrow keys | Move overlay 10 px |
| Backspace / Delete | Remove overlay |
| Cmd/Ctrl + V | Paste image from clipboard |
See the Privacy Policy.