Lerret

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

Two architectural choices make Lerret different:

The folder is the project. 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.

The format is React. Because every asset is real 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.

Everything else — git-native versioning, AI-fluent editing, no vendor lock-in — falls out for free. Pan-and-zoom artboards, sub-second hot reload, headless PNG/JPG export.

Try it now

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

pnpm create lerret@latest my-canvas
cd my-canvas
pnpm dlx @lerret/cli@latest dev

yarn create lerret my-canvas
cd my-canvas
yarn dlx @lerret/cli@latest dev

bun create lerret@latest my-canvas
cd my-canvas
bunx @lerret/cli@latest dev

The studio opens in your browser. Save any .jsx file under .lerret/ and the canvas re-renders in under a second.

What’s in the box

• Studio — pan-and-zoom canvas, per-artboard error boundaries, in-place editors for component data + config.
• Built-in AI — a brand-aware agent in the dock that designs and edits your assets, using your own provider key (OpenAI, Anthropic, OpenRouter) or a fully-local Ollama. Browser-direct, no Lerret backend.
• CLI — npx @lerret/cli@latest dev opens a folder as a live canvas; npx @lerret/cli@latest export headlessly renders to image files (PNG, JPG, structured ZIP).
• No backend — files read and written locally; no upload, no sync, no account.
• Three deploy modes — local CLI, hosted (browser File System Access API), or self-hosted static studio.

What’s next

• Getting Started — install and render your first canvas.
• Concepts — the folder-canvas model, page groups, variants, the four-tier prop cascade.
• Authoring Assets — JSX components, props schemas, data files, fonts, Markdown.
• AI in the Studio — the built-in brand-aware agent: prompt the dock to design and edit your assets.
• Examples — eight complete, runnable assets — OG cards, YouTube thumbnails, component showcases, more.
• CLI Reference — dev and export commands.

Community & support

Lerret is built openly. Here’s where to find us:

The project is MIT licensed and built openly by Belikely United . Contributions of every size are welcome — see the contributing guide  for the workflow.