Select
Click the element you mean
Hover, select, and send exact element context to the coding agent instead of describing the page from memory.
Layrr
Point, click, and edit your running web app.
Layrr turns the browser into a visual code editor for local web apps. Select an element, describe the change, and let an AI coding agent update the source files in your repo.
No IDE lock-in Works with existing apps Edits real source
Problem
The bug is visible. The file is not.
You can see the issue in the browser: the button is too wide, the copy is wrong, the spacing is off, or the component needs a small behavior change. The slow part is finding the right file, line, and context before a coding agent can make a useful edit.
Layrr sits between your browser and dev server. It injects a small overlay, maps clicked elements back to source, and gives the selected code location to the agent with your instruction.
Workflow
A visual loop for source-code edits.
Edit
Describe the change in plain English
Ask for copy, spacing, color, layout, or component tweaks while Layrr keeps the target source location attached.
History
Preview and revert edits
Layrr commits successful edits with a [layrr] prefix, so you can inspect history and move back when needed.
What It Handles
Built for existing web apps.
Element selection
Click one element or Shift+click several. Layrr carries the selected DOM and source context into the edit.
Source mapping
Framework metadata and file search help map clicked elements back to the code that rendered them.
Git history
Successful edits are committed with a [layrr] prefix so you can inspect or revert.
Dirty-file aware
Layrr snapshots the repo before the agent runs and avoids staging pre-existing dirty files.
Frameworks
Proxy-based, so it meets the app where it runs.
React 
Vue 
Svelte 
Next.js 
Astro Any HTML
Agents
Use the coding agent you already trust.
- Claude Code
- Codex CLI
- Gemini via Pi