Turn ideas into diagrams and code in minutes.

From frontend user flows to backend workflows, visually build and deploy any type of logic with Stately as your source of truth.

Try the visual editor Book a demo

This state machine is called Accumulate room readings. Its purpose is to get temperature and humidity readings from IoT sensors and generate a report every hour.

Design how it works with a visual language for everyone on the team.

Our drag and drop editor brings together contributors of all backgrounds. Code, diagrams, documentation, test generation, and more in one place. No more silos. Always up to date.

AIs love helping at each phase with state machines to guide them, while humans use the visual editor to audit and enhance their work.

Create flows with no code required. Rapidly prototype or gather requirements without worrying about technical details.

Then simulate your design to test and iterate. You can even instantly try out a prototype as an auto-generated React app.

Get feedback from your team and clients on how everything is supposed to work.

Explore community diagrams to inspire your own solutions. Share your work with the community to get feedback and kudos.

Generate flows with AI to scaffold behavior, suggest variants, turn up edge cases, and even write code.

Build with executable diagrams and get the best of text-based and visual tools.

Run diagrams using XState, a best-in-class open source library for orchestrating and managing state in JavaScript and TypeScript apps. No lock-in.

Read XState docs View on Github

Use XState on the frontend, backend, or wherever JavaScript runs. Integrations are available for React, Vue, Svelte, and other frameworks.

XState uses event-driven programming, state machines, statecharts, and the actor model to handle even the most complex logic in predictable, robust, and visual ways.

Learn more about statecharts

A book lender state machine in VSCode. One panel shows the state machine as a JavaScript object, the other panel shows the same state machine visualized using the XState VSCode extension.

Bidirectional updates between code and visualization let you use what makes you most productive.

Automatically visualize Redux, Zustand, and other code to get the benefits of Stately in your codebase even without XState.

An IDE extension brings the power of Stately into VS Code.

Download the VS Code extension

Generate React apps from diagrams to jumpstart product development. Keep iterating visually with the help of AI, or dive straight into the code to rapidly extend the scaffolding with your vision.

The room reading state machine visualized in the Stately editor alongside the React app code generated for that app logic.

Generate tests automatically to keep coverage robust and up-to-date.

A test path list of states and events in the Stately editor alongside that path being highlighted on the canvas, and the code generated to implement the tests.

Export all of your generated code in Javascript or Typescript.

Connect with Github to sync Stately with your codebase.

Inspect running apps with Stately Inspector to help test, and debug your logic.

Visualize communication between actors in your running app with sequence diagrams.

The Stately Inspector view, showing a state machine and a sequence diagram for the pizza ordering process side-by-side.

Products evolve. People are busy.

Understand and stay aligned with Stately as the source of truth.

Future proof your code with clear visualizations that are easy to return to and change later. Even years later.

Living documentation keeps the whole team in sync without extra overhead.

Save versions as backup and to see the history of your work.

Export as markdown stories, Mermaid drawings, or JSON documents that can be copied into issues and project documents.

Generate diagram summaries to get oriented quickly.

Loved by teams

Amy Pellegrini

@ Thoughtworks

Every team where I introduced XState has been more effective at handling state management with complex user interfaces. It fills a gap in the JS ecosystem no other tool did before.

Natalie Cuthbert

@ Stitch

We've been using XState for our new payments product. Shout out to the team that is making designing complex front-end flows a dream.

Patrick Cavit

@ Netflix

XState is a revelation. It makes complex tasks easier to build and debug while also making the code more straightforward and approachable.

Presley Pizzo

@ Coder

XState naturally separates the logic and makes it simple to mock out API calls, so it's easier to test the code and organize it!

James Tharpe

@ T-Mobile

We use XState to implement business workflows as statecharts. The visualizer helps us collaborate more closely with customers, the ability to externalize workflows as JSON configuration makes complex workflow changes surprisingly simple to roll out, and test case generation makes it easier than ever to move forward with confidence. XState makes it all possible!

Maya Shavin

@ Microsoft

Advantages of XState: Visually clear view of the code flow, code reusability, test coverage, easy to debug/ spot bugs, code scalability & maintenance, and better code design & planning.

Santi Cros

@ Domestic Data Streamers

Thinking and building with XState has been a revolution in how I develop robust business logic. But being able to visualize that in real time, has been a game changer in how I model and communicate any logic!