Democraft markDemocraft GitHub

Open-source demos as code

Turn real product workflows into repeatable demo videos.

Write the flow once in TypeScript. Democraft runs it against your real app with Playwright, captures every step, then uses Remotion to render a polished MP4 with camera direction, captions, audio, authenticated sessions, and React visuals.

Build your first demo See the source

How the pieces work together

One demo definition controls the entire video.

Start with the browser actions a user should see. Add authentication, audio, and React visuals to that same definition. Democraft keeps the browser capture separate from presentation, so you can change the edit without repeating the product flow.

  1. Define
    Describe the user journey in demo.ts

    Targets, scenes, auth, audio, and visuals stay reviewable in source control.

  2. Capture
    Playwright runs your real application

    It restores the session, performs the flow, and records reusable browser evidence.

  3. Render
    Remotion produces the final MP4

    Camera, cursor, captions, sound, and React overlays become a repeatable video.

demo.ts / workflow

Describe exactly what the viewer should see

Tell Democraft which app to open and which user actions to perform. Each scene becomes a readable, version-controlled part of the demo.

Read the guide
acme-app / demos
import { byTestId, defineDemo } from "@democraft/core";

export default defineDemo({
  id: "publish-release",
  title: "Publish a release",
  source: { baseUrl: "http://localhost:3000" },
  targets: {
    release: byTestId("release-name"),
    publish: byTestId("publish-release"),
  },
  async run({ demo }) {
    await demo.scene("publish", async (scene) => {
      await scene.goto("/releases/new");
      await scene.fill("release", "Summer launch");
      await scene.click("publish");
      await scene.focus("publish");
      await scene.caption("The release is live.");
    });
  },
});
demo.ts / authentication

Open private pages without putting secrets in code

Attach a local profile ID to the same demo. Democraft validates the saved browser session before capture; passwords, tokens, and cookies never enter demo.ts.

Read the guide
demo.ts + terminal
authentication: {
  profileId: "auth_01arz3ndektsv4rrffq69g5fav",
},

// One-time local setup:
// democraft auth create --name "Demo admin" \
//   --origin https://app.example.com \
//   --validation-url /dashboard
// democraft auth login <profile-id>
// democraft auth validate <profile-id>
demo.ts / audioTracks

Mix music and sound without re-running the app

Add audio tracks to the same definition. Sound is composed during render, so timing, volume, loops, and fades can change while the browser capture stays reusable.

Read the guide
demo.ts
audioTracks: [
  {
    id: "launch-score",
    src: "./assets/launch.mp3",
    kind: "music",
    volume: 0.24,
    loop: true,
    fadeIn: "800ms",
    fadeOut: "1s",
  },
  {
    id: "published",
    src: "./assets/chime.wav",
    kind: "sfx",
    startAt: "12.5s",
    volume: 0.7,
  },
],
demo.ts / visuals

Place type-safe React visuals on the timeline

Register a Remotion-compatible component once, then call it from a scene. TypeScript checks the renderer ID and props before the video is rendered.

Read the guide
acme-app / src
visuals: {
  "local.launch-title": defineVisual(SoftBlurIn),
},
async run({ demo }) {
  await demo.scene("intro", async (scene) => {
    await scene.visual(
      "local.launch-title",
      { text: "Ready to ship", speed: 1.2 },
      { duration: "1.5s" },
    );
  });
}

The pipeline

From product flow to a repeatable render.

  1. 01

    Define

    Declare targets and scenes in the TypeScript file that belongs with your product.

  2. 02

    Capture

    Playwright runs the real flow and records screenshots, a video, a trace, and environment metadata.

  3. 03

    Direct

    Democraft resolves the capture into a timeline for camera, cursor, transitions, captions, callouts, and visuals.

  4. 04

    Render

    Remotion turns that resolved timeline and its captured assets into a repeatable MP4.

The comparison

Less take management. More product iteration.

WorkflowManual recordingDemocraft
Source of truthA recorded take A typed demo definition
Browser stateReplayed by hand Executed by Playwright
Presentation editsRecord or edit again Reuse compatible captures
ReviewWatch the output Review the workflow in code
AutomationManual orchestration CLI capture and render

Local workflow

Capture when the product is running. Iterate when it isn’t.

Compatible captures can be reused for presentation-only edits. The local Studio provides a frame-accurate preview and render workflow without turning the landing page into a fake interface.

npx democraft studio examples/demo-app/src/demo.ts

FAQ

Designed for a developer workflow.

Is Democraft a screen recorder?

No. It executes a declared browser workflow, keeps the resulting capture as evidence, and renders the presentation from that result.

How does Remotion fit in?

Remotion renders the resolved timeline into MP4, including captured media, camera motion, cursor, captions, callouts, and custom visuals.

Can presentation changes reuse a capture?

Yes, when the capture remains compatible with the definition. This is why capture and rendering are separate stages.

Can AI agents author demos?

Yes. The public API is typed TypeScript, designed to be generated, validated, read, and reviewed by both agents and developers.

Stop re-recording demos.

Start versioning the experience that explains your product.

Start with documentation Open GitHub