Installation

You can install XState using your favorite package manager or embed the <script> directly from a CDN.

yarn

yarn add xstate

npm

npm install xstate

CDN

You can import XState from the Skypack CDN:

import {
  createMachine,
  createActor,
} from 'https://cdn.skypack.dev/xstate@beta';

const machine = createMachine({
  initial: 'a',
  states: {
    a: {},
  },
});

const actor = createActor(machine);
actor.subscribe((state) => {
  console.log(state);
});
actor.start();

Coming soon… Codepen link.

Exports

import { doneInvoke, forwardTo, sendParent, sendTo } from './actions.ts';
export { assign } from './actions/assign.ts';
export { cancel } from './actions/cancel.ts';
export { choose } from './actions/choose.ts';
export { log } from './actions/log.ts';
export { pure } from './actions/pure.ts';
export { raise } from './actions/raise.ts';
export { stop } from './actions/stop.ts';
import { createActor, Actor, ActorStatus } from './interpreter.ts';
import { createMachine } from './Machine.ts';
import { mapState } from './mapState.ts';
import { State } from './State.ts';
import { StateNode } from './StateNode.ts';
export { SimulatedClock } from './SimulatedClock.ts';
export { StateMachine } from './StateMachine.ts';
export { getStateNodes } from './stateUtils.ts';
export { waitFor } from './waitFor.ts';
export * from './typegenTypes.ts';
export * from './types.ts';

export {
  matchesState,
  pathToStateValue,
  toObserver,
  toSCXMLEvent,
} from './utils.ts';
export {
  StateNode,
  State,
  mapState,
  sendTo,
  sendParent,
  forwardTo,
  createActor,
  Actor,
  ActorStatus,
  doneInvoke,
  createMachine,
};
export {
  fromPromise,
  fromObservable,
  fromCallback,
  fromEventObservable,
  fromTransition,
} from './actors/index.ts';

export { stateIn, not, and, or } from './guards.ts';

declare global {
  interface SymbolConstructor {
    readonly observable: symbol;
  }
}