For decades, design and development have lived in separate worlds: you mock a screen in a design tool, then someone rebuilds it by hand in code, and the two drift apart from the moment they're created. Caret is built on a bet that this divide no longer needs to exist. AI is now powerful enough that the design is the code.
In Caret you describe and shape your UI on a live canvas inside your editor, and it stays real, version-controlled React the entire time, then you sync it straight into the app you ship. No separate design tool. No handoff. No drift. One source of truth that is design and code at once.
It's for the people building the modern frontend: designers moving into code, and frontend engineers who'd rather design where they already work. As AI erases the line between designing and building, Caret is what's on the other side: design and code, finally the same thing.
This is Caret IDE, the Caret extension bundled into a branded VS Code (OSS) build based on VSCodium, so you get a ready-to-go editor with Caret already inside. The core extension lives at precious112/caret.
Grab the build for your platform (links always point to the newest release):
| Platform | Download |
|---|---|
| macOS, Apple Silicon (M1/M2/M3…) | Caret-macOS-arm64.zip |
| macOS, Intel | Caret-macOS-x64.zip |
| Windows, installer (recommended) | Caret-Windows-UserSetup-x64.exe |
| Windows, system-wide installer | Caret-Windows-Setup-x64.exe |
| Windows, portable zip | Caret-Windows-x64.zip |
| Linux, Debian/Ubuntu (.deb) | Caret-Linux-x64.deb |
| Linux, Fedora/RHEL (.rpm) | Caret-Linux-x64.rpm |
| Linux, AppImage (portable) | Caret-Linux-x86_64.AppImage |
| Linux, tarball | Caret-Linux-x64.tar.gz |
Caret IDE isn't signed with a paid OS code-signing certificate yet (those run $99–$500/yr, which we'll invest in once Caret gains traction). The apps are completely safe. Your OS just shows a one-time warning because it can't see a signature. The most reliable fix is a single terminal command (this worked consistently across machines in testing, more dependable than clicking through the dialogs):
- Unzip the download and drag
Caret.appinto Applications. - Run this in Terminal, then open Caret normally:
xattr -dr com.apple.quarantine /Applications/Caret.app
- Download the installer.
- Open PowerShell and unblock it (this removes the "Mark of the Web" that triggers SmartScreen), then run the installer normally:
Unblock-File "$HOME\Downloads\Caret-Windows-UserSetup-x64.exe"
Using the portable zip instead? Unblock everything inside after extracting:
Get-ChildItem -Recurse "$HOME\Downloads\Caret-Windows-x64" | Unblock-File
No signing needed:
sudo dpkg -i Caret-Linux-x64.deb # Debian/Ubuntu
sudo rpm -i Caret-Linux-x64.rpm # Fedora/RHEL
chmod +x Caret-Linux-x86_64.AppImage && ./Caret-Linux-x86_64.AppImage # portableCaret is also published as an extension, so you can add it to an editor you already have, no new app to install:
- Open VSX (VSCodium, Cursor, Windsurf, Gitpod, code-server, …): open the Extensions panel, search "Caret", and install, or get it here: https://open-vsx.org/extension/caretAI/caret
- VS Code Marketplace: coming soon,
[marketplace link placeholder]
Microsoft VS Code uses its own marketplace (not Open VSX). Until the Marketplace listing is live, VS Code users can download the
.vsixfrom the Open VSX page above and install it via Extensions → ⋯ → Install from VSIX….
The IDE simply ships this same extension pre-installed and configured, so the experience is identical either way.
Caret splits your frontend into two layers that live in the same repo:
- A design layer, standardized to React and stored under
.caret/. This is where you design: pages, flows, shared components, and design tokens. Think "Figma frames as code," version-controlled in parallel with your app. - Your application layer, the app you actually ship, in any framework (React, Vue, Svelte, Angular, …). Caret stays unopinionated about it.
You design in the first layer, then sync into the second. The design layer's predictable structure is what unlocks the live canvas, visual editing, flow simulation, and design→app sync below.
Everything you design lives under .caret/ as plain React: pages in .caret/pages/, reusable pieces in .caret/components/ and .caret/layouts/, navigation in .caret/flows/, and design tokens in .caret/tokens/. Each page carries a small meta.json describing its title, type, states, and tags. Because the design layer is always React with a known shape, Caret can reason about your pages reliably no matter what framework your shipped app uses.
A guided wizard captures the foundations of your design system: a vibe descriptor, color (brand + neutral character + semantic), typography (Google Fonts + scale ratio), spacing, and radius. It shows a live preview of representative components updating as you tune each one. Pick the character, Caret generates the scale, you override what you want. The result is saved as namespaced JSON under .caret/tokens/ and injected into generation so every page stays visually consistent.
All your pages render on a zoomable, pannable canvas, a Figma-style overview of the whole product. The focused page runs as live, interactive React; the rest show as cached thumbnails so the canvas stays fast even with many pages. Click any page to mount it live, switch viewport presets (desktop / tablet / mobile) to check responsiveness, and pan back out to see how everything fits together.
Edit the rendered UI directly. Right-click an element to change its text, color, or image inline. The change is written back to the exact line of source and reflected instantly via hot-reload, no AI round-trip needed. For anything structural, choose "Edit with AI": Caret hands the model rich context about the element (its source location, component, and props) and applies the change. Element targeting is deterministic via stable data-caret-id attributes and AST-level source edits, so edits land precisely instead of guessing.
Edit with AI and all source/file edits are powered by Cline, the open-source coding agent Caret is built on. It makes the precise code changes behind the scenes.
Define user journeys as flow graphs in .caret/flows/*.flow.json, referencing pages by ID. Overlay flow connections on the canvas to see how pages link together, restructure a flow by dragging an edge (Caret offers to update the underlying navigation to match), and enter simulation mode to click through your app in a device frame as a real user would, jumping between page states (empty, loading, error, success) with a state selector.
When the design is ready, sync it into your real app. Caret tracks design changes against a git-based bookmark in .caret/sync-state.json, reads the current state of both layers, and produces a reviewable plan covering the UI translation plus any state, routing, or data changes the design implies. You review and accept; Caret applies the changes and advances the bookmark. Sync is one-way (design → app) and reversible. An undo restores your app files and rewinds the bookmark.
Caret is built on the open-source Cline coding agent, so beyond design it's a complete autonomous coding assistant: bring any API and model, run terminal commands, create and edit files with reviewable diffs, drive a browser, extend itself with Model Context Protocol (MCP) tools, and roll back to checkpoints, all human-in-the-loop, with you approving each step.
Caret IDE is a standalone, branded build of VS Code (OSS) produced via VSCodium, with the Caret extension bundled as a built-in. It's licensed under the MIT License; no Microsoft branding or telemetry is included, and the extension gallery is Open VSX. The Caret extension itself is Apache-2.0 and built on Cline.
Build & maintenance docs: README-CARET.md.