Mesurer - Inspect, annotate, and give feedback on any live interface

# Build precise software with your coding agent Inspect, measure, annotate, record, and give feedback on any live interface. Mesurer runs directly where you build. Share precise visual feedback with your agents and team. ## Measure - Measure element dimensions, spacing, padding, and margins - Add configurable column, row, and pixel layout guides - Customize guide colors, opacity, size, gutters, offsets, and alignment - Show pixel rulers and create guides from rulers - Hold Option / Alt to inspect distances between elements and guides - Press Option + S / Alt + S to pin the current distance - Guides, measurements, and workspace state persist across reloads and navigation by default ## Inspect - Pick and copy rendered colors - Inspect typography and text styles - Inspect CSS and JavaScript motion with playback, scrubbing, and previews - Reveal page structure with X-ray mode - Preview the page at several screen sizes side by side, from named devices or its own breakpoints - Inspect, comment, and add guides inside each preview - Inspect elements inside iframes and Shadow DOM - Inspect transparent and nested interface elements - Copy selectors, dimensions, and layout details - Preserve inspection context while switching tools and pages ## Annotate - Add comments pinned to live elements - Reply to, edit, move, resolve, reopen, and search comments - Resolve all comments at once - Copy structured feedback for agents, grouped by page and screen size - Draw snapping arrows and freehand pen strokes - Add, edit, resize, rotate, and style text annotations - Select and transform multiple annotations together - Undo and redo annotation changes - Keep annotations attached to the page where they were created ## Capture - Capture any part of the visible interface - Include Mesurer overlays in screenshots - Copy or download screenshots instantly - Process screenshots locally in the browser - Share precise visual context with your agents and team ## Record - Record any selected region of the active browser tab - Capture interaction details that screenshots cannot show - Record clips up to 60 seconds - Preview, play, and trim recordings - Choose export scale and download WebM, GIF or MP4 when supported - Recordings are processed locally in the browser - Chrome tab capture keeps the recording focused on the selected interface region ## Toolbar that fits your screen - Snap the toolbar to any edge or corner, or keep it floating with Free in Settings - Drop zones show where the toolbar will land while you drag - Vertical layout on the left and right edges - Auto-hide in Settings: the toolbar tucks to a thin tab and returns on hover or as the pointer nears its edge - Drag and reposition the toolbar from tools, tabs, Settings, and menus - Minimize and restore Mesurer without losing your workspace ## Designed for the browser - Switch between light and dark themes - Keep controls isolated from host-page styles - Preserve host-page focus, keyboard shortcuts, and interactions - Restore Mesurer across reloads, SPA navigation, and full-page navigation ## Built for visual feedback Mesurer adds a precise visual layer directly to the browser, making it easier to inspect interfaces, communicate changes, and explain exactly what you see. Useful for design engineering, frontend development, UI inspection, visual QA, interaction recording, and agent-assisted development. ## Open source and private by default - Free and open source - No account required - Your page content stays in your browser - Workspace data is stored locally - Screenshots and recordings are processed locally - No remote code - No personal data collection