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