Installation

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

Installation Snippets

using yarn
bash
yarn add xstate

using yarn
bash
yarn add xstate

using npm
bash
npm install xstate

using npm
bash
npm install xstate

using pnpm
bash
pnpm install xstate

using pnpm
bash
pnpm install xstate

CDN

You can embed XState from the unpkg CDN:

• XState core: https://unpkg.com/xstate@4/dist/xstate.js
• XState web: https://unpkg.com/xstate@4/dist/xstate.web.js
  • Browser-friendly, ES module build

html
<script src="https://unpkg.com/xstate@4/dist/xstate.js"></script>

html
<script src="https://unpkg.com/xstate@4/dist/xstate.js"></script>

The variable XState will be available globally, which will give you access to the top-level exports.

js
const { createMachine, actions, interpret } = XState; // global variable: window.XState
const lightMachine = createMachine({
  // ...
});
const lightActor = interpret(lightMachine);

js
const { createMachine, actions, interpret } = XState; // global variable: window.XState
const lightMachine = createMachine({
  // ...
});
const lightActor = interpret(lightMachine);