A file format and canvas for drawing, design, and animation — right inside your code editor. Draw it or code it? Both.
Loading engine…
Built for both humans and AI agents — design and code in perfect sync.
Bidirectional sync between text and canvas. Plain text means git diff, code review, and merge just work.
Semantic IDs, constraint layout, ~6× fewer tokens than JSON. Agents read and write designs natively.
Styles, specs, and animations travel with every element. Reuse via style blocks and import.
Code, canvas, keyboard, Apple Pencil, touch, or AI — every input is first-class, and they all compose.
Each mode is designed for a different audience — but they edit the same file.
LLMs and coding agents read, write, and reason about .fd text directly. Uses ~6× fewer tokens than Excalidraw JSON.
@login_form)spec blocks with status + acceptance criteriaDesigners draw, drag, and resize on a fast, GPU-powered canvas inside VS Code. No code knowledge needed.
Real designs compared: FD vs Excalidraw JSON. Measured across 11 benchmark pairs.
| Design | FD Size | Excalidraw Size | Ratio |
|---|---|---|---|
| Login Form | 2.4 KB | 15.8 KB | 6.6× |
| Dashboard Card | 0.8 KB | 7.3 KB | 9.1× |
| Kanban Board | 3.7 KB | 18.9 KB | 5.1× |
| Org Chart | 4.1 KB | 15.5 KB | 3.8× |
| API Flowchart | 3.3 KB | 27.9 KB | 8.5× |
| Mobile Onboarding | 3.5 KB | 18.7 KB | 5.3× |
| Pricing Table | 4.4 KB | 24.5 KB | 5.6× |
| Network Topology | 4.6 KB | 28.6 KB | 6.2× |
| Data Dashboard | 4.6 KB | 36.0 KB | 7.8× |
| Design System | 5.7 KB | 28.4 KB | 5.0× |
| Wireframe eCommerce | 2.3 KB | 19.0 KB | 8.3× |
| Average | 6.5× |
Rust + WASM, from parser to pixel.
.fd text → Parser → SceneGraph → Emitter → .fd text
Winnow parser, DAG scene graph, constraint layout solver, and language server with hover, completions, and diagnostics.
SceneGraph → Vello + wgpu → GPU canvas
Hardware-accelerated 2D rendering via WASM. Hit testing, smart guides, and the bridge that powers this playground.
Canvas ↔ Text (bidirectional sync)
Draw or code — both update in <16ms. Select, rect, pen, text, eraser tools with full undo/redo.
Syntax highlighting everywhere, full canvas in VS Code.
| Editor | Syntax | LSP | Canvas |
|---|---|---|---|
| VS Code / Cursor | ✅ | — | ✅ |
| Zed | ✅ | ✅ | — |
| Neovim | ✅ | — | — |
| Sublime Text | ✅ | — | — |
| Helix | ✅ | — | — |
| Emacs | ✅ | — | — |
Native macOS, Windows, and Linux app — all the power of the playground, no browser needed.
Install the VS Code extension and start drawing in 30 seconds.