Que fait demo-maker ?
🎬 Créateur open-source de vidéos de démonstration produit pour sites web. Créez des vidéos de démonstration cohérentes à partir d'une configuration YAML avec Playwright — pas de clics manuels ni de ré-enregistrement.
Transformez des configurations de scénarios versionnées en vidéos de fonctionnalités produit cohérentes — reconfigurer, ré-exécuter, pas de ré-enregistrement manuel.
Pourquoi ?
Les interfaces utilisateur des produits changent constamment, donc les vidéos de démonstration deviennent obsolètes. Ré-enregistrer manuellement (ou demander à un agent de « faire une vidéo ») est lent, coûteux, et nécessite toujours une vérification humaine.
Avec demo-maker vous versionnez le parcours utilisateur en YAML : modifiez les étapes, ré-exécutez, obtenez le même MP4. Les fragments et les importations rendent les flux réutilisables ; vous ou un agent pouvez maintenir les scripts comme du code.
Effet secondaire : écrire des localisateurs stables révèle de véritables lacunes d'interface—étiquettes manquantes, noms accessibles en double, lignes de liste difficiles à cibler—vous corrigez donc souvent l'accessibilité tout en construisant la démo.
Prérequis
- Node.js 20+
- Playwright Chromium (
npx playwright install chromium) - ffmpeg dans le
PATH(ré-encodage MP4, découpagecut_video, audio de fond)
Installation
Publié sur npm sous @a1knowhow/demo-maker :
npm install -D @a1knowhow/demo-maker
npx playwright install chromium
Ou depuis un clone :
npm install
npx playwright install chromium
Le paquet fournit le source TypeScript et s'exécute via tsx. Les imports de bibliothèque (import … from "@a1knowhow/demo-maker") nécessitent une chaîne d'outils compatible TypeScript (tsx, Vitest, ou un bundler). Voir Sécurité pour les capacités d'exécution.
Démarrage rapide
npx demo-maker run examples/smoke.yaml --headless --fast
Étape par étape (installer → premier MP4 → enregistrer → fragments) : Démarrer · docs sur GitHub
Exemple de parcours
Tour d'introduction : ouvrez ce dépôt sur GitHub et parcourez démarrer → actions → localisateurs (importations, cartes de titre, légendes, rythme) :
npx demo-maker run examples/demo1-introduction.yaml
Parcours CI plus riche (Actions → exécution verte → tâche de test) :
npx demo-maker run examples/demo2-github-actions.yaml
(examples/demo1-introduction.yaml · examples/demo2-github-actions.yaml · examples/smoke.yaml pour une vérification minimale)
Documentation
Site : https://a1knowhow.github.io/demo-maker/
| Sujet | Site de documentation | Source |
|---|---|---|
| Index | site de documentation | docs/index.md |
| Démarrer | démarrer | docs/getting-started.md |
| CLI | CLI | docs/cli.md |
| Actions | actions | docs/actions.md |
| Localisateurs | localisateurs | docs/locators.md |
| Vidéo et rythme | vidéo et rythme | docs/video-and-pacing.md |
| Enregistrement | enregistrement | docs/recording.md |
| Réparation après changements IU | réparation | docs/repairing-scenarios.md |
Schéma typé : src/types.ts.
Commandes
| Commande | Objectif |
|---|---|
demo-maker run <scenario.yaml> | Exécuter un scénario (vidéo optionnelle) |
demo-maker check <scenario.yaml> | run avec --fail-fast --fast |
demo-maker record | Enregistrer en direct des actions en YAML |
demo-maker import | Convertir JSON DevTools / enregistreur → YAML |
demo-maker export-chapters | JSON de timing → lignes de chapitre YouTube |
Sécurité
Signalez les vulnérabilités en privé — voir SECURITY.md. N'ouvrez pas de tickets publics pour les bugs de sécurité.
Licence
Licence Apache 2.0 — voir LICENSE.
À propos d'A1KnowHow
demo-maker a été créé à l'origine pour réaliser des vidéos de démonstration pour A1KnowHow — workflows IA, organisation de documents, chat, recherche, et agents IA avec compétences et intégration d'outils MCP.