Start here

One file — a .dreamrc at your dataset's root — renders every episode in the dataset. You never convert your data and never write visualization code: the file names which fields feed which views (a video wall, a line chart, a 3D scene, …), and the viewer does the rest. This page is the whole workflow; every step links to the page with the details.

What you can visualize

All views in one episode share a clock: hover any time-axis panel and every panel scrubs together.

The five steps

1. Match your data to a format

dataset.format names the reader. Look at your dataset root and match:

The first three need zero preparation — the point of the system is that a published dataset renders unmodified, with one file added. folder is the zero-conversion escape hatch for everything else. (HDF5 and RLDS/TFRecord have no reader yet; most publishers also ship a LeRobot export, which does.)

2. Drop in a minimal .dreamrc

Put this at the dataset root, swapping in your format:

version: 1
dataset:
  format: lerobot # lerobot | umi | mcap — or folder, with:
  episodes: auto # folder uses a glob instead: "episodes/*/"
views:
  - view: fields # step 3: prints what the dataset holds

3. Read the inventory

The fields view renders the dataset's own inventory — every field with the dtype, shape and names its container reported:

video    observation.images.ego                h264 1080×1920
tensor   observation.state          float32 [6]   names: shoulder_pan.pos, …
tensor   observation.keypoints_2d   float32 [21,3]
tensor   subtask_index              int64 [1]

You can also print the same listing from a shell, without deploying anything — the script ships in the viz-workspace repo, not on npm: clone it once and run from packages/viz/:

npx tsx scripts/check-dreamrc.mts hf:your-name/your-dataset

This listing is what you write bindings against. The viewer never guesses what a column means — you know [21,3] is a hand skeleton, and the next step is where you write that down.

4. Bind views

Replace fields with real views, naming which field goes where:

version: 1
dataset:
  format: lerobot
  episodes: auto
views:
  - view: videoStack
    cameras: ['observation.images.*'] # glob: every camera
    overlays:
      - { field: observation.keypoints_2d, as: keypoints }
  - view: lineChart
    series: [{ field: observation.state }] # one trace per named dim
  - view: timeline
    tracks: [{ field: subtask_index, as: segments }]

Three things carry the whole grammar:

• the slot (cameras, series, tracks, overlays, …) decides how a field is decoded;
• as: settles it when a slot could read the field two ways (a [21,3] tensor bound to overlays could be a skeleton or nothing — as: keypoints says which);
• globs (*) bind whole families at once.

Every mistake fails with the fix in the message (observation.state is float32 [6]; keypoints needs [J,2] or [J,3]) — write, validate, fix. The full grammar and every key: write the .dreamrc.

5. Iterate live

The gallery is a playground: pick the entry closest to your dataset, edit its .dreamrc in the left pane, and the render follows every valid edit. When your own dataset is reachable (a Hub repo, any HTTPS bucket), paste your draft over an entry, point its storage: at your data, and tune the layout against the real thing before you commit the file.

npx tsx scripts/check-dreamrc.mts ./draft.dreamrc    # decodes every binding

Where things are