EN GitHub npm Commencer

Studio

Un éditeur visuel pour la chronologie que votre agent a écrite. Parcourez la démo, cliquez sur un élément pour le cibler, déplacez une étape à un autre moment, puis enregistrez. Il tourne sur votre machine et modifie le même vistaro.config.json que lit la ligne de commande.

  1. Ce que vous pouvez faire

    • Parcourir un aperçu en direct. Lancez la démo ou sautez à n'importe quel moment, et voyez le curseur, le zoom et les sous-titres exactement comme ils seront rendus.
    • Choisir les cibles au clic. Cliquez sur un élément de l'aperçu au lieu d'écrire un sélecteur CSS.
    • Appliquer des effets prédéfinis. Ajoutez un clic, un zoom, une mise en évidence ou un fondu à une étape depuis une liste, sans retenir les champs.
    • Changer le minutage en déplaçant. Faites glisser une étape le long de la règle pour changer le moment où elle a lieu.
    • Vérifier et exporter. Lancez depuis l'éditeur la même validation et le même export que la ligne de commande.
    • Enregistrer. Studio écrit vistaro.config.json. C'est une vue sur le fichier, jamais une seconde copie : votre diff reste lisible.

    L'interface de Studio est en anglais pour l'instant.

  2. L'ouvrir

    Depuis votre projet, une fois Vistaro installé (voir Commencer) :

    terminal
    $ npx vistaro studio

    Studio démarre un petit serveur sur votre propre machine et affiche son adresse. Ouvrez-la dans votre navigateur. Lancer npx vistaro sans commande fait la même chose et ouvre le navigateur pour vous. Ctrl-C dans le terminal l'arrête.

  3. Charger votre projet

    Lancez-le sans dossier et vous obtenez un sélecteur de projets : toutes les démos trouvées dans l'espace de travail, la plus récemment modifiée en premier. Choisissez-en une pour l'ouvrir.

    Pour passer le sélecteur, nommez le dossier qui contient le index.html de la démo :

    terminal
    $ npx vistaro studio demo

    Si le dossier a un écran mais pas encore de chronologie, Studio propose les mêmes chronologies de départ que init-config, pour un guide ou pour une boucle. Vous ne savez plus ce que contient votre espace de travail ? npx vistaro demos liste chaque démo et la commande qui l'ouvre.

    Options

    • --config scenarios/export-word.jsonOuvre l'une des chronologies qui partagent un même écran.
    • --device mobilePrévisualise la version téléphone de la démo.
    • --port 4000Utilise un port fixe plutôt qu'un port aléatoire.

  4. Bon à savoir

    • L'agent d'abord, Studio ensuite. Laissez votre agent écrire la première version, puis ouvrez Studio pour régler le minutage et le cadrage à l'œil. Demandez ensuite à l'agent de reconstruire : il voit vos modifications dans le fichier.
    • Uniquement en local. Le serveur écoute sur 127.0.0.1 et rien n'est envoyé. Ni compte, ni clé d'API.
    • Une tâche à la fois. La vérification et l'export s'exécutent l'un après l'autre, car chacun pilote un vrai navigateur.