DemoCraft
An open-source toolkit for creating polished and reproducible product demos from real application workflows.
- TypeScript
- Playwright
- Remotion
- React
Challenge
Product demos are often fragile screen recordings that are difficult to reproduce after the application changes.
Approach
Describe a real browser workflow in TypeScript, execute it with Playwright, and render the captured sequence deterministically with Remotion. A discovery step turns a live page into a semantic map, so agents and people write the demo from the page's real structure instead of guessing selectors, and authentication profiles record private applications without putting credentials, cookies or tokens in the demo.
Outcome
An open-source workflow that makes polished product demos repeatable, reviewable, and version-controlled, with a reliability harness that runs the full workflow for demos created by agents.
Demo
Original MP4Architecture
Decisions and trade-offs
TypeScript is the only authoring source; JSON is an internal format
A second public JSON API would force users to keep two sources of truth in sync.
Future visual editors have to patch the TypeScript source instead of editing a JSON file of their own.
Capture is the truth and rendering only stages it
Playwright records what actually happened, and each step lasts the longer of its planned and actual time, so once the capture exists the renderer never has to ask the browser anything again.
The studio preview runs the same Remotion player as the final render
What the studio shows is what the MP4 will contain, with no divergence between preview and render.
Credentials stay out of every surface the UI can see
Those surfaces are visible to the UI and potentially to an LLM, so the first version supports only interactive login profiles.
Importing a saved browser session is deferred until there is a safe way to show who owns it.