Use with your framework

XState is framework-agnostic. Machines and actors run the same way everywhere. The framework packages connect actors to your component model: they create or receive an actor, subscribe to its snapshots, and re-render when the values you read change.

Install the package for your framework alongside xstate:

npm install xstate@alpha @xstate/react@alpha

React

@xstate/react provides hooks for running and reading actors.

import { useActor } from '@xstate/react';

function Player() {
  const [snapshot, send] = useActor(playerMachine);

  return (
    <button onClick={() => send({ type: 'play' })}>
      {snapshot.matches('playing') ? 'Playing' : 'Play'}
    </button>
  );
}

• useActor and useActorRef
• Selectors with useSelector
• Shared actors with createActorContext
• Input and snapshots
• Server rendering

Vue

@xstate/vue provides composables. useActor returns a reactive snapshot ref and a send function.

• useActor and useActorRef
• Selectors
• Shared actors
• Server rendering

Svelte

@xstate/svelte provides stores. useSelector returns a readable store you can subscribe to with $.

• useActor and useActorRef
• Selectors
• Shared actors
• Server rendering

Solid

@xstate/solid provides primitives. Use fromActorRef with createMemo for fine-grained reactive reads.

• useActor and useActorRef
• Selectors
• Shared actors
• Server rendering

Other frameworks and no framework

Any environment that can call createActor(...), actor.subscribe(...), and actor.select(...) can integrate XState. Actors also run without any framework: on servers for backend workflows, in workers, and in plain scripts.

For simple event-based state without statecharts, see @xstate/store, which ships bindings for React, Vue, Svelte, Solid, Preact, and Angular.