Visual Element Selection
Click any element on any page. Layrr highlights it, identifies the underlying code, and lets you describe changes in plain English.
How it works
When you enter Edit mode (Alt+K or Cmd+K), hovering over any element highlights it with a subtle glow. Click to select. Layrr immediately resolves which source file and line number is responsible for rendering that element.
This isn't just CSS inspection. Layrr traces through React fiber trees, Vue component instances, and Svelte compiler output to find the actual component that owns the element.
Single and multi-select
Click any element to select it. Want to apply the same change to multiple elements? Hold Shift and click additional elements. Then type one instruction, like "make all these the same height," and the AI applies it to every selected element's source.
Source mapping across frameworks
Layrr uses framework-specific resolvers to map DOM elements back to source code:
- React 19+: Fiber owner stacks via the
element-sourcelibrary - Vue: Component instance
__filemetadata - Svelte & Solid: Dedicated resolvers for each compiler's output
- Static HTML / Astro: Heuristic matching by text content, tag names, and class names
When framework metadata isn't available, Layrr falls back to a scored file search across your entire project directory.
Browse and Edit modes
Toggle between Browse mode (normal page interaction) and Edit mode (element selection). The toolbar shows which mode you're in. Links and buttons work normally in Browse mode. Nothing is intercepted until you switch to Edit.
Overlay persistence
The Layrr toolbar survives client-side navigation across all major frameworks. Whether you're using Next.js App Router, Nuxt, SvelteKit, or Astro View Transitions, the overlay stays put.