FAQ

What is Lerret, exactly?

At its core, Lerret rests on two architectural choices:

Your project is a folder. Lerret renders it. There is 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.

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.

Mechanically: each .jsx / .tsx file in .lerret/ becomes an artboard with its own pan-and-zoom card on the canvas; saving the file re-renders the artboard in under a second. You can export every artboard to PNG or JPG headlessly — single asset, page group, or whole project as a structured ZIP. No backend, no account.

Is Lerret a Figma replacement?

No. Figma is a vector design tool with a proprietary file format and a collaborative cursor culture. Lerret is a rendering canvas for code — your components are the source of truth, and Lerret only displays them.

If your team’s designs live in Figma and your job is to make production assets from them, Lerret is complementary: it gives you a canvas where the React components your app ships can also be the social card, the OG image, the release graphic. Lerret will not replace your designer’s tool.

How is Lerret different from Penpot, CodePen, or other design/code tools?

Two different comparisons come up here. Lerret overlaps with neither cleanly.

Design tools that export to code — Penpot, Figma, Sketch, plus codegen plugins like Anima, Locofy, and Builder.io — start from a vector canvas. You draw, and the output is a design file that someone then re-implements in code, or that a plugin translates into best-guess JSX. The generated code is rarely what you would have hand-written, and round-tripping edits between the design file and the production codebase is painful.

Code playgrounds with design integrations — CodePen, JSFiddle, and the Figma × CodePen embed flow — let you write a snippet and share it or embed it into a design file. Useful for demos and shareable prototypes; not a pipeline for production components, and not an asset export tool.

Lerret runs differently from both. Your React components are the source of truth, and the canvas only renders what your code already produces. The output is a real component file that ships in your app, plus headless PNG / JPG / structured ZIP exports for asset use. There is no translation step, no codegen drift, no demo-vs-production split.

If you already design in Penpot or sketch ideas in CodePen, Lerret does not replace them. If you want the React components your app ships to also be your social cards, OG images, and release graphics — that is what Lerret is for.

Is Lerret a “no-code” tool?

No. Every asset is a React component. If you don’t write React, Lerret is not your day-one tool.

The in-studio editors do let you change data (props, theming variables) without touching code — but the asset itself is always a component file you author in your editor.

Is there a hosted SaaS?

There is a hosted studio at app.lerret.belikely.com (Chromium-only) — but it is not a SaaS in the usual sense. It is a static site that talks to your local filesystem through the browser’s File System Access API: you open a local folder and the studio both renders and edits it — change data/config/meta and create, rename, move, or delete pages and assets, all written straight back to your local files (no @lerret/cli required). Your files never leave your machine. There is no backend, no database, no account.

You can also self-host the studio on your own infrastructure with the exact same static build.

Which browsers are supported?

The hosted and self-host studios require the File System Access API, which is Chromium-only today. The CLI mode works in every modern browser because the studio is served from the local Vite server — the FSA is not used.

Safari and Firefox users get a calm guidance screen pointing them at either a Chromium browser or npx @lerret/cli@latest dev locally.

Does Lerret upload my files?

No. There is no backend at any layer.

• CLI mode — your files are read by a local Node process. Nothing leaves your machine.
• Hosted / self-host mode — your files are read in the browser via the File System Access API, transformed by an in-browser Sucrase runtime, and served back to the same page through a service worker. No upload, no sync, no remote server holds your project content.

The first time you open a folder in hosted mode, the browser shows a permission prompt for that specific directory. You can revoke that permission any time from the browser’s site settings.

Does Lerret have built-in AI?

Yes. The studio ships a brand-aware AI agent in the dock: prompt it — “re-theme the twitter banner to our brand”, “make a launch kit from this component” — and it reads, writes, and restructures the files in your .lerret/ folder for you. It’s agentic (one prompt does multi-step work), sandboxed to .lerret/ only, and every turn is one click to revert. Full guide: AI in the Studio.

This is separate from — and complementary to — editing your assets with your own AI tool (Claude Code, Cursor, Copilot); see Editing with AI Tools.

When I use the AI, does my code go through a Lerret server?

No. Every AI request goes browser-direct to the provider you configured — the prompt, the file contents the turn needs, and any images you attach go straight from your browser to OpenAI / Anthropic / OpenRouter (or to your local Ollama). No Lerret backend, proxy, or telemetry is ever in the path. Your BYOK key is encrypted at rest in your browser and never sent to a Lerret server. Run Ollama and nothing leaves your machine at all.

