User guide
Everything PixelPont does. New here? Start with the tour inside the panel.
On this page
Getting started#
Add it from the Chrome Web Store
Open the Chrome Web Store and click “Add to Chrome”. It’s free. Pin PixelPont from the puzzle icon in the toolbar so it’s always in reach.Open the page you want to compare
Open the page you’re building in Chrome — localhost or a live site.Click the PixelPont toolbar icon
A panel opens, pinned to that tab.Drop a comp image
PNG / JPG / WebP. Drop several at once.Line it up, then lock
New comps start movable. Once it’s in place, lock it with the lock button to the right of the comp name at the top of the panel, so clicks reach the page.
Position and scale#
The four numbers at the top (X, Y, scale, opacity) are inputs.
- Type a value or press ↑ ↓ to step by 1 (Shift for 10; scale steps by 0.01, Shift for 0.1)
- With the panel focused, arrow keys move the comp by 1px
- Drag the comp on the page for rough alignment
- Turn on “Center” to lock X to center
- “Scroll sync” moves the comp with the page
1.0 / 0.5 / Fit width. Use 0.5 for 2× retina exports.
Overlay#
Opacity and blend mode change how differences show up.
| Blend | Looks like | Good for |
|---|---|---|
| Normal | Plain overlay | Overall feel |
| Difference (“Diff” in the panel) | Matching areas go black; only mismatches remain | Pixel-level hunting |
| Invert | Inverted overlay (default) | Aligning text |
| Multiply | Dark areas add up | Comparing spacing |
Opacity is remembered per blend mode. On first use, Invert and Normal start at 50%; Difference, Multiply and Overlay at 100% (turn this off under “All comps” in the Adjust tab).
Multiple comps#
Register dozens — mobile and desktop, page by page.
- Step through with ‹ › at the top
- Click the comp name for a searchable list
- Reorder, lock and delete in the Comps tab
- Comps and settings are saved per domain
Measure#
The Measure tab compares the comp and the build element by element. When AI measures, the same results show here. To let an AI measure and fix, see AI integration.
| Result | Meaning |
|---|---|
| Position | Position or size differs. Shown as ↓3px, w+4 |
| Color | Colors differ. Both swatches and codes |
| Common offset | Most elements are off by the same amount. Fix the comp position first |
| Low confidence | Shown faded with ?. Edges are unclear; may be a false positive |
Text rendering differences and moving parts (sliders, video) may be picked up as mismatches. Always check the results with your own eyes.
Panel#
- Width: normal 400px ⇄ wide 720px. Drag the edge for anything from 300 to 720px
- Keep on top: the panel always stays in front (supported browsers only)
- Theme: light / dark
- Language: Auto / 日本語 / English
Keyboard#
| Key | Action |
|---|---|
| ← ↑ ↓ → | Move comp 1px |
| Shift + arrows | Move comp 10px |
| H | Show / hide comp |
| L | Lock / unlock |
| O | Step opacity by 25% |
[ ] | Change scale by 1% |
| ↑ ↓ (in a field) | Change value by 1 (scale by 0.01) |
| Esc | Leave the field and return to the comp |
Troubleshooting#
The comp doesn’t show
The tab where you clicked the icon is the target. Check that the site row says “Active”. If you’re on another tab, press “Target this tab”.
Measuring fails
Follow the error card in the Measure tab. Full-page measuring needs Scroll sync turned on.
Using local HTML files
In chrome://extensions, open PixelPont “Details” and turn on “Allow access to file URLs”. Dev servers (localhost) work as is.
The comp hides behind a dialog
In the Adjust tab, set Layering to “Top layer”.
Something else
Tell us via Contact. For a bug report, the debug info helps us find the cause.