ibelick/mesurer

What it solves

Mesurer provides a way to precisely measure, inspect, and capture visual elements in a browser. It is specifically designed to help developers communicate exact visual feedback and layout requirements to coding agents, reducing the ambiguity of "make it look like this" requests.

How it works

It is a React component that you drop into your application. Once active, it provides a set of interactive tools—such as rulers, guides, and a color picker—that overlay on top of your UI. Users can use keyboard shortcuts to toggle between different inspection modes (like X-ray or Text Inspector) to analyze the layout and styles of the rendered page.

Who it’s for

Frontend developers and designers who are working with AI coding agents and need a reliable way to capture and communicate precise pixel-perfect measurements and visual specifications.

Highlights

• Visual Inspection Tools: Includes a color picker, text inspector for typography, and an X-ray mode to see element structure.
• Coded Precision: Features pixel rulers and draggable guides for vertical and horizontal alignment checks.
• Capture Capabilities: Allows users to drag and capture specific regions of the visible tab as screenshots.
• Measurement Overlays: Provides quick spacing checks via distance overlays when holding the Alt key.
• State Persistence: Supports saving workspace states across page reloads using customizable storage adapters.