Caret

Open source alternative to Plasmic and Builder.io Visual Copilot

38 stars
Apache-2.0
Active this week
Last commit 3 days ago

Last verified Oct 21, 2026

Edit React UI directly on a live canvas backed by your repo; every change writes to the source file it renders. Apache-2.0, runs locally, no account.

Visit website GitHub38 Deploy on Hostinger

Read the full breakdownWho it is for, how it works, trade-offs, the quick start and the FAQ

who it's for

Who Caret is for#

Developers iterating on UI with an AI coding assistant

Caret keeps visual edits in .caret/ as real .tsx files, so changes made on the canvas survive the next AI-generated rebuild. Instead of describing layout changes in words and verifying whether the agent interpreted them correctly, the developer paints the region and states the intent directly, giving the agent exact element references.

Skip if:

Teams with a dedicated designer producing Figma handoff assets and a working design-to-code plugin process have no immediate problem Caret solves. Caret is for teams where the developer is also doing the design work.

Solo developers prototyping a new product

Caret creates .caret/ inside any project folder and touches nothing else. The developer sets a color palette, type scale, and spacing system at the start (Caret can interview them or accept manual input), then builds pages by asking in the chat or writing the file. Everything produced is real React, readable in a diff.

Skip if:

Developers who need to ship in a framework that Caret's sync step does not support should verify compatibility before adopting it as the primary design tool.

Teams whose design file has drifted from the shipped code

When the design file has not been trusted for months and no one knows which artifact is authoritative, Caret offers a path by making the design layer part of the repo. The design becomes a .caret/ directory tracked in git, versioned alongside every code change.

Skip if:

Teams with an established Figma contract and a dedicated designer producing handoff assets are better served by design-handoff tools than by a tool that replaces the design file with in-repo React components.

Developers using Claude Code or Codex as their primary agent

Caret exposes a MCP server that Claude Code and Codex can call directly, so the sync step from design to app can be handed off to the terminal agent without switching contexts. The developer designs in Caret and hands the diff to the agent, which applies it in the framework the app actually ships.

Skip if:

Developers using agents without MCP support will not benefit from the terminal handoff. All other Caret features (canvas editing, AI chat, sync) still work without MCP.

the problem

The problem it solves#

Every project that uses a design tool eventually splits into two sources of truth. The mockup looked right in week one. By week four, someone fixed a spacing issue directly in the code, and now neither file is fully correct. Everyone on the team knows which one not to trust, but no one decided which one wins.

AI coding assistants make this worse. When you describe a visual change in words and ask an agent to implement it, the agent rebuilds the component from scratch. Tweaks made last month get overwritten because they were context in a conversation, not files in git. You fix the same thing twice, sometimes three times.

Describing visual changes in words is the other half of the problem. Three sentences about the padding on a card come back wrong, because language was never the right tool for pointing at a specific element on a screen.

how Caret solves it

How it solves it#

Canvas editing that writes to source files

Right-clicking any text, color, or image on the canvas changes the corresponding .tsx file in .caret/ immediately. Caret checks color picks against your design tokens and writes the token name instead of a raw hex value when a match exists, so changing a brand color later changes everywhere that used it.

Region-based AI instructions

Paint over any section of the page and describe what you want in words. The agent receives the exact elements you marked rather than guessing from a text description alone. This is the intended path for changes too fiddly to make by clicking directly on the canvas.

Side-by-side layout variants

Ask for multiple versions of a layout or component at once. Caret generates them live, side by side on the canvas, and picking one leaves an undo step. This avoids committing to an approach before seeing the options.

Bi-directional sync with any framework

When a design is ready, Caret determines which .caret/ files changed since the last sync and your agent updates the app to match, in Next, Remix, Vue, Svelte, Rails, or any other framework. Sync is explicit and snapshot-based, so undo always works. If someone edits the app directly, Caret detects the drift and offers to bring the design back in line.

MCP server for terminal agents

Caret exposes the design layer over MCP so Claude Code, Codex, and other terminal-based agents can call into it directly. Design stays in Caret; the sync step can be handed off to whichever agent is already running in the terminal. The protocol is one-way: the external agent calls in, Caret does not push work back out.

Design token injection into agent context

Caret writes color, type, spacing, and radius tokens into AGENTS.md, CLAUDE.md, and .cursor/rules and keeps them current. An agent building a new component reads the actual token values from the repo instead of inventing spacing that will not match the rest of the UI.

strengths · trade-offs

Strengths and trade-offs#

Strengths

