Most design files were made for one app to save and load. A .vd file was made for a model to
write, and for a person to read. It is plain text, one element per line, and it is the
design: there is no separate project file behind it.
version 4
kind design
title "Launch hero"
$gap = 24
$paper = #ffffff
$accent = #5b5bd6
frame page w=1280 h=720 background=paper
rect hero.bg x=$gap y=$gap w=(100% - $gap * 2) h=320 fill=accent radius=20
text hero.title x=(@hero.bg.left + 40) y=(@hero.bg.top + 40) w=680 h=48 size=40 weight=700 fill=paper
"An open document format"
What makes it different
Relationships, not coordinates. w=(100% - $gap * 2) stays that formula in the file.
Change $gap and everything that reads it moves, in the file as well as on the canvas. Models
are reliable describers and unreliable calculators, so the format asks them to describe and
leaves the arithmetic to the runtime.
Edits are patches. A change is a few lines in the edit dialect, such as set $gap = 40,
not a regenerated document. That keeps an assistant’s edits fast, cheap and easy to review.
Small, and it streams. A design is 45% of the size of the same design as JSON. A finished line is a finished element, so the canvas fills in while the model is still writing.
Names you can guess. Elements are addressed by role, like hero.title, not by a random
id, so an agent can change what it means without reading the whole file again.
It carries everything. Fonts, images and music travel inside the file, so one file renders anywhere with nothing else to fetch.
Readable wherever you work
- Diff it, review it and keep it in git like code.
- Preview it in VS Code, Cursor and github.dev, with problems shown as you type.
- Draw it in Markdown: a
```vdfence in a README, a docs site or Obsidian becomes the design (Designs in Markdown). - Export a .vd.svg, an SVG that shows everywhere and still opens as the design.
- Export PNG, JPEG, WebP, SVG, PDF, Illustrator, HTML, PowerPoint, GIF and, from the app, MP4.
Open to implement
The specification is open under CC BY 4.0. You need no permission to read
or write .vd files in your own software, open or closed. The full reference is in
the docs, and llms-full.txt teaches any model the
whole format in one file.