Visualize your application logic

A suite of visual tools for building app logic. Powered by XState, a best-in-class open source library for handling complexity at scale.

Try the editor Book a demo

Visual editor: Visualize your application logic

Use our drag-and-drop visual editor to build your application logic, then export it directly into your XState project.

Try the editor

XState in production

Player statechart in the Stately visual editor with min and full states transitioning to each other on toggle. The full state contains playing and paused states which transition to each other on play and pause.

Here’s the new logic for the video player…

Should the video stop playing when fullscreen is exited?

Looks great to me!

Statecharts: Collaborate with everyone on the team

Not just for developers. Statecharts are a visual language that everyone on the team can understand. Our editor and visualizer make it easy for anyone to create and edit application logic.

Learn more about statecharts

Stately VS Code extension showing a split screen inside VS Code with the code editor on the left and the Stately visual Editor on the right.

IDE Extension: Upgrade your workflow

Bring the power of Stately’s tools directly into your development environment. Edit statecharts visually in JavaScript and TypeScript with our VS Code extension.

Download the VS Code extension

Boolean-based code showing a lot of if else statements and repetition. — Before

Statechart equivalent for the previous code which is much easier to read at-a-glance. — After

State management: Make complexity manageable

Statecharts make state management simpler. Get an overview of how your application works at a glance. Find states that are often missed, including unwanted states, impossible states and unnecessary error states. As well as eliminating bugs and other issues caused by boolean-based state management.

Get started with our quickstart guide

Stately Registry’s Discover section, featuring a list of the latest public machines built by the community. Machine names include Chess Moves, eiv-form-statechart, login, searchBoxMachine, tldrawcore, users-search-engine, Address Autocompletea and Matt’s Beta System.

Registry: Explore and share

Share your machines with the community, get feedback and kudos for your work.

Discover the machine registry

Powered by XState

XState is a robust, production-proven library for building application logic with state machines.

No framework required

Only JavaScript is required. Get started quickly with our JavaScript-only template.
Packages and templates for React, Vue and Svelte

Speedy integration with React, Vue, Svelte and more, with our dedicated packages and templates.
Works anywhere in your stack

Use state machines to orchestrate state in both frontend and backend environments. Watch us discuss interesting uses of state machines in our office hours.
Robust and production-proven

Used in production by many big and small teams across the world. Convince your team to use XState.
Mature project with 22k+ GitHub stars

3+ years of development and a dedicated full-time team improving the tooling every day. Check out the GitHub repository.
Friendly and helpful community

Join our Discord to give us feedback and get support.

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
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!
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!
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
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!