Free and Open Source
Layrr - Framer for your actual codebase | Product Hunt

Layrr is the visual editor for real code.

Design visually, edit any stack, own everything.

curl -fsSL https://layrr.dev/install.sh | bash
macOS
Available Now
Windows
Coming Soon
Linux
Coming Soon
Features

Design Your Way

Four flexible modes to bring your ideas to life

Visual Editing

Drag, resize, and position elements just like Figma or Framer. See changes instantly as you design.

Design-to-Code

Turn any design into real code. Upload mockups from Figma and get clean, working components instantly.

Quick Text Edits

Click any text to edit it right in the browser. No hunting through files, just point, click, and type.

Design with Words

Describe what you want in plain English and watch it happen. AI-powered interface generation.

How It Works

Get Started in Minutes

Three simple steps to start designing

Run Layrr

Run Layrr in the same terminal where your code runs. Works with any website or app.

Browser Opens Automatically

Layrr automatically opens your default browser with visual editing enabled.

Start Designing

Click, drag, and edit. Every change you make updates your code automatically.

Why Layrr

Why Layrr?

The best of visual editors meets the flexibility of code

You Own Everything

No proprietary format. No monthly subscriptions. Your code lives in your repo, deploy anywhere you want.

Use Any Tech Stack

Works with React, Vue, plain HTML, or whatever you're already using. No need to rebuild everything from scratch.

Design Faster with AI

Describe what you want in plain English, turn designs into code, and iterate at the speed of thought.

FAQ

Frequently Asked Questions

Layrr runs in your browser alongside your existing development setup. It connects to your local dev server and lets you edit components visually while your code updates in real-time. No migration required.

Layrr works with any stack. React, Vue, Svelte, plain HTML, or whatever you're using. It's framework-agnostic and designed to work with your existing setup.

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 made for designers who code occasionally. You can design visually like you would in Figma or Framer, but having basic HTML/CSS knowledge helps you understand what's happening under the hood.

Yes. Layrr is open source and free forever. No subscriptions, no usage limits, no hidden costs. You can use it for personal projects or commercial work.

Deploy anywhere you want. Vercel, Netlify, your own server, GitHub Pages, anywhere. Layrr just edits your code, you control the deployment.

Ready to Take Control?

Start building with the freedom to design visually and own your code. No lock-in, no limits.

curl -fsSL https://layrr.dev/install.sh | bash