Do I need an API key, and what does the AI cost?

You bring your own provider — BYOK. Add an API key for OpenAI, Anthropic, or OpenRouter and cloud calls are billed against your own key at that provider’s rates; Lerret takes no cut and charges nothing for the AI. Prefer free and fully local? Point Lerret at Ollama — no key, no per-token cost. You can switch providers any time, per folder.

Is it production-ready?

Lerret is in the 0.1 series — the first public release. The full feature set works today:

• The folder-canvas model
• Sub-second live-edit loop
• In-studio data / config / meta editors
• Headless export to PNG/JPG (single asset, page group, whole project ZIP)
• Zero-install execution across npm, pnpm, yarn, and bun
• Three deploy modes (CLI, hosted, self-host) with UX parity

Expect occasional sharp edges in the 0.1.x series; the public API stabilises for 1.0. Bug reports and feedback are welcome at github.com/belikely-united/lerret/issues .

What’s the relationship between @lerret/cli and lerret?

@lerret/cli is the npm package you install. It ships a binary literally named lerret (its bin field in package.json).

The bare lerret package name on npm belongs to a different, unrelated, deprecated project — so the scoped form @lerret/cli is required when invoking via npx. Once installed (the binary is on your PATH), @lerret/cli dev works directly.

Can I use TypeScript?

Yes. Use the .tsx extension for components that use TypeScript syntax (interfaces, generics, type-only imports). The loader recognises both .jsx and .tsx.

In CLI mode, Vite handles .tsx natively. In hosted mode, the in-browser Sucrase transformer strips types at runtime.

Do I need a package.json in my project?

No. A fresh npx create-lerret@latest project has no package.json — just .lerret/. The CLI bundles its own React, Vite, and dependencies, so users never npm install react themselves.

If you want to use Lerret inside an existing project (e.g., a Next.js app), drop a .lerret/ directory anywhere in that project and @lerret/cli dev from there. The existing package.json is unaffected — Lerret never reads or writes outside .lerret/.

Where does data get saved when I edit in the studio?

The in-studio editors write back to the co-located files:

Everything is on your disk, as plain JSON or JSX. No proprietary format, no opaque blob.

How does Lerret play with version control?

.lerret/ is just files. Git treats it like any other directory — your .jsx, .json, and .md files diff and merge normally. There is no binary blob, no opaque project file, no schema migration when you upgrade Lerret.

A .lerret/.state/ directory exists for transient studio state (cursor position, last-opened variant). It is gitignored automatically so it does not pollute your commits.

Can I run @lerret/cli export in CI?

Yes — that is exactly what it is for. The export pipeline boots a headless Chromium through Playwright and never opens a window. Useful patterns:

• Render OG images for blog posts at build time.
• Generate release-graphic variants from a --data file.
• Re-render an entire brand kit when config.json vars change.

The --data and --config override flags let you re-render with different inputs without modifying any project files — handy for matrix exports (light × dark × locale).

The CLI tries a system Chrome / Edge channel first; failing that, it falls back to a Playwright-installed Chromium. If neither is available, it exits with a clear, actionable message.

How fast is the cold start?

The project’s published NFR is under 60 seconds from npx create-lerret@latest to a rendered canvas on a cold machine over typical broadband. The dominant cost is downloading Vite and its peer dependencies (~4 MB gzipped) the first time. On subsequent runs (warm cache), it is single-digit seconds.

The CI benchmark for this target runs on every push to main against Ubuntu and macOS runners.

Does @lerret/cli dev require network?

Only the first time, to download @lerret/cli (plus Vite and React). After that, @lerret/cli dev makes no outbound network requests at runtime — it serves a local Vite dev server from already-installed packages. Offline development is fully supported.

If you hit a hang in no-network mode, that indicates a runner timeout is misconfigured rather than a Lerret bug. Open an issue.

What licence is Lerret under?

MIT — full source, free to use, self-host, modify, embed, and redistribute, including in closed-source and commercial products. No copyleft, no strings attached. Full text in LICENSE .

Who builds Lerret?

Lerret is built openly by Belikely United . The repo at github.com/belikely-united/lerret  is the source of truth — issues, discussions, and pull requests welcome.

More questions?

Open a discussion at github.com/belikely-united/lerret/discussions . For bugs, github.com/belikely-united/lerret/issues . For security reports, see SECURITY.md .