Hi Product Hunt! 👋
I’m Kiran, and I built Layrr to solve a problem I kept running into.
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.
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.
Key features:
1. Visual editing – drag, resize, and position elements
2. Figma-to-code conversion
3. Quick text editing directly in browser
4. Design with natural language
5. Works with any framework
6. Your code stays in your repo
And here’s the best part: it’s 100% free and open-source (AGPLv3). No subscriptions, no vendor lock-in, no proprietary formats. You own your code, you choose your stack, you deploy anywhere.
I built this for product engineers like me who want the speed and comfort of visual editing without sacrificing control or freedom.
Would love to hear your thoughts and feedback!
~ Kiran 🙂