Everything you need to get started with Layrr
Get Layrr up and running in minutes
Install Layrr globally with npm:
npm install -g layrr
You can also use npx layrr to run without installing globally.
Version 18 or later
Authenticated (claude login)
Any running dev server (Vite, Next.js, Astro, etc.)
macOS, Windows, or Linux
Make sure your local dev server is running on a known port
pnpm dev # starts on port 3000Point Layrr at your dev server port
layrr --port 3000Layrr opens your browser at localhost:4567 with the editing overlay injected
Click Edit in the toolbar, click any element, type what you want to change, and hit Enter. Claude edits the source file and your dev server hot-reloads.
All available flags and options
layrr --port <dev-server-port> [options]-p, --port <number>
Dev server port (required)
--proxy-port <number>
Layrr proxy port (default: 4567)
--no-open
Don't open browser automatically
-h, --help
Show help
Speed up your workflow
Understanding Layrr's architecture
Layrr runs an HTTP proxy that sits between your browser and dev server. It intercepts HTML responses and injects a small overlay script. The overlay renders the toolbar, element highlighting, and editing panel directly in your browser.
The overlay communicates with the Layrr server over WebSocket. When you select an element and describe a change, the edit request is sent to the server with the element's CSS selector, tag name, text content, and resolved source file location.
Layrr automatically finds the source file for the selected element. For React and Vue, it reads framework metadata from the DOM. For other frameworks, it uses a scoring algorithm that matches text content, tag names, and class names against your project files.
The edit request is sent to Claude Code as a prompt with the source file, line number, element context, and your instruction. Claude reads the file, makes the minimal edit needed, and saves it. Your dev server picks up the change and hot-reloads the page.
Works with any framework that runs a local dev server
Source detection via React Fiber metadata
Source detection via component metadata
Smart file search with content and class matching
Free forever, licensed under MIT
Layrr is licensed under the MIT License. Use it for anything — personal projects, commercial work, modify it, distribute it. No restrictions.
Note: Layrr uses Claude Code for AI edits, which requires a separate subscription from Anthropic.
Install in seconds, point at your dev server, and start editing visually.