Was macht demo-maker?
🎬 Open-Source-Produktdemo-Videoproduzent für Websites. Erstellen Sie konsistente Website-Demo-Videos aus YAML-Konfigurationen mit Playwright – kein manuelles Klicken oder Neuaufnehmen.
Verwandelten Sie versionierte Szenarienkonfigurationen in konsistente Produkt-Feature-Videos – umkonfigurieren, neu ausführen, kein manuelles Neuaufnehmen.
Warum?
Produkt-UIs ändern sich ständig, daher veralten Demo-Videos. Manuelles Neuaufnehmen (oder einen Agenten bitten, „einfach ein Video zu machen“) ist langsam, teuer und erfordert dennoch eine menschliche Kontrolle.
Mit demo-maker versionieren Sie den Walkthrough als YAML: Schritte bearbeiten, neu ausführen, das gleiche MP4 erhalten. Fragmente und Importe machen Abläufe wiederverwendbar; Sie oder ein Agent können die Skripte wie Code warten.
Nebeneffekt: Das Schreiben stabiler Locators offenbart echte UI-Lücken – fehlende Labels, doppelte Zugänglichkeitsnamen, schwer anvisierbare Listenzeilen – sodass Sie oft die Barrierefreiheit verbessern, während Sie die Demo erstellen.
Voraussetzungen
- Node.js 20+
- Playwright Chromium (
npx playwright install chromium) - ffmpeg im
PATH(MP4-Neukodierung,cut_video-Splice, Hintergrundaudio)
Installation
Veröffentlicht auf npm als @a1knowhow/demo-maker:
npm install -D @a1knowhow/demo-maker
npx playwright install chromium
Oder aus einem Klon:
npm install
npx playwright install chromium
Das Paket enthält TypeScript-Quellen und wird über tsx ausgeführt. Bibliotheksimporte (import … from "@a1knowhow/demo-maker") benötigen eine TypeScript-fähige Toolchain (tsx, Vitest oder einen Bundler). Siehe Sicherheit für Laufzeitfähigkeiten.
Schnellstart
npx demo-maker run examples/smoke.yaml --headless --fast
Schritt-für-Schritt (Installation → erstes MP4 → Aufnahme → Fragmente): Erste Schritte · Dokumentation auf GitHub
Beispiel-Walkthrough
Einführungstour: Öffnen Sie dieses Repository auf GitHub und durchlaufen Sie Erste Schritte → Aktionen → Locators (Importe, Titelkarten, Untertitel, Taktung):
npx demo-maker run examples/demo1-introduction.yaml
Reicherer CI-Walkthrough (Aktionen → grüner Lauf → Test-Job):
npx demo-maker run examples/demo2-github-actions.yaml
(examples/demo1-introduction.yaml · examples/demo2-github-actions.yaml · examples/smoke.yaml für eine minimale Überprüfung)
Dokumentation
Website: https://a1knowhow.github.io/de/demo-maker/
| Thema | Dokumentationsseite | Quelle |
|---|---|---|
| Index | Dokumentationsseite | docs/de/index.md |
| Erste Schritte | Erste Schritte | docs/de/getting-started.md |
| CLI | CLI | docs/de/cli.md |
| Aktionen | Aktionen | docs/de/actions.md |
| Locators | Locators | docs/de/locators.md |
| Video und Taktung | Video und Taktung | docs/de/video-and-pacing.md |
| Aufnahme | Aufnahme | docs/de/recording.md |
| Reparatur nach UI-Änderungen | Reparieren | docs/de/repairing-scenarios.md |
Typisiertes Schema: src/types.ts.
Befehle
| Befehl | Zweck |
|---|---|
demo-maker run <szenario.yaml> | Szenario ausführen (optional mit Video) |
demo-maker check <szenario.yaml> | run mit --fail-fast --fast |
demo-maker record | Aktionen live in YAML aufnehmen |
demo-maker import | DevTools / Recorder JSON → YAML konvertieren |
demo-maker export-chapters | Timing-JSON → YouTube-Kapitelzeilen |
Sicherheit
Melden Sie Schwachstellen vertraulich – siehe SECURITY.md. Öffnen Sie keine öffentlichen Issues für Sicherheitsfehler.
Lizenz
Apache License 2.0 – siehe LICENSE.
Über A1KnowHow
demo-maker wurde ursprünglich zur Erstellung von Demo-Videos für A1KnowHow entwickelt – KI-Workflows, Dokumentenorganisation, Chat, Suche und KI-Agenten mit Fähigkeiten und MCP-Tool-Integration.