Check out a free preview of the full State Machines in JavaScript with XState course:
The "Visualizing State Machines" Lesson is part of the full, State Machines in JavaScript with XState course featured in this preview video. Here's what you'd learn in this lesson:

David explains that one of the advantages of XState is to be able to visualize the machine, and explores the service machine through the XState visualizer.

Get Unlimited Access Now

Transcript from the "Visualizing State Machines" Lesson

[00:00:00]
>> One of the benefits of xstate is that you could actually visualize these machines. And so if we click xstate.js.org/viz, you'll see an example over here. This is the default machine that's created and you'll see a representation of this machine right here in the visualizer. So in fact, let's take a look at this service machine and invisualize it.

[00:00:29] I'm just gonna copy, well, everything except the creates over here just because that's newer syntax, and I'm gonna put that right over here. So now when we click Update it will show us our feedback form. Now what's great about this is is you could actually play around with this visualization.

[00:00:50] So if I click that, we can see visually that it goes to the form states. If I click Submit over here, we could see that it goes to thanks, and then once I click Close, it goes to closed which is a final state. Which you might remember means nothing happens in this state, so we can't really exit from the state.

[00:01:09] If you click Reset, the entire service resets. Now there's two panels here besides the definition on the machine where you could copy paste the machine's definition. There's this date over here which shows you which state you're currently on. So if I click Good, it takes you to the value thanks and changes to closed.

[00:01:32] There's also the events tab over here too, so you could record what events happened to get to your current state. Additionally, if you do want to add payload to your events you could do so here. You could click the Events Type that you want and then you could add any sort of payload over here and go ahead and send that event.

[00:01:59] So you'll see that this clicked events with hello world and the payload was sent, and it took you right to the thanks state. So remember right now when you're copying machines over to the visualizer, don't put create machine just put machine. Once the visualizer is updated you'll be able to use the latest xstate features in it.