Mesurer

Mesurer is an open source interface inspector that you add to a React app. It lets you inspect elements, measure spacing, and mark up a live page with guides, arrows, notes, and freehand annotations. The measurements and visual feedback can help you communicate specific changes to a coding agent or your team. It also includes typography inspection, color sampling, an X-ray view of page structure, and screenshot capture. Video recording can show interactions that are hard to explain with a still image. Mesurer can keep workspace annotations across reloads, using browser storage by default. Install the package in a React 18 or newer project and render the Mesurer component alongside your app. The core tools work in Chromium-based browsers. Screenshot and video capture depend on browser permissions and available recording support; the Chrome extension provides the smoothest capture flow. Mesurer is released under the MIT license. It runs as part of your web app and does not require a Mesurer account.