Layrr

Layrr by Narnia is a browser-based visual coding agent interface that turns your browser into a code editor for local web apps. It solves the pain of locating source files when you spot a UI bug but don't know which file or line to fix. By overlaying a small interactive layer on your running dev server, Layrr lets you click any element, maps it back to the source code, and sends that context along with your natural-language instruction to a coding agent (like Claude Code or Codex CLI). The agent then edits the actual source files in your repo, and changes are committed with a `[layrr]` prefix for easy history and revert. Layrr is built for developers working on existing web apps—no need to start from scratch or switch IDEs. It supports popular frameworks including React, Vue, Svelte, Next.js, Astro, and plain HTML. The tool is proxy-based, running alongside your existing dev server without modifying your project structure. It snapshots the repo before the agent runs, avoids staging pre-existing dirty files, and commits successful edits automatically. Key features include element selection (click one or shift-click multiple), source mapping via framework metadata and file search, dirty-file awareness, and git history with a unique prefix. Layrr currently supports Claude Code, Codex CLI, and Gemini via Pi as coding agents. Installation is simple: `npm i -g layrr`, then point it to your local dev server port, and access the editing interface at localhost:4567. Unlike integrated development environment plugins or standalone AI chat tools, Layrr provides visual context directly from the browser, reducing the cognitive load of describing UI elements from memory. It's open source, free, and focused on accelerating the edit loop for UI tweaks, copy changes, and small behavior modifications.