Design as Code

A file format and canvas for drawing, design, and animation — right inside your code editor. Draw it or code it? Both.

⚡ Install Extension ★ View on GitHub
5× fewer tokens than SVG · 6.5× smaller than Excalidraw · 370 tests passing
Code
Design
Ready
100%
—
Position & Size
Appearance

Initializing WASM engine…

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

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 Form2.4 KB15.8 KB6.6×
Dashboard Card0.8 KB7.3 KB9.1×
Kanban Board3.7 KB18.9 KB5.1×
Org Chart4.1 KB15.5 KB3.8×
API Flowchart3.3 KB27.9 KB8.5×
Mobile Onboarding3.5 KB18.7 KB5.3×
Pricing Table4.4 KB24.5 KB5.6×
Network Topology4.6 KB28.6 KB6.2×
Data Dashboard4.6 KB36.0 KB7.8×
Design System5.7 KB28.4 KB5.0×
Wireframe eCommerce2.3 KB19.0 KB8.3×
Average 6.5×

Under the Hood

Rust + WASM, from parser to pixel.

Core Engine

.fd text → Parser → SceneGraph → Emitter → .fd text

Winnow parser, DAG scene graph, constraint layout solver, and language server with hover, completions, and diagnostics.

GPU Renderer

SceneGraph → Vello + wgpu → GPU canvas

Hardware-accelerated 2D rendering via WASM. Hit testing, smart guides, and the bridge that powers this playground.

Canvas Editor

Canvas ↔ Text (bidirectional sync)

Draw or code — both update in <16ms. Select, rect, pen, text, eraser tools with full undo/redo.

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