Kyle Shevlin

Software Engineer
January 24, 2019
0 strokes bestowed

State Machines: The XState Visualizer


I made mention in my "What Are State Machines?" post of the fact that a state machine is a graph data structure. Each state a node. Each transition an edge triggered by an event. You remember, right? No worries if you don't, now you know.

I also mentioned you can do cool things like create a graphical representation of your state machine because of this data structure. Well, I have good news. XState has a state machine visualizer tool.

The XState Visualizer allows you to see your state machine in action, which might be really handy for those of you who grok things visually. Let's take a look at it.

Open up the XState Visualizer in another tab with this link: You'll see an example of a stop light in the visualizer by default. On the left, is the graphical representation, and on the right is the code to produce that representation.

xstate visualizer init

On the left, each "box" represents one of our states. The initial state is indicated by the "dot and arrow" you see pointing to the "green" state. The highlighted state (indicated by the blue color), is the state the machine is currently in. The buttons inside each box will trigger the event with that name, and move it into the state it points to with the arrow. Give it a try.

Clicking the "TIMER" button will move the state to "yellow". Notice that the state and buttons that are not enabled become gray. You can continue to click event buttons to move the state along.

Another way to trigger events in the visualizer is manually in the "State" tab in the panel on the right. Click into the State tab, and you should see several items: Value, Context, Actions. At the bottom of the tab is an area for Events, where you can write your own and trigger them with the "Send Event" button. Since the light machine only has one event, try sending the TIMER event and watch the state update.

state tab open

Just like clicking the event buttons inside our state boxes, sending events manually also updates the state. I'll discuss the extra parts of this tab, context and actions, soon.

Now that you know the basics of using the visualizer, try it out and get a feel for it. If you don't know where to start, why not start by copy/pasting the code from the elevator example in my "Our First XState Machine" post. Update the elevator as you go. Can you figure out a way to add an open and closed state to the elevator doors? Better yet, figure out how restrict the elevator to only moving up and down while the doors are closed. Send me your answers on Twitter when you do!

Finished reading?

Liked the post? Give the author a dopamine boost with a few "beard strokes". Click it up to 50 times show your appreciation.

Related Posts:
State Machines

Are you, or the company you work for, struggling with something mentioned in this article?
Would you benefit from a live training session?
Let's Talk
Kyle Shevlin's face, which is mostly a beard with eyes
Kyle Shevlin is a software engineer who specializes in JavaScript, TypeScript, React and frontend web development.

Let's talk some more about JavaScript, TypeScript, React, and software engineering.

I write a newsletter to share my thoughts and the projects I'm working on. I would love for you to join the conversation. You can unsubscribe at any time.

Data Structures and Algorithms Logo
Data Structures and Algorithms

Check out my courses!

Liked the post? You might like my courses, too. Click the button to view this course or go to Courses for more information.
View on
I would like give thanks to those who have contributed fixes and updates to this blog. If you see something that needs some love, you can join them. This blog is open sourced at
©2023 Kyle Shevlin. All Rights Reserved.