This site runs best with JavaScript enabled.

What the Fork is xState?

Last tended Jan 22, 2020
Illustrated Notes
Web Development

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.

Screenshot of the xState visualizer

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:

Xstate is a tool that helps you plan out all the possible states in a JavaScript app
There's a handy interactive visualizer tool at
A sequence of light bulbs swapping states between unlit, lit, dim, and broken.
We can add extra options onto our states such as actions, services, guards, and activities

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

Shareable Custom Hooks in React
Shareable Custom Hooks in React

Want more illustrated notes on web development?

Take a look at Building VR Apps with React360, A Journey into Vue-Router, or Immutable Data with Immer and Personal Assistant Bots

Want to share?

Join the newsletter

For weekly notes on visual thinking, ethical technology, and cultural anthropology.

Maggie Appleton © 2021