playwright-recast
Transform Playwright traces into stunning demo videos — automatically.
Website · Documentation
Your Playwright tests already capture everything — traces, screenshots, network activity, cursor positions. playwright-recast turns those artifacts into polished, narrated product videos with a single fluent pipeline.
https://github.com/user-attachments/assets/418d996d-2e18-4ae8-9ccc-3e5161dc7af8
Why?
Recording product demos is painful. Every UI change means re-recording. Manual voiceover and subtitling takes hours. Timing is always off.
playwright-recast flips this:** your Playwright tests become your video source.** Write tests once, regenerate polished videos on every deploy.
import { Recast, ElevenLabsProvider } from 'playwright-recast'
await Recast
.from('./test-results/trace.zip')
.parse()
.speedUp({ duringIdle: 3.0, duringUserAction: 1.0 })
.subtitlesFromSrt('./narration.srt')
.voiceover(ElevenLabsProvider({ voice: 'daniel' }), { normalize: true })
.render({ format: 'mp4', resolution: '1080p' })
.toFile('demo.mp4')
That's it. Trace in, polished video out.
Features
- Fluent pipeline API — Chainable, immutable, lazy-evaluated. Build complex pipelines that read like English.
- Trace-based processing — Parses Playwright trace.zip (actions, screenshots, network, cursor positions). No manual recording needed.
- Smart speed control — Automatically speeds up idle time, network waits, and navigation while keeping user actions at normal speed.
- TTS voiceover — Generate narration with OpenAI TTS, ElevenLabs, or Amazon Polly. Properly timed with silence padding.
- Subtitle generation — SRT, WebVTT, and ASS output. Import external SRT or generate from trace BDD step titles.
- Styled subtitle burn-in — Configurable font, size, color, background box with opacity, padding, position. Smart punctuation-based chunking for single-line display.
- playwright-bdd support — First-class integration with playwright-bdd Gherkin steps. Doc strings become voiceover narration.
- Click highlighting — Animated ripple effect at click positions with optional click sound. Configurable color, opacity, radius, duration.
- Cursor overlay — Animated cursor appears before each click, moves to the click position with ease-out animation, then disappears. Bundled arrow cursor or custom image.
- Animated zoom with easing — Auto-zoom uses customizable easing functions (ease-in-out, ease-out, cubic-bezier, or custom JS functions) with smooth zoom-to-zoom panning.
- Frame interpolation — Smooth out choppy browser recordings with ffmpeg minterpolate. Blend, duplicate, or motion-compensated modes with multi-pass support.
- Step helpers —
narrate(), highlight(), zoom(), pace() — importable helpers for Playwright step definitions. narrate/highlight/zoom write marker steps directly into the trace zip, so the pipeline picks them up automatically via subtitlesFromTrace() (no report.json or extra pipeline calls needed).
- Voiceover-driven freezes — When a TTS narration is longer than its visual window, the renderer holds the current frame until the audio finishes; overlays freeze with it, click sounds shift to match.
- Soft (embedded) subtitle track —
render({ embedSubtitles: true }) muxes a toggleable subtitle track into the container (mov_text for mp4, webvtt for webm).
- Background music — Add background music with auto-ducking during voiceover, looping, and fade-out. Covers intro/outro.
- Intro/outro — Prepend/append branded video clips with smooth crossfade transitions. Audio preserved.
- MCP server — AI-assisted video creation via Model Context Protocol. Record, analyze, and render through any MCP-compatible client (Claude Code, etc.).
- recast-studio — Record browser sessions via Playwright Codegen, then generate videos with a Claude Code skill. No code required.
- CLI included —
npx playwright-recast -i trace.zip -o demo.mp4 — no code needed.
- Zero lock-in — Every stage is optional. Use just the trace parser, just the subtitle generator, or the full pipeline.
Quick Start
Install
npm install playwright-recast
# or
bun add playwright-recast
System requirement: ffmpeg and ffprobe must be on your PATH.
# macOS
brew install ffmpeg
# Ubuntu
sudo apt install ffmpeg
Trace inputs. Two layouts work:
