Open Source Framer Alternative

Layrr vs Framer

Framer locks you in. Layrr edits your actual source code. Install a CLI, point at any element, describe the change in English, and Claude Code rewrites your files.

npm install -g layrr
Get Started Free View on GitHub

How Layrr Works

Three commands. Your actual code changes.

1

Install the CLI

Run npm install -g layrr once. That's the entire setup.

2

Point it at your dev server

Run layrr --port 3000 and Layrr injects an overlay into your running dev server. Works with any framework.

3

Click, describe, done

Click any element on screen, describe the change in plain English, and Claude Code edits your actual source files. No copy-paste, no export.

Why Choose Layrr Over Framer?

Your code, your frameworks, your hosting, your rules

You Own Your Code

Framer keeps your site in their proprietary system. Layrr edits your actual source files in your repository. Every change is a real code change you can commit, review, and own forever.

Any Framework

Framer locks you into Framer's platform. Layrr works with React, Vue, Svelte, Astro, plain HTML, and anything else with a dev server. Use whatever you already use.

Claude Code for Editing

Framer offers limited built-in AI. Layrr uses Claude Code, which can handle any edit: restyle a component, add a feature, refactor logic, fix a bug. Describe it in English, it happens.

Free and Open Source

Framer costs $15-30/month per site. Layrr is free and MIT licensed. You just need a Claude Code subscription for the AI editing, which you likely already have.

Deploy Anywhere

Framer sites live on Framer hosting. Layrr edits your source code, so deploy to Vercel, Netlify, Cloudflare, AWS, your own server, or anywhere else. No vendor lock-in.

Your Existing Workflow

Framer is a separate platform with its own workflow. Layrr is a CLI that plugs into your existing dev setup. Works with Git, VS Code, your CI/CD pipeline, everything you already use.

Feature Comparison

See how Layrr stacks up against Framer

Feature Layrr Framer
Code Ownership Your source files Proprietary format
Pricing Free
+ Claude Code sub		 $15-30/mo
per site
Framework Support React, Vue, Svelte, Astro, HTML Framer only
Hosting Deploy anywhere Framer hosting only
AI Editing Claude Code (any edit) Limited built-in AI
Workflow Your existing dev setup Separate platform
Open Source
Works with Existing Code
Git Integration
License MIT Proprietary

When to Choose Each

We believe in honest comparisons

When to Use Layrr

  • You have an existing codebase and want to edit it visually
  • You want every change as a real code diff you can review
  • You use Vue, Svelte, Astro, or anything beyond React
  • You need to deploy to your own hosting or infrastructure
  • You want AI that can handle complex edits, not just basic styling
  • You value open source tools and want to avoid vendor lock-in

When to Use Framer

  • You want a fully managed, all-in-one platform
  • You are building from scratch with no existing code
  • You need built-in CMS, forms, and analytics
  • You prefer zero-config hosting and deployment
  • You don't need to own or version-control your code
  • You are a non-technical user who wants a drag-and-drop builder

Try the Open Source Alternative

One CLI command. Point at any element. Describe what you want. Claude Code edits your source files.

npm install -g layrr
Get Started Free Star on GitHub