Page Measurement & Layout

Pixel rulers, design-grid overlays, breakpoint guides, an X-Ray view of every element on the page, and a multi-viewport canvas for testing every device size at once.

Page Rulers

Page rulers are persistent guide lines that span the top and left edges of the viewport, marked off in pixels. A live crosshair tracks your cursor and shows its exact X and Y coordinates against the rulers in real time.

Rulers use a three-tier tick scheme: minor ticks every 10 pixels, medium ticks every 50, and major ticks every 100 with numbered labels. Fine enough to spot single-pixel misalignments, coarse enough to navigate large layouts.

Top and left page rulers with a crosshair tracking the cursor over a webpage — Page rulers along the top and left edges with a crosshair following the cursor and reading its coordinates.

Especially useful for checking alignment between elements that aren’t adjacent in the DOM. Drop the crosshair on the left edge of one element, read its X coordinate, then move to another element on the same column to confirm they line up.

Layout Grid Overlay

Drop a fully configurable column grid on top of any webpage to verify alignment with a design system’s grid. It uses real CSS Grid (grid-template-columns: repeat(N, 1fr)) under the hood, so the columns track the viewport perfectly and respect everything you’d expect: max-width constraints, gutters, page margins.

Customisable column grid overlay on a webpage with the settings popover — Configurable column grid with column count, gutter, margin, max-width, colour, and opacity controls.

Column count options are 2, 3, 4, 6, 8, 12, or 16. Defaults: 8 columns, 20 px gutter, 40 px margin, magenta (#FC48FF) at 30% opacity. Settings persist across page reloads.

Breakpoints

The breakpoints tool scans every accessible stylesheet on a page, extracts min-width and max-width values from @media rules, and draws cyan vertical guide lines at each breakpoint. Stop guessing where responsive layouts snap and see them.

Cyan vertical breakpoint lines drawn at CSS media-query values across a webpage — Breakpoint lines drawn at the page’s actual `@media` values. `em` and `rem` values are normalised to pixels using the page’s root font size.

Active media queries are evaluated against the current viewport via window.matchMedia(), so you only see breakpoints the page actually treats as live. Cross-origin stylesheets the browser blocks are skipped silently.

X-Ray Mode

X-Ray Mode draws an outline around every element on the page simultaneously, with colours that cycle by nesting depth. Top-level elements get one colour, their children get another, grandchildren a third, and so on, eleven levels deep. The result is a wireframe view of the page’s structure overlaid on its visual design.

It’s a debugging tool you reach for the moment something feels off and you can’t see why. Stretched layout? Mystery margin? Phantom click target? Toggle X-Ray and the answer is usually obvious in two seconds.

Responsive Mode

Preview a page at several viewport sizes at once, side by side on one canvas. Every frame is the real page in a sandboxed iframe, so real CSS @media rules fire and window.matchMedia() evaluates against each frame's own width. Add as many viewports as you need, from a device preset or your own dimensions.

Each frame carries its own header. From there you can reorder it, rotate it to swap width and height, force it into light or dark prefers-color-scheme independently of the others, or remove it. Drag a frame's edge to resize it. Dimensions run from 200 px wide and 300 px tall up to 3840 px.

Presets cover modern phones (iPhone SE through iPhone 17 Pro Max, common Android sizes) and tablets (iPad Mini, Air, Pro 11″, Pro 12.9″, Galaxy Tab).

The Canvas

The toolbar above the canvas controls the whole set rather than one frame:

Zoom scales the canvas so more viewports fit on screen. It is a visual scale only: every frame still reports its declared size to the page, so media queries are unaffected. Presets run from 25% to 200%, and the default is 65%.
Sync Scrolling keeps every frame at the same position as you scroll, so the same section stays in view across all widths.
Frame Layout wraps the frames onto multiple rows instead of one long horizontal strip.
Add Viewport adds a frame. It inherits the edits the existing frames are showing, so it stays directly comparable.
Refresh reloads the frames, and Reset Viewports returns the canvas to its default set.

Breakpoints Mode

Instead of choosing sizes yourself, breakpoints mode builds one viewport per breakpoint the page actually declares, so every layout its CSS defines is on screen at once. The set comes from the page, so it cannot be edited while the mode is on. Turn it off and your own viewports come back untouched.

Every other Screen Ruler tool keeps working inside the frames: hover to inspect, measure distances, sample colours, and in Studio, edit CSS live and watch the change land at every width simultaneously.