Fast Draft — Design as Code

Why Fast Draft?

Built for both humans and AI agents — design and code in perfect sync.

🤖

AI-Friendly

Compact text DSL — ~5× fewer tokens than SVG. LLMs read, write, and reason about entire UIs in a single prompt.

↔️

Two-Way Sync

Edit code or canvas — the other updates instantly in <16ms. One source of truth, zero conflicts.

📋

Specs Built In

Attach requirements, status, and acceptance criteria directly to visual elements with spec blocks.

🎨

GPU Canvas

Vello + wgpu rendering engine. Smart guides, resize handles, sketchy mode, animations — Figma-grade tools.

🔀

Git-Friendly

Plain text format — git diff, git merge, and code review all work naturally.

⚡

6 Editors

VS Code, Cursor, Zed, Neovim, Sublime, Helix, Emacs. Canvas in VS Code, syntax highlighting everywhere.

Two Modes, One File

Each mode is designed for a different audience — but they edit the same file.

🤖 Code Mode

The AI Interface

LLMs and coding agents read, write, and reason about .fd text directly. Uses ~5× fewer tokens than Excalidraw JSON.

Semantic node names (@login_form)
Constraint-based layout (no pixel coords)
Structured spec blocks
Named colors and property aliases

🎨 Canvas Mode

The Human Interface

Designers draw, drag, and resize on a fast, GPU-powered canvas inside VS Code. No code knowledge needed.

Smart guides and resize handles
Drag-and-drop animations
Floating toolbar and properties panel
Touch and Apple Pencil support

The Numbers

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×

Under the Hood

Five Rust crates, one TypeScript extension, zero compromises.

┌─────────────────────────────────────────────────────┐
│  .fd file (text DSL)                                │
├─────────────────────────────────────────────────────┤
│  fd-core        Parser ↔ SceneGraph (DAG) ↔ Emitter │
│                  Layout solver (constraints → coords) │
├─────────────────────────────────────────────────────┤
│  fd-render      Vello + wgpu → GPU canvas           │
│                  Hit testing (point → node)           │
├─────────────────────────────────────────────────────┤
│  fd-editor      Bidi sync engine                    │
│                  Tools (select, rect, pen, text)      │
│                  Undo/redo command stack               │
├─────────────────────────────────────────────────────┤
│  tree-sitter-fd Tree-sitter grammar for editors     │
├─────────────────────────────────────────────────────┤
│  fd-vscode      VS Code Custom Editor (WASM webview)│
│  editors/       Zed, Neovim, Sublime, Helix, Emacs  │
└─────────────────────────────────────────────────────┘

fd-core

Data model, winnow parser, emitter, constraint layout solver

fd-render

Vello/wgpu 2D renderer + hit testing

fd-editor

Bidirectional sync, tool system, undo/redo, input abstraction

fd-wasm

WASM bridge — powers this playground and the VS Code extension

fd-lsp

Language server — hover, completions, format, diagnostics

Editor Support

Syntax highlighting everywhere, full canvas in VS Code.

Editor	Syntax	LSP	Canvas
VS Code / Cursor	✅	—	✅
Zed	✅	✅	—
Neovim	✅	—	—
Sublime Text	✅	—	—
Helix	✅	—	—
Emacs	✅	—	—

Ready to design as code?

Install the VS Code extension and start drawing in 30 seconds.

Install Extension Star on GitHub