Select any element in your browser, describe what you want to change, and Claude edits your source code.
npm install -g layrr
A CLI overlay that turns your browser into a visual editor
Hover to highlight any element on the page. Click to select it. Layrr shows the tag, breadcrumb, and source file instantly.
Describe what you want in plain English. Claude reads your source file, makes the minimal edit, and saves it. Your dev server hot-reloads automatically.
Every edit is tracked. Browse your history with pagination, see what you changed and when. State persists across page reloads.
React, Vue, Svelte, Astro, plain HTML. Layrr auto-detects source files using framework metadata and smart file search.
Three simple steps to start designing
layrr --port 3000Point Layrr at your running dev server. It proxies the traffic and injects the editing overlay.
Switch to Edit mode, hover to highlight, click to select. Layrr finds the source file automatically.
Type what you want in plain English. Claude edits the source, your dev server hot-reloads. Done.
The best of visual editors meets the flexibility of code
No proprietary format. No monthly subscriptions. Your code lives in your repo, deploy anywhere you want.
Works with React, Vue, plain HTML, or whatever you're already using. No need to rebuild everything from scratch.
No more hunting through files. Click the element, say what you want, and Claude handles the rest. Iterate visually in seconds.
Layrr is a CLI that proxies your dev server and injects a lightweight overlay. You select elements in the browser, describe changes in plain English, and Claude Code edits your actual source files. Your dev server hot-reloads automatically. No migration required.
Layrr works with any stack that has a dev server. React, Vue, Svelte, Astro, plain HTML, or whatever you're using. It has built-in source detection for React and Vue components, and smart file search for everything else.
Unlike Framer or Webflow, Layrr works with your actual codebase. You own the code, choose your hosting, and aren't locked into a proprietary platform. No vendor lock-in, no monthly subscriptions.
Layrr is for anyone who builds for the web. You describe changes in plain English and Claude handles the code. Having basic HTML/CSS knowledge helps you understand what's happening, but it's not required.
Layrr itself is free and open source under the MIT license. You'll need a Claude Code subscription for the AI edits, but there are no additional costs from Layrr.
Deploy anywhere you want. Vercel, Netlify, your own server, GitHub Pages, anywhere. Layrr just edits your code, you control the deployment.
Install in seconds, point at your dev server, and start editing visually. No lock-in, no limits.
npm install -g layrr