Stately
Stately · Programmation
Stately est un éditeur visuel de machines à états pour concevoir la logique d'une application, générer des flux par IA et exporter du code XState. Il vise les équipes qui veulent un schéma et du code synchronisés.
À propos de Stately
About
Qu'est-ce que Stately
Stately est un outil qui s'ouvre dans le navigateur et sert à dessiner des machines à états et des statecharts, ces schémas qui décrivent le passage d'une application d'un état à un autre. L'entreprise maintient aussi XState, la bibliothèque JavaScript open source qui exécute ces schémas comme du code réel. Stately Studio est le produit payant construit autour : un éditeur, un simulateur et un ensemble de fonctions d'export et de synchronisation. Il a démarré comme visualiseur XState et sert aujourd'hui d'outil de statecharts à des équipes entières.
Le problème visé, c'est la divergence. Le schéma du fichier de design dit une chose, le code en dit une autre, et personne ne le remarque avant le rapport de bug. Stately garde une seule machine comme source et la projette dans deux directions : une image lisible par l'équipe et du TypeScript exécutable par l'application. Vous modifiez le dessin, le code exporté suit.
Trois limites dessinent le public. Il faut un minimum d'aisance avec la notion de machine à états, car événements, gardes et états imbriqués forment le vocabulaire quotidien. L'offre gratuite s'arrête à deux projets publics et trois machines. Et la génération par IA est signalée comme expérimentale : traitez sa sortie comme un premier jet relu par un humain.
Premiers pas
- Ouvrez state.new et vous arrivez dans l'éditeur Stately Studio, sans installation. Connectez-vous au moment de sauvegarder.
- Construisez le flux. Déposez des états sur le canevas, reliez-les par des événements et nommez les transitions avec des mots simples. Vous pouvez aussi écrire une description et laisser le générateur de flux par IA proposer une première version.
- Passez en mode Simulate et cliquez sur les événements. Vous voyez quelles transitions se déclenchent et où la machine se bloque.
- Exportez la machine en JavaScript ou TypeScript, ou branchez GitHub pour que le fichier se synchronise avec votre dépôt.
- Invitez l'équipe avec une offre Team, passez la visibilité du projet en privé et attribuez des rôles d'éditeur ou de lecteur.
Informations sur le produit
Aperçu des tarifs, des plateformes compatibles et des performances de Stately.
Idéal pour
Les utilisateurs, tâches et cas d'usage où cet outil convient le mieux.
Utilisateurs
- Développeurs frontend
- Product managers et designers
- Ingénieurs QA
- Équipes plateforme avec des flux partagés
Tâches
- Modéliser une inscription ou un paiement en plusieurs étapes
- Monter une machine à partir d'un texte
- Documenter la logique d'un traitement backend
- Auditer du code d'état existant
Cas d'usage
- Un planning de sprint où l'équipe débat des cas limites
- Une revue avec des parties prenantes qui réclament quelque chose de cliquable
- Un nettoyage avant de refactoriser une vieille fonction
Fonctionnalités clés
Éditeur par glisser-déposer avec modes Design et Simulate
Le canevas, c'est le produit. Vous placez des états, tracez des transitions et modifiez le nom des événements sur place, avec un panneau latéral pour les gardes, les actions et les descriptions. Design sert à construire, Simulate à parcourir la machine événement par événement. Aucun des deux n'impose d'écrire du code d'abord, et c'est pourquoi un designer peut contribuer au même fichier qu'un ingénieur.
Générer avec l'IA
Décrivez un flux en deux phrases et Stately construit une machine avec états, événements et transitions. Vous pouvez aussi sélectionner une machine existante et demander une modification, comme l'ajout d'une branche de nouvelle tentative. Chaque consigne reste dans un historique et chaque génération sauvegarde une version automatique que vous rouvrez à volonté. La fonction est expérimentale, le quota mensuel est limité et, lors d'une modification, la définition de la machine part chez OpenAI.
Prototypes exécutables et simulation en direct
La simulation n'est pas un diaporama. Stately génère une interface React pour la machine, donc le relecteur clique sur de vrais boutons et déclenche de vraies transitions. Les comptes Pro ajoutent la simulation en direct, qui exécute la machine pendant que vous éditez. Quand une équipe lit mal un schéma à répétition, c'est le moyen le plus rapide de montrer ce qui se passe si quelqu'un annule en pleine phase de paiement.
Export XState et synchronisation avec le code
Toute machine s'exporte en JavaScript ou TypeScript exécuté par XState, la bibliothèque open source maintenue par Stately. Aucun verrouillage : le code tourne dans un script Node, une application React ou un worker backend. Sur les offres payantes, vous branchez GitHub ou utilisez la CLI pour synchroniser les machines avec un dépôt, et les changements circulent dans les deux sens entre le dessin et le code.
Chemins de test, versions et documentation vivante
Les comptes Pro génèrent des chemins de test, qui listent les itinéraires possibles d'une machine pour que le testeur sache quoi essayer. L'historique des versions conserve des instantanés restaurables, et l'éditeur exporte les flux en récits markdown, diagrammes Mermaid ou JSON. Ajoutez des cadres Figma et le schéma emporte le contexte de design avec lui.
Projets, équipes et contrôle d'accès
Les projets regroupent des machines liées et décident qui les voit. Les publics apparaissent sur la page Discover, les non listés s'ouvrent par lien et les privés restent dans l'équipe. Les rôles couvrent propriétaire, admin, éditeur et lecteur. Enterprise ajoute l'authentification unique, les journaux d'audit, l'hébergement dédié et la possibilité d'intégrer Stately dans votre propre application.
Avantages et inconvénients
Avantages
- Le schéma et le code viennent de la même source, et l'export tourne sur XState : vous pouvez partir sans réécrire votre application.
- La génération par IA règle le problème de la page blanche, et l'historique des consignes avec les versions automatiques facilite la comparaison des brouillons.
- L'offre gratuite inclut l'export de code et l'extension VS Code, de quoi tester le flux sur une vraie fonctionnalité.
- Le mode Simulate repère impasses et états inaccessibles avant la revue de code.
- Les contrôles Enterprise couvrent SSO, audit et hébergement dédié, un point qui compte pour les équipes réglementées.
Inconvénients
- L'offre gratuite s'arrête à deux projets publics et trois machines, et chaque fork compte dans la limite. Le travail privé exige Pro, 39 $/mois ou 33 $/mois en annuel.
- La génération par IA est expérimentale et soumise à quota. En modifiant un flux existant, la définition de la machine sort de votre compte vers OpenAI, ce qui posera question à certaines équipes sécurité.
- L'outil suppose une compréhension des statecharts. Un PM déplace des boîtes, mais les états imbriqués et parallèles demandent une ou deux séances.
- L'accès programmatique passe par la synchronisation GitHub et la CLI. Si vous voulez une API REST pour les données de projet, vérifiez la disponibilité auprès de Stately avant de vous engager.
Questions fréquentes
Oui. L'offre gratuite autorise deux projets publics, dont votre projet Drafts, et trois machines. Elle comprend l'éditeur, la simulation des machines publiques, l'export de code et l'extension VS Code. Pro coûte 39 $ par mois, ou 33 $ par mois en facturation annuelle, et supprime les plafonds de projets et de machines tout en ajoutant les projets privés et les fonctions d'IA.
Contenus associés
Découvrez des outils, des compétences et des articles liés à Stately.
Alternatives à Stately
Base Code
Base44 (Wix) · Programmation · ProductivitéBase Code est un environnement de développement cloud partagé signé Base44. Votre équipe décrit des modifications sur un dépôt GitHub dans le chat, les vérifie en aperçu et les renvoie sous forme de pull requests.
Google EmbeddingGemma 2
Google DeepMind · Rédaction · Image · ProgrammationGoogle EmbeddingGemma 2 est un modèle ouvert de 740 millions de paramètres qui transforme texte, code, images, audio et images vidéo en vecteurs d'un même espace de 768 dimensions, sur un téléphone ou un ordinateur portable.
GitGlow
GitGlow · Programmation · ProductivitéGitGlow est un client Git de bureau qui place votre code et les modifications de vos agents IA dans une même revue, pour savoir ce qui quitte votre machine avant de livrer.