Stately

Stately is a visual software modeling platform that models app and business logic as state machines, statecharts, and actors. It supports XState as the underlying library for orchestrating and managing logic in JavaScript and TypeScript apps, and it enables teams to design, simulate, and generate code from diagrams. The platform emphasizes collaboration and a no-code approach while integrating with codebases.

The tool offers a visual editor with drag-and-drop capabilities, allowing contributors from different backgrounds to work with code, diagrams, documentation, and tests in one place. It supports auto-generated React apps and prototype testing, and aims to keep designs up to date with bidirectional code-visual updates.

Stately Studio integrates with XState, enabling runnable diagrams and code in the editor. It also provides an IDE extension for VS Code, and features for exporting and sharing diagrams, as well as running simulations to validate designs.

Use cases

• Design frontend user flows and backend workflows visually
• Prototype and gather requirements without deep technical details