Does the world need another state management library? Probably not, but if you've been interested in XState, you're going to want to check this one out.

XState Store is a simple & tiny state management library largely inspired by XState. If you just need a way to update data in a store and subscribe to changes in the store, XState Store is for you. It is:

• Extremely simple. Provide initial context and transition functions to the createStore(…) function, and you're good to go.
• Extremely small. Less than 1kb minified and gzipped.
• XState compatible. Shares actor APIs with XState, making integration/migration easy if (when) you need to handle more complexity.
• Extra type-safe. Written in TypeScript, it provides strong event and snapshot types, automatically inferred from your context and transitions.
• Event-based. Works just like XState; send events to trigger transitions.
• Immer ready. Easily add Immer for "mutable" context updates with createStoreWithProducer(producer, …).

In the last few weeks, we’ve released single-file GitHub pull requests, machine sorting, and many other improvements and bug fixes.

Watch our latest office hours live stream where we cover single file GitHub pull requests, sorting machines, Stately Agent, updates to XState and more.

XState is a versatile state management & orchestration library that works with any framework, including React with the @xstate/react package. For many apps, managing global state is a requirement, and there are many options for sharing global state in React, like using React Context or libraries like Redux, MobX, and Zustand.

The @xstate/react package makes it simple to manage component-level state with hooks like useMachine() and useActor(), but it works equally well for managing global state 🌎

You use XState in your codebase, and you want to make a change to a state machine. You don’t want to touch any code but want to make a pull request back to GitHub. Our single file import feature lets you do it all in the browser.

We recently announced the release of XState v5! During its beta phase, we created a migration guide, specifically to call out breaking changes and to give developers onging updates regarding API changes. This post is a walkthrough of migrating existing XState machines from v4 to v5 and is intended to be more of a step-by-step companion to the migration guide. It also focuses on migrating XState machines that are using TypeScript.

Embedding Figma frames has arrived in Stately Studio! We’ve also made more improvements and squashed some bugs. And have you tried Stately Agent yet?

Join Gavin as he details an example backend credit reporting flow built with XState and Stately tooling. In this demo, he covers parallel states, final states, and conditional guards.

We already kicked off 2024 with several major updates to Stately such as inspecting live XState code, syncing with GitHub, and writing code for actions and actors in the Studio. Today we’re excited to announce that we’ve also launched an integration with Figma!

You can now attach Figma frames to states in Stately.

State machines and visual diagrams are such a powerful way to organize, and convey information. All of those lovely “boxes and arrows” convey meaningful relationships, indicate sequential order, and direct flows in a way that’s easier to understand since it's visual. Add to that the ability to attach assets to your diagrams and you’re well on your way towards creating truly expressive, executable software diagrams. But there’s still one thing that state machines have that should make them easy to understand. Text.