Stately
Stately · Coding
Stately ist ein visueller State-Machine-Editor. Sie zeichnen damit die Logik einer App, erzeugen Flows per KI und exportieren XState-Code. Das passt zu Teams, die Diagramm und Code synchron halten wollen.
Über Stately
About
Was ist Stately
Stately ist ein Werkzeug im Browser, mit dem Sie Zustandsmaschinen und Statecharts zeichnen, also Diagramme, die beschreiben, wie eine Anwendung von einem Zustand in den nächsten wechselt. Das Unternehmen pflegt außerdem XState, die Open-Source-Bibliothek für JavaScript, die solche Diagramme als echten Code ausführt. Stately Studio ist das bezahlte Produkt drumherum: ein Editor, ein Simulator und mehrere Funktionen für Export und Abgleich. Es begann als XState-Visualizer und dient heute ganzen Teams als Statechart-Tool.
Das Problem dahinter heißt Drift. Das Diagramm in der Design-Datei sagt eines, der Code sagt ein anderes, und auffallen tut es erst mit dem Bugreport. Stately hält eine Maschine als Quelle und projiziert sie in zwei Richtungen: ein Bild, das das Team liest, und TypeScript, das die App ausführt. Ändern Sie das Diagramm, ändert sich der exportierte Code mit.
Drei Grenzen bestimmen, für wen sich das lohnt. Sie brauchen etwas Gefühl für Zustandsmaschinen, weil Events, Guards und verschachtelte Zustände das tägliche Vokabular sind. Der kostenlose Plan endet bei zwei öffentlichen Projekten und drei Maschinen. Und die KI-Generierung ist als experimentell gekennzeichnet, ihre Ausgabe sollten Sie als ersten Entwurf behandeln, den jemand prüft.
Erste Schritte
- Öffnen Sie state.new, dann landen Sie ohne Installation im Editor von Stately Studio. Melden Sie sich an, sobald Sie speichern wollen.
- Bauen Sie den Flow. Ziehen Sie Zustände auf die Fläche, verbinden Sie sie mit Events und benennen Sie Übergänge in normalen Worten. Alternativ tippen Sie eine Beschreibung, und der KI-Flow-Generator liefert einen ersten Entwurf.
- Wechseln Sie in den Simulate-Modus und klicken Sie die Events durch. Sie sehen, welche Übergänge auslösen und wo die Maschine hängen bleibt.
- Exportieren Sie die Maschine als JavaScript oder TypeScript, oder verbinden Sie GitHub, damit die Datei mit Ihrem Repository abgeglichen wird.
- Laden Sie das Team in einen Team-Plan ein, stellen Sie die Sichtbarkeit des Projekts auf privat und vergeben Sie Rollen wie Editor oder Viewer.
Produktinformationen
Ein kurzer Überblick über Preise, unterstützte Plattformen und die Leistung von Stately.
Am besten für
Die Nutzer, Aufgaben und Szenarien, für die dieses Tool am besten passt.
Nutzer
- Frontend-Entwickler
- Product Manager und Designer
- QA-Engineers
- Plattform-Teams mit geteilten Abläufen
Aufgaben
- Eine mehrstufige Anmeldung oder Zahlung modellieren
- Eine Maschine aus einem Text bauen
- Die Logik eines Backend-Jobs dokumentieren
- Bestehenden State-Code prüfen
Szenarien
- Sprint-Planung, in der das Team über Sonderfälle streitet
- Ein Review mit Stakeholdern, die etwas Anklickbares wollen
- Aufräumen vor dem Refactoring einer alten Funktion
Wichtigste Funktionen
Drag-and-drop-Editor mit Design- und Simulate-Modus
Die Fläche ist das Produkt. Sie setzen Zustände, ziehen Übergänge und benennen Events direkt am Element, mit einem Seitenpanel für Guards, Actions und Beschreibungen. Design dient dem Bauen, Simulate dem Durchlaufen Event für Event. Keiner der Modi verlangt zuerst Code, und deshalb kann ein Designer an derselben Datei mitarbeiten wie ein Entwickler.
Mit KI generieren
Beschreiben Sie einen Flow in zwei Sätzen, und Stately baut eine Maschine mit Zuständen, Events und Übergängen. Sie können auch eine vorhandene Maschine markieren und eine Änderung verlangen, etwa einen zusätzlichen Wiederholungszweig. Jede Anweisung bleibt im Verlauf, und jede Generierung speichert automatisch eine Version, die Sie wieder öffnen. Die Funktion ist experimentell, das Monatskontingent begrenzt, und beim Ändern geht die Maschinendefinition an OpenAI.
Lauffähige Prototypen und Live-Simulation
Simulation ist keine Diashow. Stately erzeugt eine React-Oberfläche für die Maschine, sodass Prüfer echte Schaltflächen drücken und echte Übergänge auslösen. Pro-Konten bekommen zusätzlich die Live-Simulation, die die Maschine während des Bearbeitens ausführt. Wenn ein Team ein Diagramm immer wieder falsch liest, zeigt diese Funktion am schnellsten, was beim Abbruch mitten in der Zahlung passiert.
XState-Export und Abgleich mit dem Code
Jede Maschine geht als JavaScript oder TypeScript raus und läuft auf XState, der Open-Source-Bibliothek, die Stately pflegt. Damit gibt es keine Bindung: der Code funktioniert in einem Node-Skript, einer React-App oder einem Backend-Worker. In den bezahlten Plänen verbinden Sie GitHub oder nutzen die CLI, um Maschinen mit einem Repository abzugleichen, und Änderungen wandern in beide Richtungen zwischen Bild und Code.
Testpfade, Versionen und lebende Dokumentation
Pro-Konten erzeugen Testpfade, die mögliche Wege einer Maschine auflisten, damit Tester wissen, was sie probieren. Die Versionshistorie hält Sicherungspunkte zum Wiederherstellen bereit, und der Editor exportiert Flows als Markdown-Stories, Mermaid-Diagramme oder JSON. Mit eingebetteten Figma-Rahmen trägt das Diagramm den Design-Kontext mit.
Projekte, Teams und Zugriffskontrolle
Projekte bündeln zusammengehörige Maschinen und regeln, wer sie sieht. Öffentliche erscheinen auf der Discover-Seite, nicht gelistete öffnen per Link, private bleiben im Team. Die Rollen heißen Owner, Admin, Editor und Viewer. Enterprise ergänzt Single Sign-on, Audit-Logs, eigenes Hosting und die Möglichkeit, Stately in die eigene App einzubetten.
Vor- und Nachteile
Vorteile
- Diagramm und Code stammen aus einer Quelle, und der Export läuft auf XState, Sie können also gehen, ohne die App neu zu schreiben.
- Die KI-Generierung löst das leere Blatt, und Verlauf plus automatische Versionen machen den Vergleich von Entwürfen leicht.
- Der kostenlose Plan enthält Code-Export und die VS-Code-Erweiterung, genug, um den Ablauf an einem echten Feature zu testen.
- Der Simulate-Modus findet Sackgassen und unerreichbare Zustände, bevor sie ins Code-Review gehen.
- Die Enterprise-Funktionen decken SSO, Audit und eigenes Hosting ab, was für regulierte Teams zählt.
Nachteile
- Der kostenlose Plan endet bei zwei öffentlichen Projekten und drei Maschinen, und jeder Fork zählt mit. Private Arbeit verlangt Pro für 39 $/Monat oder 33 $/Monat bei Jahreszahlung.
- Die KI-Generierung ist experimentell und begrenzt. Beim Ändern eines vorhandenen Flows verlässt die Maschinendefinition Ihr Konto Richtung OpenAI, was manche Security-Teams hinterfragen.
- Das Werkzeug setzt Statechart-Kenntnisse voraus. Ein PM zieht Kästen, aber verschachtelte und parallele Zustände brauchen ein, zwei Sitzungen.
- Programmatischer Zugriff läuft über GitHub-Abgleich und CLI. Wer eine REST-API für Projektdaten will, sollte die Verfügbarkeit vor dem Kauf mit Stately klären.
Häufige Fragen
Ja. Der kostenlose Plan erlaubt zwei öffentliche Projekte, darunter Ihr Drafts-Projekt, und drei Maschinen. Enthalten sind Editor, Simulation öffentlicher Maschinen, Code-Export und die VS-Code-Erweiterung. Pro kostet 39 $ pro Monat oder 33 $ pro Monat bei jährlicher Zahlung und hebt die Grenzen für Projekte und Maschinen auf, dazu kommen private Projekte und KI-Funktionen.
Ähnliche Inhalte
Entdecke passende Tools, Skills und Artikel zu Stately.
Alternativen zu Stately
Base Code
Base44 (Wix) · Coding · ProduktivitätBase Code ist eine geteilte Cloud-Entwicklungsumgebung von Base44. Das Team beschreibt Änderungen an einem bestehenden GitHub-Repository im Chat, prüft sie in der Vorschau und reicht sie als Pull Request ein.
Google EmbeddingGemma 2
Google DeepMind · Schreiben · Bilder · CodingGoogle EmbeddingGemma 2 ist ein offenes Modell mit 740 Millionen Parametern, das Text, Code, Bilder, Audio und Videobilder in Vektoren eines gemeinsamen 768-dimensionalen Raums umwandelt und auf Handys und Notebooks läuft.
GitGlow
GitGlow · Coding · ProduktivitätGitGlow ist ein Git-Client für den Desktop, der Ihren Code und die Änderungen Ihrer KI-Agenten in einer Review bündelt, damit Sie vor dem Ausliefern sehen, was die Maschine verlässt.