Layout inspector
Measure anything.
On any site.
Hover any element to instantly see its dimensions, spacing, and alignment. Measure distances between elements with a single keystroke. Runs entirely in your browser — no account, no backend.
Chrome & Firefox: drag LayoutPeek to your bookmarks bar. Safari: use Copy code, then paste the snippet as the URL for a new bookmark.
Try it here
With the full bookmarklet you also get selection, ruler lines, and spacing overlays. This preview uses the same hover ring as the shipped tool.
What it does
Click any element to select it. Width, height, and position shown instantly as you hover.
Hold ⌥ Option / Alt to measure the gap between any two elements.
Place horizontal or vertical lines to check alignment. Drag to reposition, ⌫ to delete.
See margin, border, and padding as colored layers — like DevTools box model, inline.
How to use
Drag LayoutPeek above to your bookmarks bar. On Safari, use Copy code, then paste the snippet as the URL for a new bookmark.
Visit any webpage and click the LayoutPeek bookmark. A small toolbar appears in the top-left corner.
In select mode (S), hover elements to see their size. Click to select — then hold ⌥ Option / Alt and hover another element to measure the gap.
Switch to ruler mode (G), choose H or V, and click to place a horizontal or vertical line. Hold ⌥ Option / Alt to measure distance from any line. Press ⌘Z / ⌘⇧Z to undo or redo (Ctrl+Z / Ctrl+Shift+Z on Windows).
Press Esc to exit and remove all LayoutPeek overlays from the page.
Also in
LayoutPeek is part of toolbox98.com — a curated set of design tools. Available there as a bookmarklet at layoutpeek.xyz.