Quickstart

This guide takes you from a fresh checkout to a rendered MP4 using the bundled demo-app example. You'll start the target app, capture it, and render a video.

What you need

The workspace installed and built — see installation.
Two terminals.

This page uses pnpm because it runs the example inside the Democraft source workspace. In an application that installed @democraft/cli, use npx democraft studio instead; the production Studio is included by the CLI.

Start the target app

The demo-app example is a small HTTP server that Playwright captures against. It must be running during capture (but not for preview/editing afterwards).

Terminal 1

pnpm --filter @democraft/example-demo-app start

You should see Demo app listening on http://localhost:4173.

The target app is only needed the first time, for capture. After that, Democraft reuses the captured files from .democraft/ and the app does not need to run. See capture-once.

Launch the Studio

The Studio is a Next.js app that previews, edits, and renders. It is launched through the CLI, which writes a meta.json so the Studio knows where the demo and its captures live.

Terminal 2

pnpm exec democraft studio examples/demo-app/src/demo.ts

The first launch runs Playwright against :4173 and captures. When it finishes, the Studio opens at http://localhost:3000 showing the captured timeline.

Browse the timeline. The bottom panel shows camera, overlay, and cursor tracks. The playhead and transport controls sit above it.
Preview. Press Space to play. Use ← / → to step frames, Home / End to jump to the ends.
Edit captions. Select a caption clip in the timeline to edit its text in the inspector — no re-capture needed.
Render. Click Render in the inspector to produce an MP4. Progress streams in the render queue.

Render from the CLI

To render without the Studio, use the CLI's end-to-end render command:

pnpm exec democraft render examples/demo-app/src/demo.ts -o out.mp4

The command validates, captures, resolves the timeline, and renders. Intermediate artifacts stay available under .democraft/ without becoming required CLI arguments.

-o, --output <path>    # where to write the MP4
--fps <number>         # frames per second (timeline)
--scale <number>       # render scale (try 2 for sharper output)
--crf <number>         # h264 quality (default 15, lower = better)
--port <number>        # studio port (default 3000)
--no-capture           # studio: reuse existing capture, fail if none

Inspect and validate

Before capturing, you can statically inspect or validate a demo without a browser:

pnpm exec democraft inspect examples/demo-app/src/demo.ts
pnpm exec democraft validate examples/demo-app/src/demo.ts

inspect prints a readable summary of the compiled IR. validate runs the diagnostics (DC001–DC105) and reports any issues.

Next steps

Read the concepts to understand demos, scenes, and targets.
Learn the SDK for the full authoring API.
Add audio without invalidating the browser capture.
Capture a private product with an authentication profile.
Understand the capture-once model for fast iteration.