Layrr CLI
Proxy your dev server, click any element, describe changes in plain English. Edits your actual source files with automatic git commits.
npx layrr --port 3000 Installation
Prerequisites
- Node.js 18+
- A running dev server (Vite, Next.js, Astro, etc.)
- One AI agent authenticated (Claude Code or Codex CLI)
Install globally
npm install -g layrrOr run directly
npx layrr --port 3000CLI Options
npx layrr --port <dev-server-port> [options]
Options:
-p, --port <number> Dev server port (required)
--proxy-port <number> Layrr proxy port (default: 4567)
--agent <name> AI agent: claude or codex
--no-open Don't open browser automatically
-h, --help Show helpAI Agents
On first run, Layrr prompts you to choose an agent and saves the preference to ~/.layrr/config.json.
Key features
Selective Git Staging
Every edit is auto-committed with a [layrr] prefix. Only files the AI changed are staged. Your uncommitted work is never touched.
Multi-Framework Source Mapping
Maps clicked DOM elements back to exact source files using React fiber stacks, Vue component metadata, Svelte/Solid resolvers, and heuristic fallback.
Overlay Persistence
The toolbar survives client-side navigations across Next.js, Nuxt, SvelteKit, and Astro View Transitions.
Framework support
| Framework | Source Mapping |
|---|---|
| React (19+) | Fiber owner stacks via element-source |
| Vue | Component instance metadata |
| Svelte | Svelte resolver |
| Solid | Solid resolver |
| Preact | Preact resolver |
| Astro, HTML | Heuristic text/tag/class matching |
Frequently asked questions
Try it now
One command. Your dev server. Your source files.
npx layrr --port 3000