● v0.1 · MIT · Open source

Your project is a folder of React components. Lerret renders it.

No save button, no design mode, no proprietary file. Because everything is React, every LLM already knows how to edit it — no plugin, no MCP, no SDK. Pan-and-zoom artboards, sub-second hot reload, headless PNG/JPG export.

Open the studio Read the docs Star on GitHub

npx create-lerret@latest my-canvas

Why it works

Two architectural choices.

Everything else — git-native versioning, AI-fluent editing, no vendor lock-in — falls out for free.

01 — The folder is the project

Your project is a folder. Lerret renders it.

No save button, no design mode, no proprietary file. The .lerret/ directory on disk is the project — Lerret only reflects what's already there. Git treats it like any other folder. If Lerret disappears tomorrow, you still have a working set of React components.

02 — The format is React

Every LLM already speaks it.

Because everything is React, every LLM already knows how to edit it — no plugin, no MCP, no design-tool SDK. Just files an AI was trained on millions of times over. AI-native by substrate, not by feature roadmap.

One file

A complete asset, in plain React.

Each .jsx file under .lerret/ becomes an artboard. The default export is the component; named exports become variants. The meta export tells Lerret the dimensions, tags, and (optionally) a propsSchema for the in-studio data editor.

That's it. Save the file and the canvas re-renders.

// .lerret/social/twitter-banner.jsx
export default function TwitterBanner() {
  return (
    <div style={{
      width: 1500,
      height: 500,
      padding: '4rem',
      background: 'linear-gradient(135deg, #B85B33, #E0833F)',
      color: 'white',
      fontFamily: 'system-ui',
    }}>
      <h1 style={{ fontSize: 72, fontWeight: 800, margin: 0 }}>
        Hello from Lerret
      </h1>
      <p style={{ fontSize: 24, opacity: 0.85, marginTop: '1rem' }}>
        It's just a React component.
      </p>
    </div>
  );
}

export const meta = {
  dimensions: { width: 1500, height: 500 },
  tags: ['twitter', 'banner'],
};

✶ Built-in AI

A brand-aware asset factory.

An AI agent lives in the studio dock. Prompt it — “re-theme the banner to our brand”, “make a launch kit from this component” — and it reads, writes and restructures the files in your .lerret/ folder. Tell it your brand once; every asset it makes is anchored to your colors, type and voice.

Your provider, your key — OpenAI, Anthropic or OpenRouter, or a fully-local Ollama. Set per folder, switch anytime.
Browser-direct. Prompts and files go straight to your provider — no Lerret backend, no proxy. BYOK keys are encrypted in your browser.
Agentic, but bounded. It works inside .lerret/ only, with a step cap and one-click revert on every turn.

Prefer your own tool? Every project also ships Claude Code, Cursor, Copilot & AGENTS.md conventions — edit with /lerret-edit or any agent.

Ask Lerret to design or edit…
> re-theme the twitter banner to our brand
 
  ⟳ Looking through .lerret/social/
  ✎ Editing twitter-banner.jsx — headline + brand color
  ✎ Editing twitter-banner.jsx — background, type
  ✓ canvas updated · ~12.4k tokens

What's in the box

Built for developers who ship.

Pan-and-zoom canvas

Your project folder becomes a navigable visual canvas. Pages and groups map directly to folders. Focus mode for one artboard at a time.

Sub-second hot reload

Save a .jsx file and the artboard re-renders in under a second. Vite React Fast Refresh, native — no transpile step, no proxy.

Headless export

Single artboard, page group, or the whole project to PNG/JPG — fonts fully embedded, foldered to mirror your pages. Headless Chromium, runs in CI.

Variants via named exports

export const Dark = … gives the same component a second variant on the same canvas. No new file, no new convention.

propsSchema editors

Declare a propsSchema in meta and Lerret generates a typed form — edit props in the studio, written back to a .data.json, no code touched.

Config cascade & assets

A per-folder config.json cascades colors, CSS vars and shared data down the tree. Drop .woff2 in _fonts/ for global fonts; .md files render as cards.

Three deploy modes

Run it locally. Run it in a browser. Self-host it.

One React codebase. Three ways to deliver the same canvas against the same folder. Switch freely — your .lerret/ directory has zero Lerret code in it.

CLI

Local Vite dev server

npx @lerret/cli@latest dev against any folder. Native Vite HMR. Your daily dev loop.

Hosted

Browser, no install

The studio as a static site; open any local folder via the File System Access API. Chromium browsers only.

Self-host

Your own infrastructure

The same static studio, packaged for self-deployment. Private and team contexts. Same renderer.

A small workspace of focused packages

@lerret/cli User-facing CLI — dev + export. Bundles the studio.

@lerret/core Environment-agnostic engine — loader, watcher, config cascade.

create-lerret Project scaffolder — npx create-lerret@latest my-canvas.

What it isn't

Honest about scope.

Lerret is small on purpose. Three things it's not:

Not a Figma replacement.

Figma is a vector design tool with a proprietary file format and a collaborative cursor culture. Lerret is a rendering canvas for code. Different category.

Not a "no-code" tool.

Every asset is a React component. If you don't write React, Lerret won't be your day-one tool.

Not a hosted SaaS.

There's no backend. Hosted mode is just a static site that talks to your local filesystem via the browser.

Get started

Three commands. One canvas.

npx create-lerret@latest my-canvas
cd my-canvas
npx @lerret/cli@latest dev

The studio opens in your browser. Save any .jsx file under .lerret/ and the canvas re-renders. Requires Node ≥ 20.19.

Read the docs Open the hosted studio