Get the weekly radar
One short email with the freshest products, every week.
Zero-invasive UI-to-Code inspector. Hover, press Alt+C, and paste metadata to your AI agent.
Grounded in available product and source data
HoverSource is a UI inspector aimed at developers who work with AI coding agents. Instead of describing a UI element in plain language and waiting for the agent to figure out what you mean, you hover over the element and press Alt+C to copy structured metadata about it, which you then paste directly to your agent.
It offers two interaction modes. Inspector Mode lets you hover over components to see layout boundaries, selector paths, and file deep-links, then copy that as HoverSource Component Metadata with Alt+C. Design Mode, toggled with Alt+X, lets you drag a targeting crosshair that snaps to horizontal and vertical edges to measure pixel-perfect offsets, copying HoverSource Design Placement Metadata with Alt+C.
Either mode copies a structured Markdown block to your clipboard describing the component, which is meant to save the agent from burning its token quota trying to interpret a vague human description before it can even start on the actual fix. The performance numbers behind that claim come from a benchmark using one AI agent, Gemini 3.5 Flash, on two codebases, Cal.com and YumeShelf, so that's worth checking before relying on it for other agents or projects.
HoverSource's copied metadata includes the component name, its exact file path down to the line and column, computed styles, layout constraints, JSDoc comments, and raw JSX attributes — the kind of detail that's slow to type out by hand but takes one keystroke, Alt+C, to hand an agent.
It's for developers who use AI coding agents and want to hand off precise information about a UI element instead of describing it in words.
In Inspector Mode you hover over a component to see its layout boundaries, selector paths, and file deep-links; in Design Mode you drag a crosshair that snaps to edges to measure pixel-perfect offsets. Either way, Alt+C copies the result as a structured Markdown block.
HoverSource resolves component name, file path, line, column, and tag/classes across React, Vue, Svelte, Angular, SolidJS, Preact, Astro, and a Vanilla JS/TS fallback, plus Next.js 14+ React Server Components. Vue and Angular need an 'Invasive' compile-time install flag for full line and column resolution; the rest resolve out of the box in dev mode.
