Demo

A demo is the top-level unit of work in Democraft. It is a TypeScript module that exports a DemoDefinition created with defineDemo. One demo produces one video.

Structure

A demo has four parts:

import { defineDemo } from "@democraft/core";
import targets from "./targets";
 
export default defineDemo({
  id: "create-project-live",
  title: "Create a project live",
  source: {
    baseUrl: "http://localhost:4173",
    initialPath: "/dashboard",
  },
  targets,
  async run({ demo }) {
    await demo.scene("introduction", async (scene) => {
      await scene.goto("/dashboard");
      await scene.establish("dashboard");
      await scene.caption("Create a workspace in seconds.");
      await scene.hold("5000ms");
    });
  },
});

The id is a contract

The id is stable across edits. Democraft uses it (combined with the compiled step structure) to compute the IR content hash, which determines whether a re-capture is needed. If you rename the id, Democraft treats the demo as brand new and captures from scratch.

The run function

run receives { demo }. You call demo.scene(id, run) (or demo.scene(id, metadata, run)) to define scenes in order. The order of scene(...) calls is the order of scenes in the video.

Within a scene, you drive a DemoScene builder — see scenes.

The source

source.baseUrl is the origin Democraft navigates to. source.initialPath is optional; if omitted, the first scene's goto determines the starting path.

The target app at baseUrl must be running only during capture. After that, the Studio and renderer work from captured files.

One file, one demo

A demo.ts file exports exactly one demo via export default. To produce multiple videos, use multiple demo files. The CLI and Studio both take a single demo path as their argument.