DemoDSL
Define product demos in YAML or JSON. Browser automation, voice narration, visual effects, video editing — all from a single config file.
See it in action
This video was generated automatically by DemoDSL — running demodsl run demo_site.yaml against this very documentation site.
metadata:
title: "DemoDSL Documentation Site Tour"
voice:
engine: "gtts"
voice_id: "en"
subtitle:
enabled: true
style: "cinema"
speed: "normal"
scenarios:
- name: "Landing Page Tour"
url: "https://fran-cois.github.io/demodsl/"
browser: "webkit"
viewport: { width: 1280, height: 720 }
avatar:
enabled: true
provider: "animated"
style: "clippy"
steps:
- action: "navigate"
url: "https://fran-cois.github.io/demodsl/"
narration: "Welcome to DemoDSL..."
wait: 3.0
- action: "scroll"
direction: "down"
pixels: 600
narration: "Discover the Quick Start section..."
# ... 5 more steps
pipeline:
- generate_narration: {}
- composite_avatar: {}
- burn_subtitles: {}
- edit_video: {}Quick Start
Install from PyPI
pip install demodslInstall browser engine
playwright install chromiumYAML template
demodsl initJSON template
demodsl init -o demo.jsonValidate config
demodsl validate demo.yamlRun demo
demodsl run demo.yamlEverything you need for automated demos
From browser capture to final export — seven integrated phases in one pipeline.
Browser Automation
Playwright-powered capture with Chrome, Firefox, and WebKit. Navigate, click, type, scroll — all from YAML or JSON.
Voice Narration
ElevenLabs TTS integration with automatic duration sync. Narration stretches video to match audio.
18 Visual Effects
Spotlight, confetti, glitch, neon glow, vignette, and more. Applied in real-time via JS injection or post-processing.
Video Composition
MoviePy + FFmpeg video composition with intro/outro, transitions, effects, and multi-format export.
Audio Mixing
Background music with smart ducking. Volume drops during narration, normalizes during silence.
11 Subtitle Styles
TikTok, karaoke, cinema, typewriter, bounce, and more. Synced to narration with word-level timing.
Multi-format Export
MP4, WebM, GIF output. Social media presets for YouTube, Instagram, and Twitter with auto-crop.
Declarative by design
Your entire demo is defined in a single YAML or JSON file. No scripts, no code — just declare what you want.
metadata:
title: "My Product Demo"
voice:
engine: "elevenlabs"
voice_id: "josh"
subtitle:
enabled: true
style: "tiktok"
speed: "fast"
scenarios:
- name: "Quick Tour"
url: "https://myapp.com"
browser: "chrome"
viewport: { width: 1920, height: 1080 }
steps:
- action: "navigate"
url: "https://myapp.com"
narration: "Welcome to our product!"
effects:
- type: "spotlight"
duration: 2.0
- action: "click"
locator: { type: "css", value: "#get-started" }
narration: "Click to get started."
effects:
- type: "confetti"
duration: 1.5
pipeline:
- generate_narration: {}
- edit_video: {}
- burn_subtitles: {}
- mix_audio: {}
- optimize:
format: "mp4"
codec: "h264"
output:
filename: "demo.mp4"
formats: ["mp4", "webm", "gif"]Then run: demodsl run demo.yaml
Architecture
Built on 5 proven design patterns for modularity and extensibility.
Abstract Factory
Voice, Browser, and Render providers instantiated via factory pattern
Command
Navigate, Click, Type, Scroll, WaitFor, Screenshot — each with execute() + describe()
Chain of Responsibility
8 stages with critical/optional error handling. Critical failure stops the chain.
Registry + Strategy
18 effects in 2 registries — browser JS injection and post-processing via MoviePy
Builder
Progressive assembly: intro → segments → transitions → watermark → outro → build(). Powered by MoviePy + FFmpeg.
Pipeline Stages
restore_audiooptionalrestore_videooptionalapply_effectsoptionalgenerate_narrationcriticalrender_device_mockupoptionaledit_videocriticalmix_audiocriticaloptimizecritical