A browser coding agent interface for selecting elements and sending instructions directly to Claude Code.
# Add to your Claude Code skills
git clone https://github.com/thetronjohnson/layrrNo comments yet. Be the first to share your thoughts!
AI coding tools are powerful, but you still have to describe where to make the change — which file, which component, which line. Layrr skips all of that. You point at the thing on screen, say what you want, and the code changes.
No context-switching. You stay in the browser, looking at the actual app. No jumping between editor tabs, no grepping for the right file, no copy-pasting selectors into a prompt.
Every edit is a git commit. Each AI change is auto-committed with a [layrr] prefix. Preview how the app looked at any past edit, or revert to a previous version in one click. You always have a clean undo path.
Works with any framework. React, Next.js, Vue, Nuxt, Svelte, SvelteKit, Solid, Astro, Vite — Layrr maps clicked elements back to source files across all of them.
Go to layrr.dev and sign up. You can:
You click an element Layrr figures out AI edits the
in the browser → the source file + line → actual code
↓
You see it instantly ← Dev server hot reloads ← Saved & committed
Click any element on the page to select it. Type what you want to change. The AI reads the source file, makes targeted edits, and your dev server hot-reloads the result instantly.
Multi-select — Shift+click to select multiple elements and apply one instruction to all of them.
History — Open the history panel to preview how the app looked at any past edit, or permanently revert to a previous version.
Publish — Push your changes to a GitHub branch when you're ready. Share a live preview link with anyone, protected by a password you set.
Layrr also ships as an open-source CLI you can run against any local dev server.
npx layrr --port 3000
See the CLI docs for setup and options.
MIT — Built by Kiran Johns