demo-maker

🎬 Open-source product demo video maker for websites. Create consistent website demo videos from YAML configuration with Playwright — no manual clicking or re-recording.

Turn versioned scenario configs into consistent product feature videos — reconfigure, re-run, no manual re-recording.

Why?

Product UIs keep changing, so demo videos go stale. Re-recording by hand (or asking an agent to “just make a video”) is slow, costly, and still needs a human check.

With demo-maker you version the walkthrough as YAML: edit steps, re-run, get the same MP4. Fragments and imports make flows reusable; you or an agent can maintain the scripts like code.

Side effect: writing stable locators surfaces real UI gaps—missing labels, duplicate accessible names, hard-to-target list rows—so you often fix accessibility while building the demo.

Requirements

• Node.js 20+
• Playwright Chromium (npx playwright install chromium)
• ffmpeg on PATH (MP4 re-encode, cut_video splice, background audio)

Install

Published on npm as @a1knowhow/demo-maker:

npm install -D @a1knowhow/demo-maker
npx playwright install chromium

Or from a clone:

npm install
npx playwright install chromium

The package ships TypeScript source and runs via tsx. Library imports (import … from "@a1knowhow/demo-maker") need a TypeScript-capable toolchain (tsx, Vitest, or a bundler). See Security for runtime capabilities.

Quick start

npx demo-maker run examples/smoke.yaml --headless --fast

Step-by-step (install → first MP4 → record → fragments): Getting started · docs on GitHub

Example walkthrough

Intro tour: open this repo on GitHub and walk getting-started → actions → locators (imports, title cards, captions, pacing):

npx demo-maker run examples/demo1-introduction.yaml

View logs

Richer CI walkthrough (Actions → green run → test job):

npx demo-maker run examples/demo2-github-actions.yaml

(examples/demo1-introduction.yaml · examples/demo2-github-actions.yaml · examples/smoke.yaml for a minimal check)

Documentation

Site: https://a1knowhow.github.io/demo-maker/

Typed schema: src/types.ts.

Commands

Security

Report vulnerabilities privately — see SECURITY.md. Do not open public issues for security bugs.

License

Apache License 2.0 — see LICENSE.

About A1KnowHow

demo-maker was created originally for building demo videos for A1KnowHow — AI workflows, document organisation, chat, search, and AI agents with skills and MCP tool integration.