xState is a snazzy way to manage JavaScript application state using visual state charts. It’s a pretty wonderful tool for making sure you think through every possible edge case of an application.

There’s also a handy visualiser tool that synchronizes your code and visuals. If you edit one, the other changes to match. ✨

It’s perfect for visual thinkers. If someone could just build one of these for the entire of JavaScript I’ll be all set.

Here’s a little more illustrated detail on how this works:

If you’re keen to learn more xState there’s two courses up on egghead that cover all the basics:

https://egghead.io/courses/introduction-to-state-machines-using-xstate?af=54fd64

https://egghead.io/courses/construct-sturdy-uis-with-xstate?af=54fd64

Want more illustrated notes on web development?

Take a look at Building VR Apps with React360

Building VR Apps with React360