Skip to content

The Demo Document

The demo document is one canvas that shows most of what Field does at once. To open it, use the demo_document starting point. The film on this site's home page is a tour of it.

On it:

  • Connected boxes. palette pushes a value, petals, down to three boxes connected beneath it: propDown declares a value that every box connected beneath this one can read (Properties That Re-run Boxes). Change it and run palette again, and all three run again with the new value. sketch holds two more boxes nested inside it, in its nested panel. See Connecting Boxes.
  • 3D and 2D in output panels. gyroid shows a marched gyroid surface and its open rims in a three.js view you can orbit (3D Output). editable flower shows FLines (Field's line-and-curve type) you can edit: drag a point and the curve changes (FLine Examples).
  • Vulkan, streamed into the page. renderer owns a Vulkan window. streamed spiral draws a turning spiral with it and shows the frames in its own output panel (Graphics in an Output Area). probed particles runs a compute shader over 100,000 particles, and a Field probe plots how far each one moved. draw particles draws them in the window.
  • Time. brightness is a keyframe curve, played in a loop with its playhead running and a meter it drives (Keyframe Editor). metrics draws a histogram, a history and a summary beside its own lines of code when its editor is open (Visualizers). t is a time slider, a tall, narrow box standing beside a row of boxes named cue 1, cue 2 and so on. Drag it sideways and it starts each box it enters and stops each one it leaves.
  • Drawing. notes draws circles, arrows, frames and labels on the drawing layer, over the boxes they point at (Drawing and Notation). alt/option-D turns the layer on, so you can draw on it by hand.

The film

The film starts on the whole document, then visits each part of it and uses it: it drags a box and its connection follows, orbits the gyroid, pulls two points of the flower, watches the spiral and the probe, adds and drags keys on the curve, scrubs the time slider across the cues, draws a loop on the drawing layer, and launches metrics with its editor open. It ends on the whole document again, so it can play as a loop.

Making it again

The document is built from nothing by an operation transcript, demo_document.yaml, so it can be made again at any time. From a Field checkout, the backdoor replays it into a new document:

uv run --project . --group backdoor python tools/field_backdoor.py --json \
  --command 'open demo_document --create' \
  --command 'macro write demo_document --file dev_docs/agents/transcripts/demo_document.yaml' \
  --command 'macro run demo_document'
Agents: how the film is made

The feel benchmark times the same replay, as its demo-document scenario (dev_docs/testing/FEEL_BENCHMARKS.md).

The film is a drive capture: the runner opens the capture page in this checkout's Electron (playwright-open --electron), runs the transcript, and records the window in real time while the script runs. The camera moves are window.moveCanvasCamera calls, 40 ms apart, eased in the script; there is no frame-by-frame clock as there is for a canvas flight, because the gestures (drags, double-clicks, drawing) have to happen in real time. A box the script presses on becomes selected and opens its editor, so the script clicks empty canvas afterwards to close it again. The home page shows the film behind a veil, tilted in CSS (.field-homepage-video in stylesheets/extra.css); the file itself is the flat window.

Field's documentation build makes the film. It replays demo_document.yaml into an empty document in this checkout's Field desktop app, then runs the script above, which moves the camera and the mouse the way a person would, while Field records the window. The build only films it on macOS with FIELD_DOCS_CAPTURE_PROFILES=macos-electron, because the spiral's frames only reach a page in Field's desktop app. On any other machine the build keeps the film it already has.

FIELD_DOCS_CAPTURE_PROFILES=macos-electron FIELD_DOCS_RUNNER_MODE=always \
  uv run --project . --group docs python tools/build_zensical_docs.py --page demo_document.md