Mesurer is a lightweight measurement and alignment overlay for React apps. Toggle it on, select elements, and measure distances directly in the browser.

Full documentation

Install

npm install mesurer

Usage

import { Measurer } from "mesurer";

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

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)). | | hoverHighlightEnabled | Disables hover highlight and deselects on click when false. | | persistOnReload | Persists state in localStorage as mesurer-state when true. | | portalTarget | Optional element or shadow root used as the overlay portal mount target. |

Commands

| Shortcut | Action | | ---------------------- | ----------------------------------------------------- | | M | Toggle measurer on/off. | | S | Toggle Select mode. | | G | Toggle Guides mode. | | H | Set guide orientation to horizontal. | | V | Set guide orientation to vertical. | | Alt | Temporarily enable option/guide measurement overlays. | | Esc | Clear all measurements and guides. | | Backspace / Delete | Remove selected guides. | | Cmd/Ctrl + Z | Undo. | | Cmd/Ctrl + Shift + Z | Redo. |

Features

• Toggle on/off – Enable the overlay with a single shortcut
• Select mode – Click elements to measure their bounds
• Guides mode – Add vertical or horizontal guides
• Distance overlays – Hold Alt for quick spacing checks
• Undo/redo – Command history for guide and measurement changes
• Persist state – Keep guides and measurements on reload

Requirements

• React 18+

License

Licensed under the MIT License.