Turn ideas into diagrams and code in minutes.

Diagrams

  • State machines
  • Flowcharts
  • Statecharts
  • Sequence diagrams

Ideas

  • Requirements
  • User stories
  • Features
  • Specifications

Code

  • Workflows
  • App logic
  • JS, TS, JSON
  • Mermaid

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

Try the visual editorBook 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. The state machine starts in the ConsumeReadings state, where it initializes the temperature and humidity values as null. It then waits for temperature and humidity events to be logged. When a temperature event is logged, the state machine updates the temperature value. Similarly, when a humidity event is logged, it updates the humidity value. After one hour, the state machine transitions to the GenerateReport state. In this state, it invokes a service called produceReport to generate the report. Once the report is generated, the state machine transitions back to the ConsumeReadings state to continue accumulating readings.
AWSTEDNetflixLyftMicrosoftEpic GamesCisco

Design how it works with a visual language for everyone on the team (even AI 🤖).

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.

AI's 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.

View of the same credit check workflow in simulate mode in the Stately editor. In Design mode, states can be added. In Simulate mode, the machine can be walked through where the current state and available events are highlighted.

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.

Attach images and other assets to states to view mockups, requirements documents, and more alongside the code.

Designers and product managers can fill in how each state is supposed to look.

Intuitively understand what a state machine does with images at each step.

Quickly prototype new ideas by experiencing mockups using the same logic as your code.

A state machine in the Stately editor for a color picker with a screenshot of the color value input in the idle state and a screenshot of the full spectrum color picker in the open state.

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

A state machine being accurately generated in the Stately editor from the text description: An authentication flow for a web app. The first two sign in options are using GitHub or Apple where the user does not need to enter their email address or password. The third sign in option is using email where the user needs to enter their email address and password to sign up if they have not already signed up or to sign in if they have already signed up. The authentication flow is complete when a user has signed in.

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

XState

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 docsView on Github
TypeScript, React, Vue

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. Over the top is a button that says Generate React app.

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.

GitHub

Inspect running apps in the visual editor to help build, test, and debug your logic.

Coming soon

Visualize communication between actors in a system with sequence diagrams.

Coming soon

Deploy to Stately Sky for an instant realtime backend.

Want to keep it simple? Design in our visual editor, then one-click deploy to our multiplayer ready logic-as-a-service Stately Sky.

Send events using our SDK, and we'll update all clients automatically.

A traffic light machine in the Stately editor alongside a live web app with a rendering of a traffic light.

A seamless developer experience

Coding against large cloud services is cumbersome, boilerplate heavy, and painful to deploy.
Low/no-code platforms can be inflexible and require vendor lock-in.

With Stately Sky, simply draw a diagram, generate an API key, and click "Deploy".
It also offers reliable export options without any lock-in.

A diagram showing how Stately Studio deploys an actor to Stately Sky, how the config is sent from Stately Sky to Stately Sky SDK, which in turn sents state and events back to Stately Sky.

Combine the expressiveness and readability of statecharts with the durability and fault tolerance of cloud computing by running state machines as actors in Sky.

Multiplayer collaboration which can be useful for whiteboarding, document editing, gaming or many other types of apps.

Asynchronous workflows enhance efficiency in operations without immediate results, such as data processing, email delivery, or API calls.

Long-running backend processes like medical patient onboarding flows or inventory management.

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.

Reference an event catalog which is automatically generated and can be annotated to provide further information.

An order flow in the Stately editor alongside the event schema which shows events for OrderCreatedEvent, ShipmentSentEvent and OrderConfirmedEvent. Each event has properties of various types including string, array, object, and boolean.

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.

Built with Stately

Fugo

“I can explain business logic to stakeholders using simulation in Stately Editor. After a long time away from coding, I can return and effectively understand the logic.”

- Marsel Atniashev

Read case study
Koordinates

“I love the first class support in XState for side effects. That the side effects can be co-located with my code that triggers it and uses it, instead of having to put them somewhere else like with Redux”

- Taylor Lodge

Read case study

“I was able to showcase the machine visualizer to the rest of the company, which was a delight. This helped convey the complexity of the UI pieces, and also helped to discuss how we should handle specific use cases in conjunction with the design mockups.”

- Parker McMullin

Read case study
Tidefi

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!

Intelligent logic to transition from design to deployment, and back again.

Sign up for freeBook a demo