Design changes are git commitsEvery canvas edit produces a file change in .caret/. Visual changes are diffable in pull requests, revertible with git revert, and permanent through subsequent AI code generation. A fix made once survives the next time an agent regenerates a component, because it is a file in git, not context in a conversation.
Apache-2.0, no account, no subscriptionThe app is free forever and requires no cloud account or API key of its own. The only ongoing cost is the AI model subscription the developer already has. Unlike Builder.io Visual Copilot and Locofy.ai, which are paid commercial platforms, there is no per-seat fee and no code sent to a third-party server.
Bring your own AI modelCaret connects to OpenCode's built-in engine and supports any AI provider: an API key or an existing subscription (ChatGPT Plus, Pro, and Go; Kimi For Coding; GitHub Copilot; Z.AI and Zhipu coding plans). Anthropic requires an API key. There is no model lock-in and no vendor controlling which AI the tool uses.
Isolated design sandbox with explicit syncCaret only reads from and writes to .caret/. The application source, routes, and business logic are outside its blast radius during design iteration. Sync is a deliberate step, snapshot-based, so undo always works and nothing is merged without the developer choosing to.

Trade-offs

-Early-stage project with 33 GitHub starsThe repository was created in June 2026 and had 33 stars and 7 forks as of October 2026. The project is under active development (last push: October 2026) but has not been widely adopted. Production teams should evaluate it on a non-critical project before relying on it for primary UI work.
-Node.js required for the live canvasThe canvas renderer runs a local dev server and requires Node.js LTS 20.19+ or Node 22.12+. Without it, the preview panel sits on a loading screen indefinitely while the rest of the app (chat, file editing) works normally. This is easy to miss on first install because the app opens and responds with only the canvas broken.
-Windows builds are not code-signedThe Windows installer triggers SmartScreen warnings and may be quarantined by Defender on download. The app is safe to run, but teams with managed Windows environments or strict antivirus policies need to manually allow the install. macOS builds are signed and notarized; Linux packages require no signing.

versus alternatives

Caret vs alternatives#

Caret vs Builder.io Visual Copilot

Builder.io Visual Copilot is a commercial design-to-code product. The core difference from Caret is where the design relationship with code lives: Builder.io's platform is cloud-hosted, while Caret's design layer lives as files in your own git repository.

Feature	Caret	Builder.io Visual Copilot
License	Apache-2.0	Proprietary
Pricing	Free (open source)	Paid
Runs locally	Yes (desktop app)	No (cloud-based)
Account required	No	Yes
Design storage	`.caret/` in git	External platform
AI model	Bring your own	Platform model

Caret is the better choice when the design layer needs to live in version control alongside application code, when source files must not leave the local machine, or when a per-seat subscription is not viable for the team. Builder.io Visual Copilot is worth considering for teams already using Builder.io's CMS and page-building product, where the cloud infrastructure is the expected environment.

Caret vs Locofy.ai

Locofy.ai is a commercial tool that converts Figma designs to code. The distinction from Caret is fundamental: Locofy.ai bridges two separate artifacts (a Figma file and a code editor), while Caret eliminates the separation by making the design layer part of the repository itself.

Feature	Caret	Locofy.ai
License	Apache-2.0	Proprietary
Pricing	Free (open source)	Paid
Runs locally	Yes (desktop app)	No (cloud-based)
Account required	No	Yes
Design source	`.caret/` in git	Figma plugin
Update flow	Canvas edit, sync to app	Re-export from design tool

Caret is the better choice when the goal is to eliminate the separate design-file step and keep all iteration in one git repository, particularly for developers who handle both design and implementation. Locofy.ai is more appropriate for teams with a dedicated designer working in Figma and a developer implementing those designs separately; in that workflow the translation step is the intended process, not the problem.

install · quick start

Quick start#

bash

Install Caret by building from source; Node 20 or newer is required.
```bash
git clone https://github.com/precious112/caret-desktop
npm install
npm run dev
```

tech stack · detected from GitHub

What it's built on#

Languages: TypeScript
Frameworks: React

frequently asked

FAQ#

Does Caret replace my existing application code?

No. Caret creates a .caret/ directory inside your project folder and only reads from and writes to that directory. Application source code, routes, and business logic are untouched until you explicitly run a sync. Sync takes a snapshot first, so undo always works and nothing is ever merged automatically.

Which frameworks does Caret support for the sync step?

The design layer in .caret/ is always React (.tsx files). The sync step translates that into whatever framework the app ships: Next.js, Remix, Vue, Svelte, Rails, or others. The app-side framework does not need to match the design layer. See the product website for the current compatibility details.

Does Caret send my code to a remote server?

No. Caret runs locally and requires no account. Source files go to the AI model you have signed in to (via API key or a subscription like GitHub Copilot or ChatGPT Plus) and nowhere else. The only other data sent is anonymous usage and crash statistics, which can be turned off in one click. The telemetry document in the GitHub repo lists exactly what is and is not collected.

