Open draft · .vmd
An intent-readable visual-lossless format: AI edits the compact source layer, while the renderer uses the replay layer to restore the browser output.
Live shape
VMD treats the source as the editable AI surface and replay as the browser restoration contract. HTML and CSS remain the output layer, not the only authoring layer.
@doc "Pulse Analytics Overview" {
spec: vmd@0.1
fidelity: visual-lossless
intent: analytics-dashboard
surfaces: browser-page deck pdf
}
@lock {
renderer: vmd-web@0.3.0
renderer-hash: sha256:renderer-placeholder
dictionary: dashboard-system@1.0.0
dictionary-hash: sha256:dictionary-placeholder
browser: chromium
viewport: 1440x1200
dpr: 1
font-pack: inter@4.0.0
asset-map-hash: sha256:asset-placeholder
source-hash: sha256:source-placeholder
render-hash: sha256:render-placeholder
}
@edit_state {
source: clean
replay: current
dirty: none
on-source-edit: mark affected slots stale,
...Source principles
The browser already renders. The missing layer is a compact source that exposes intent and slots while replay data preserves exact output.
A VMD file can claim visual-lossless only after the renderer restores the locked visual output.
Intent, tokens, frames, and components keep the editable surface smaller than generated HTML.
Lock, recipes, replay, residual, and raw fallback preserve what slots cannot express.
The reference renderer produces browser-native HTML/CSS from a locked source and replay contract.
AI can ignore residual payloads while still respecting the slots and limits they affect.
VMD is not a styled Markdown dialect. It is a restorable visual document container with an AI-readable editing path.
Visual-lossless anatomy
That separation is the point: the AI edits intent and slots, while the renderer uses replay data to recover browser-level detail.
Audience, purpose, editable slots, and constraints for AI editing.
Frames, components, tables, metrics, and visual patterns that map to renderer recipes.
Controlled style values that can be edited without rewriting the page.
Lock, residual, and fallback data used to restore the original visual output.
Use it today
Open .vmd in the playground, render it from the CLI, load the Chrome polyfill, or preview it inside VS Code.
Install and render
The npm package is named vmd-format; the installed binary is vmd.
npm install
node bin/vmd.mjs validate samples/source-layer-brief.vmd
node bin/vmd.mjs render samples/source-layer-brief.vmd --out dist/source-layer-brief.html
node bin/vmd.mjs gallery --out dist/siteChrome renders local or web-served .vmd files. VS Code provides highlighting, snippets, diagnostics, and live preview.
npm run package:chrome
npm run package:vscode
npm run test:extensionsSamples