Mesurer · Index

Mesurer

Pixel ruler and guide overlay for React apps and any live page

Tier A · StrongToolmesurer.dev

Mesurer is a measurement and alignment overlay by Julien Thibeaut (ibelick). It ships two ways: an MIT-licensed React component you drop into your own app (`<Measurer />`), and a free Chrome extension that works on any site. You get element bounds, draggable horizontal and vertical guides, pixel rulers, Alt-held distance overlays between elements, an x-ray structure mode, a typography inspector, and undo/redo with optional localStorage persistence.

Install

npm install mesurer

For an agent

Reach for the npm package when a human needs to eyeball spacing in a dev build — mount `<Measurer />` beside your app root and gate it behind NODE_ENV, because it renders a global overlay and binds single-letter hotkeys (M, S, G, X, R, H, V) that will collide with any app-level keyboard shortcuts. Prefer the Chrome extension when you are auditing a deployed site or a competitor's page, since it needs no code change and handles Shadow DOM. It measures rendered geometry only; it cannot read your design tokens, so pair it with the actual token source when you are checking a spec, not against it.

Why it is here. It closes the loop where a design engineer usually screenshots localhost and measures in Figma — the ruler lives in the running app instead. Two delivery modes (library plus extension) from one MIT codebase makes it usable in both dev and audit workflows.

Install command, framework, licence and component list.

Facts

License: MIT
Pricing: Free, Open source
Framework: React, Vanilla JS
Styling: Not applicable
Distribution: npm package, Browser extension, GitHub repository
Platform: Web
Content type: Code
Agent readiness: Readable open source, Client-rendered shell, Blocks bots
Accessibility: Not applicable
Maturity: Actively maintained
GitHub stars: 352
Package: mesurer

Notable for

React overlay plus Chrome extension from one repo
Alt-held distance overlays between elements
X-ray mode and typography inspector
Undo/redo history for guides
MIT, by ibelick (prompt-kit, motion-primitives)

Provenance

Verified 2026-08-15. HTTP 200. https://mesurer.dev/ (WebFetch returned 403; curl with a browser UA returned 200 but the body is a 1.8KB JS shell containing only the title — no readable content), https://github.com/ibelick/mesurer, https://raw.githubusercontent.com/ibelick/mesurer/main/packages/mesurer/README.md, https://api.github.com/repos/ibelick/mesurer, https://registry.npmjs.org/mesurer/latest, https://chromewebstore.google.com/detail/mesurer/icmjafcffhpcnadkmmklegommbcekcac (v0.0.9, 2000 users, 5.0/5 from 8 ratings, updated 2026-08-05, free)

Also in Utilities & Naming

mesurer.devTier A