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. Hold ⌥ Option / Alt to measure between lines. 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. Add ⇧ Shift to pin measurements for screenshots.
Switch to ruler mode (G), choose H or V, and click to place lines. Hold ⌥ Option / Alt to measure the distance between placed lines of the same direction. Add ⇧ Shift to pin measurements for screenshots (⌘⇧3 / ⌘⇧4). 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.
Privacy
No tracking cookies, no analytics, and no third-party scripts are used on this site. Just strictly necessary functionality is used to make the site work.