Measuremate — Pixel Ruler for Web Design

Measure distances between any elements on any website. Pixel ruler, CSS inspector, and alignment guides — everything you need for pixel-perfect design handoff, right in your browser.

Measuremate is a measuring tool built for frontend developers, web designers, and QA engineers who need precise pixel measurements without leaving the browser. Lightweight, private, and fast.

━━━━━━━━━━━━━━━━━━━━━━━━
TWO POWERFUL MODES
━━━━━━━━━━━━━━━━━━━━━━━━

🔍 INSPECTOR MODE — Click any element to inspect it. See dimensions, distances to neighboring elements, and full CSS details. Hover to preview before selecting.

📐 GUIDES MODE — Place vertical and horizontal ruler guides anywhere on the page. Snap to element edges, measure between guides, and verify alignment like in Figma.

Switch between modes with a single keystroke.

━━━━━━━━━━━━━━━━━━━━━━━━
WHAT YOU CAN DO
━━━━━━━━━━━━━━━━━━━━━━━━

📏 MEASURE DISTANCES between any two elements — spacing, gaps, padding, margins. On-page dimension lines show exact pixel values.

🎯 INSPECT THE CSS BOX MODEL with visual breakdown of content, padding, border, and margin (including negative margins).

🔬 VIEW DETAILED CSS by category — Layout (display, position, flex, grid, z-index), Text (font, color, line-height, letter-spacing), and Attributes.

🌳 NAVIGATE THE DOM TREE — browse from root to any element, hover to preview, click to inspect.

🖼️ MARQUEE SELECT multiple elements at once by dragging a selection box.

📐 DROP VERTICAL OR HORIZONTAL GUIDES on any page with a single keystroke. Use arrow keys for 1px precision, Shift+arrows for 10px jumps.

🧲 SNAP TO ELEMENTS — guides and cursor automatically snap to element edges and centers.

━━━━━━━━━━━━━━━━━━━━━━━━
KEYBOARD SHORTCUTS
━━━━━━━━━━━━━━━━━━━━━━━━

Cmd+Shift+M (Mac) / Ctrl+Shift+M (Win) — Toggle Measuremate on/off
1 — Switch to Inspector mode
2 — Switch to Guides mode
M — Show/hide the control panel
V — Drop a vertical guide at cursor
H — Drop a horizontal guide at cursor
S — Toggle snap-to-alignment
Q — Clear all guides
Arrow keys — Move cursor/guides 1px (Shift for 10px)
Esc — Clear selection

━━━━━━━━━━━━━━━━━━━━━━━━
WHO IT'S FOR
━━━━━━━━━━━━━━━━━━━━━━━━

• Frontend developers verifying pixel-perfect implementation against designs
• Web designers checking spacing, alignment, and typography on live sites
• QA engineers validating responsive layouts across breakpoints
• Teams doing design handoff from Figma, Sketch, or other design tools
• Anyone who needs a fast, clean ruler for the web

━━━━━━━━━━━━━━━━━━━━━━━━
WHY MEASUREMATE
━━━━━━━━━━━━━━━━━━━━━━━━

✓ Clean UI — does nothing until you activate it. No interference with the pages you browse.
✓ Lightweight — under 500 KiB, no bloat, no telemetry.
✓ Privacy-first — zero tracking, zero data collection.
✓ Works on any website, including SPAs and iframes.
✓ Figma-like distance measurements you already know how to read.
✓ Keyboard-first workflow for power users.

━━━━━━━━━━━━━━━━━━━━━━━━
HOW TO USE
━━━━━━━━━━━━━━━━━━━━━━━━

1. Click the Measuremate icon in your toolbar (or press Cmd/Ctrl+Shift+M) to activate
2. Hover over any element to preview its dimensions
3. Click to select — see distances to nearby elements appear on the page
4. Open the Main Panel with M to see full CSS, box model, and DOM tree
5. Press 2 to switch to Guides mode and drop alignment rulers

━━━━━━━━━━━━━━━━━━━━━━━━
FREE AND PRO
━━━━━━━━━━━━━━━━━━━━━━━━

All core measuring features are free forever.

Pro is a one-time purchase. Buy once, use forever, on any number of computers.

━━━━━━━━━━━━━━━━━━━━━━━━
SUPPORT & FEEDBACK
━━━━━━━━━━━━━━━━━━━━━━━━

Website: https://measuremate.xyz
Email: [email protected]

We ship updates regularly. Feature requests and bug reports are always welcome.