Is Caret free to use?

Yes. Caret is Apache-2.0 licensed, free forever, and has no tier, subscription, or per-seat charge of its own. The only ongoing cost is the AI model subscription or API key you bring to it. Canvas editing features work without any connected model.

Does the canvas work without Node.js installed?

Partially. The canvas renderer requires Node.js LTS 20.19+ or Node 22.12+, because it runs a local dev server. Without it, the preview panel will not load, though chat, file editing, and all other features still work. Install the Node.js LTS build from nodejs.org and restart Caret to enable the canvas.

also worth a look

Similar open-source tools#

Onlook

Alternative toFigma

Visual React editor where every design change writes real code

26,928 GitHub stars
Licence Apache-2.0

Handle

Alternative toPlasmic

Edit UI visually in the browser and sync changes to code

41 GitHub stars
Licence MIT

Puck

Alternative toBuilder.io

Open source drag-and-drop page editor for any React app

13,500 GitHub stars
Licence MIT

Fluent-Qt

Alternative toQFluentWidgets

Fluent UI component library for Qt Widgets in C++17 and Python

174 GitHub stars
Licence MIT

Neon-Vision-Editor

Alternative toBBEdit

Native Apple text and Markdown editor with safe file sync

451 GitHub stars
Licence Apache-2.0

image-optimizer

Alternative toTinyPNG

Free desktop image optimizer. Files stay on your machine.

924 GitHub stars
Licence MIT

by category

Open source tools in these categories#

196

Run Caret on your own server

Self-host Caret on a Hostinger VPS.

Deploy on Hostinger

Featured

Omnara

Alternative toClaude Managed Agents

Open-source agent deployment API. Self-host or use Omnara Cloud.

2,957 GitHub stars
Licence Apache-2.0
#AI Agents

Inbox Zero

Alternative toSuperhuman

AI email assistant that drafts replies and clears your inbox

12,712 GitHub stars
Licence AGPL-3.0
#Email

rakazo

Alternative toGrok Bot

AI teammates you own: your keys, your model, your machine.

4,904 GitHub stars
Licence Apache-2.0
#AI Agents

Feature your project

The projects we add and every new guide. Free, unsubscribe any time.

Find open source alternatives to paid software

Caret vs Builder.io Visual Copilot

Feature	Caret	Builder.io Visual Copilot
License	Apache-2.0	Proprietary
Pricing	Free (open source)	Paid
Runs locally	Yes (desktop app)	No (cloud-based)
Account required	No	Yes
Design storage	`.caret/` in git	External platform
AI model	Bring your own	Platform model

Caret vs Locofy.ai

Feature	Caret	Locofy.ai
License	Apache-2.0	Proprietary
Pricing	Free (open source)	Paid
Runs locally	Yes (desktop app)	No (cloud-based)
Account required	No	Yes
Design source	`.caret/` in git	Figma plugin
Update flow	Canvas edit, sync to app	Re-export from design tool

Who Caret is for#

Developers iterating on UI with an AI coding assistant

Skip if:

Solo developers prototyping a new product

Skip if:

Teams whose design file has drifted from the shipped code

Skip if:

Developers using Claude Code or Codex as their primary agent

Skip if:

The problem it solves#

How it solves it#

Canvas editing that writes to source files

Region-based AI instructions

Side-by-side layout variants

Bi-directional sync with any framework

MCP server for terminal agents

Design token injection into agent context

Strengths and trade-offs#

Strengths

Trade-offs

Caret vs alternatives#

Caret vs Builder.io Visual Copilot

Caret vs Locofy.ai

Quick start#

What it's built on#

FAQ#

Similar open-source tools#

Open source tools in these categories#

Web Development

Design & Creative

Developer Tools

Find open source alternatives to paid software

Who Caret is for#

Developers iterating on UI with an AI coding assistant

Skip if:

Solo developers prototyping a new product

Skip if:

Teams whose design file has drifted from the shipped code

Skip if:

Developers using Claude Code or Codex as their primary agent

Skip if:

The problem it solves#

How it solves it#

Canvas editing that writes to source files

Region-based AI instructions

Side-by-side layout variants

Bi-directional sync with any framework

MCP server for terminal agents

Design token injection into agent context

Strengths and trade-offs#

Strengths

Trade-offs

Caret vs alternatives#

Caret vs Builder.io Visual Copilot

Caret vs Locofy.ai

Quick start#

What it's built on#

FAQ#

Similar open-source tools#

Open source tools in these categories#

Web Development

Design & Creative

Developer Tools

Find open source alternatives to paid software