I’ve been using Claude Code to build websites, and while it’s incredible for generating and editing code, something felt off when it came to design. I’d describe what I wanted, but I couldn’t just point at an element and say “make THIS bigger” or “move THAT 20px to the right.”
I realized I needed more direct control—the ability to click, drag, and visually manipulate specific elements while still working with real code. That’s when I started building Layrr.
What is Layrr?
Layrr is a browser-based coding agent that gives you visual editing superpowers over your actual codebase. Think Framer’s drag-and-drop interface, but instead of being locked into their platform, it works directly in your browser with your code—React, Vue, Svelte, plain…
I’ve been using Claude Code to build websites, and while it’s incredible for generating and editing code, something felt off when it came to design. I’d describe what I wanted, but I couldn’t just point at an element and say “make THIS bigger” or “move THAT 20px to the right.”
I realized I needed more direct control—the ability to click, drag, and visually manipulate specific elements while still working with real code. That’s when I started building Layrr.
What is Layrr?
Layrr is a browser-based coding agent that gives you visual editing superpowers over your actual codebase. Think Framer’s drag-and-drop interface, but instead of being locked into their platform, it works directly in your browser with your code—React, Vue, Svelte, plain HTML, whatever you’re using.
Four Powerful Modes
Visual Editing: Drag, resize, and position elements just like Figma or Framer. Every change you make updates your actual code in real-time. 1.
Design-to-Code: Upload mockups from Figma, Sketch, or any design tool and watch Layrr turn them into clean, working components that match your framework and styling conventions. 1.
Quick Text Edits: Click any text on your page to edit it directly in the browser. No hunting through files—just point, click, and type. 1.
Design with Words: Describe what you want in plain English. Drag a selection around any part of your interface and let AI generate or modify it based on your description.
Why Layrr is Different
For years, we’ve been stuck with a false choice: either write code by hand with full control, or use a visual builder that locks you into a proprietary platform with monthly subscriptions.
Layrr breaks that trade-off.
- You Own Everything
- Your code lives in your own repository
- No proprietary formats or vendor lock-in
- Deploy anywhere: Vercel, Netlify, your own server, GitHub Pages—anywhere
Works with Any Stack
- Framework-agnostic: React, Vue, Svelte, Next.js, plain HTML—you name it
- Respects your existing code conventions
- No need to rebuild everything from scratch
- Supports Tailwind, CSS modules, styled-components, or any styling approach
How It Works
Getting started is incredibly simple:
- Run Layrr in the same terminal where your dev server runs
- Browser opens automatically with visual editing enabled
- Start designing—every change updates your code automatically
curl -fsSL https://layrr.dev/install.sh | bash
That’s it. No complex setup, no configuration files, no learning curve.
The Philosophy
“Tools should empower you, not constrain you.”
Visual editing shouldn’t mean giving up on clean code. AI assistance shouldn’t mean losing control. Ease of use shouldn’t mean vendor lock-in.
Layrr is about freedom:
- The freedom to work visually when you want, and write code when you need to
- The freedom to own your work, choose your stack, and deploy
- The freedom to build the future you imagine—without constraints
I built this for product engineers like me who want the speed and comfort of visual editing without sacrificing control or freedom. People who value:
- Fast iteration cycles
- Clean, readable code
- Complete ownership
- Flexibility to use any tool or service
If that sounds like you, I’d love to hear your thoughts and feedback!
Try Layrr: https://layrr.dev