Layrr

Layrr

Framer for your actual codebase

313 followers

Layrr gives you Framer-style visual editing for your actual codebase. Drag and resize components, convert Figma to code, edit text in-browser, or design with AI, all while working with real files in your repo. Framework agnostic (React, Vue, Svelte, HTML). Deploy anywhere. 100% free and open-source.
Layrr gallery image
Layrr gallery image
Layrr gallery image
Layrr gallery image
Layrr gallery image
Layrr gallery image
Free
Launch Team / Built With
NMI Payments
NMI Payments
Don’t Integrate Payments Until You Read This Guide
Promoted

What do you think? …

Kiran Johns

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 :)

Shyjal
πŸ’‘ Bright idea

Great work, Kiran. This makes it so much easier to make simple website edits without touching the code.

Do you plan to release a version for less tech-savvy users, one that doesn’t require terminal setup?

Kiran Johns

@shyjalΒ Totally, right now it's packaged as a CLI tool, which make it hard for folks to operate, thinking through a better approach, maybe a desktop application?

Gautham Shankar

Love the idea Kiran, all the best!

Kiran Johns

@ingavuΒ ty, love what you're building! Are you planning to launch Poke soon?

MELVIN GEORGE

πŸŽ‰ congrats on the launch of Layrr!

This looks like a beautiful and powerful tool for enabling quick "what-if" scenarios and rapid visual prototyping for everyone. Making it so easy to quickly rethink and iterate on designs is a game-changer.

Well done! πŸ‘

Kiran Johns

@melvingeorgeΒ Thanks a lot, how are things going with PulpMiner

Gabriel Cuevas

The missing piece of the vibe code puzzle.

Kiran Johns

@the_people_personΒ haha, thanks

Mykyta Semenov πŸ‡ΊπŸ‡¦πŸ‡³πŸ‡±

It’s great that it’s open source. Thank you!

Kiran Johns

@mykyta_semenov_Β Hope you like it, let me know if there are any feedback

Shajin KP

It’s crazy simple.

Now it’s easier than ever for non tech savvy people to manage their websites

really curious how setup works?

Kiran Johns

@shajinΒ it's pretty simple, just run layrr in a terminal window in your code base. If you have a dev server running, layrr detects automatically and opens a proxy dev server at port 9999

https://www.layrr.dev/docs

12
Next
Last