Point, click, and edit your running web app.
CLI · Visual editor for your codebase
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-inWorks with existing appsEdits real source
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. 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.
A visual loop for source-code edits
Select, describe, apply — without leaving the browser.
Select
Click the element you mean
Hover, select, and send exact element context to the coding agent instead of describing the page from memory.
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.
Built for existing web apps
Element context, source mapping, and safe git history.
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.
Proxy-based, so it meets the app where it runs
Works across common frameworks — and any HTML.
React
Vue
Svelte
Next.js
AstroUse the coding agent you already trust
- Claude Code
- Codex CLI
- Gemini via Pi