●●● canvas
┌────┐ ┌────┐
│ A │ │ B │
└────┘ └────┘
Canvas
Pan-and-zoom artboards
Every .jsx under .lerret/ becomes an artboard on an infinite canvas. Folders map to pages and groups. Focus one board or see them all.
No save button, no design mode, no proprietary file. Because everything is React, every LLM already knows how to edit it. The in-studio AI dock uses your own key for cloud providers, or local keyless Ollama; the /lerret command is keyless and Claude Code only.
npx create-lerret@latest my-canvas MIT licensed · v0.1 · Node ≥ 20.19
Files
The folder is the project, and the format is React. Git-native versioning, AI-fluent editing and zero lock-in are consequences, not features.
Lerret CLI
.lerret/ directory contains zero Lerret code, so nothing
about it is tied to how you happen to be running the studio today.
npx @lerret/cli@latest dev against any folder. Native Vite HMR, your daily dev loop, nothing to sign into.
Read the docsThe studio as a static site. Open any local folder through the File System Access API. Chromium browsers only.
Open the studioThe same static studio, packaged for self-deployment. Private and team contexts, same renderer, no backend.
See the repoEvery artboard is a React file an LLM was already trained on — your agent just edits it. Lerret's own AI comes two ways: the in-studio dock (your own key, or local Ollama) and the /lerret Claude Code plugin (keyless, Claude Code only).
Northwind
Our brand assets live in the same repo as our app now. A designer opens a PR, CI exports the PNGs, done. No more final_v3 in a shared drive.N Mara Ellison · Design Engineering Lead
Basecase
The folder is the source of truth. That one decision killed an entire class of sync bugs we used to fight on every launch.B Devon Park · Staff Frontend Engineer
Foundry Labs
We wired export into CI and generate a hundred localized banners on every release. It is just React, so our agent writes the variants itself.F Priya Nair · Head of Platform
Verdant
Handing an AI a design file was hopeless. Handing it a folder of components it was trained on? It simply edits them.V Tomás Rivera · Founder
Northwind
Our brand assets live in the same repo as our app now. A designer opens a PR, CI exports the PNGs, done. No more final_v3 in a shared drive.
Mara Ellison · Design Engineering Lead
Basecase
The folder is the source of truth. That one decision killed an entire class of sync bugs we used to fight on every launch.
Devon Park · Staff Frontend Engineer
Foundry Labs
We wired export into CI and generate a hundred localized banners on every release. It is just React, so our agent writes the variants itself.
Priya Nair · Head of Platform
Verdant
Handing an AI a design file was hopeless. Handing it a folder of components it was trained on? It simply edits them.
Tomás Rivera · Founder
Figma is a vector design tool with a proprietary file and a collaborative cursor culture. Lerret is a rendering canvas for code. Different category.
Every asset is a React component. If you do not write React, Lerret will not be your day-one tool — and it is not trying to be.
There is no backend. Hosted mode is a static site that talks to your local filesystem through the browser. Your files never leave the machine.
Open source, MIT licensed. No account, no backend.
One command scaffolds a project and the studio opens in your browser. If Lerret disappeared tomorrow you would still have a working set of React components.
