Mesurer

Inspect, annotate, and give feedback on any live interface.

Mesurer runs directly where you build. Share feedback with your agents and your team.

Mesurer is an open-source UI inspector and visual feedback tool for the browser. Use guides, rulers, measurements, arrows, freehand pen strokes, text annotations, color inspection, typography tools, X-ray mode, and screenshots to understand interfaces and communicate precise visual feedback to coding agents.

Full documentation

Install

npm install mesurer

Usage

import { Mesurer } from "mesurer";

function App() {
  return (
    <>
      <YourApp />
      <Mesurer />
    </>
  );
}

Props

Prop	Description
highlightColor	Base color for selection/hover overlays (defaults to oklch(0.62 0.18 255)).
guideColor	Base color for guides (defaults to oklch(0.63 0.26 29.23)).
arrowColor	Base color for arrows (defaults to oklch(0.63 0.26 29.23)).
guideHighlightEnabled	Highlights guides when they are hovered or selected. Default true.
hoverHighlightEnabled	Disables hover highlight and deselects on click when false.
layoutDetailsEnabled	Shows gap and padding under selected dimensions. Default true.
persistOnReload	Persists workspace state across reloads when true.
shortcutsEnabled	Enables global keyboard shortcuts when true. Default true.
persistKey	Optional workspace storage key; default workspaces are isolated per browser tab.
portalTarget	Optional element or shadow root used as the overlay portal mount target.
persistence	Optional storage adapter for custom or extension-backed persistence.
captureVisibleTab	Optional function supplying a PNG of the visible tab for Screenshot capture.
onPersistenceError	Called when persistence is unavailable or a storage write fails.
colorPickerFormats	Color formats displayed in the picker popover, in display order.
colorPickerClickFormat	Format copied to the clipboard when a color is picked.
snapEnabled	Snap selection to nearby elements. Default true.
snapGuidesEnabled	Snap guides to other guides. Default true.
snapArrowsEnabled	Snap arrow endpoints to nearby elements. Default true.
arrowClickToPlace	Place arrows with clicks instead of drag gestures. Default false.
selectNewGuideEnabled	Highlight a guide when it is placed. Default true.
multiMeasureEnabled	Keep previous measurements visible. Default false.
guideStyle	Guide opacity, width, pattern, dash length, and gap.
rulerSettings	Ruler opacity and edge reveal.
textStyle	Default text annotation font and color.

Props are the defaults. Saved settings override them; Use defaults restores the props.

Commands

Shortcut	Action
M	Toggle Mesurer on/off.
I	Toggle Inspect mode.
S	Toggle Select mode for annotations.
A	Toggle Typography mode.
D	Toggle Arrows mode.
N	Toggle Pen mode.
T	Toggle Text mode.
1	Switch to the Select & Inspect tools.
2	Switch to the Annotate tools.
P	Open the native color sampler.
C	Drag a region of the visible tab for a screenshot.
G	Toggle Guides mode.
X	Toggle X-ray mode.
R	Toggle pixel rulers along the top and left edges.
H	Set guide orientation to horizontal.
V	Set guide orientation to vertical.
Alt	Temporarily enable option/guide measurement overlays.
Alt + S	Pin the measurement currently shown under Alt so it stays on screen.
Esc	Close an open panel, cancel the current interaction, or deselect the tool. Press again to minimize Mesurer.
Backspace / Delete	Remove selected guides, arrows, pen strokes, or text.
Cmd/Ctrl + Z	Undo.
Cmd/Ctrl + Shift + Z	Redo.
Cmd/Ctrl + A	Select all annotations.
Cmd/Ctrl + ,	Open Settings.

Features

• Inspect mode - Click elements to measure their bounds
• Annotation tools - Draw arrows, freehand pen strokes, and text notes
• Annotation selection - Select, move, resize, rotate, delete, and multi-select annotations
• Guides mode - Add and drag vertical or horizontal guides
• Rulers - Drag guides from pixel rulers along the top and left edges
• Typography - Inspect typography styles and pin text details
• X-ray mode - Reveal element structure without changing the page
• Sample color - Sample rendered colors and copy values in your chosen format
• Screenshot - Drag a region of the visible tab and copy or download it. In a React integration without the extension, the browser may show a tab-sharing prompt.
• Distance overlays - Hold Alt for quick spacing checks
• Undo/redo - Command history for guides, measurements, arrows, pen strokes, and text annotations
• Settings - Configure selection, guide, ruler, arrow, text, color, format, and persistence behavior
• Workspace controls - Restore defaults or clear guides, measurements, and annotations; minimize Mesurer to a single toolbar button

Requirements

• React 18+
• Chromium-based browser. The native screen color picker requires Chromium on Windows or macOS; Linux Chromium builds may not expose the EyeDropper API.

Settings are stored separately from workspace state. The default adapter uses localStorage; integrations can provide a persistence adapter such as the browser extension's chrome.storage.local implementation.

License

Licensed under the MIT License.