\n\n
![\"XState](\"https://raw.githubusercontent.com/statelyai/public-assets/main/logos/xstate-logo-white-nobg.svg\"){kind=logo}
\n \n Actor-based state management & orchestration for complex app logic. → Documentation\n
\n
\n
\n
\n\n \n
\n Actor-based state management & orchestration for complex app logic. → Documentation\n
\n
\n
| Template | |
|---|---|
| \n\n[???? XState Template (CodeSandbox)](https://codesandbox.io/p/devbox/github/statelyai/xstate/tree/main/templates/vanilla-ts)\n\n[](https://stackblitz.com/github/statelyai/xstate/tree/main/templates/vanilla-ts?file=%2Fsrc%2FfeedbackMachine.ts)\n\n | \n\n\n- XState v5\n- TypeScript\n- _No framework_\n\n | \n
| \n\n[⚛️ XState + React Template (CodeSandbox)](https://codesandbox.io/p/devbox/github/statelyai/xstate/tree/main/templates/react-ts)\n\n[](https://stackblitz.com/github/statelyai/xstate/tree/main/templates/react-ts?file=%2Fsrc%2FfeedbackMachine.ts)\n\n | \n\n\n- [React](https://react.dev/)\n- XState v5\n- TypeScript\n\n | \n
| \n\n[???? XState + Vue Template (CodeSandbox)](https://codesandbox.io/p/devbox/github/statelyai/xstate/tree/main/templates/vue-ts)\n\n[](https://stackblitz.com/github/statelyai/xstate/tree/main/templates/vue-ts?file=%2Fsrc%2FfeedbackMachine.ts)\n\n | \n\n\n- [Vue](https://vuejs.org/)\n- XState v5\n- TypeScript\n\n | \n
| \n\n[???? XState + Svelte Template (CodeSandbox)](https://codesandbox.io/p/devbox/github/statelyai/xstate/tree/main/templates/svelte-ts)\n\n[](https://stackblitz.com/github/statelyai/xstate/tree/main/templates/svelte-ts?file=%2Fsrc%2FfeedbackMachine.ts)\n\n | \n\n\n- [Svelte](https://svelte.dev/)\n- XState v5\n- TypeScript\n\n | \n
| Code | Statechart | ||||
|---|---|---|---|---|---|
\n\n```js\nimport { createMachine, createActor } from 'xstate';\n\nconst lightMachine = createMachine({\n id: 'light',\n initial: 'green',\n states: {\n green: {\n on: {\n TIMER: 'yellow'\n }\n },\n yellow: {\n on: {\n TIMER: 'red'\n }\n },\n red: {\n on: {\n TIMER: 'green'\n }\n }\n }\n});\n\nconst actor = createActor(lightMachine);\n\nactor.subscribe((state) => {\n console.log(state.value);\n});\n\nactor.start();\n// logs 'green'\n\nactor.send({ type: 'TIMER' });\n// logs 'yellow'\n```\n\n
| \n\n\n\n \n Open in Stately Studio\n\n \n\n | \n
| Code | Statechart |
|---|---|
| \n\n```js\nimport { createMachine, createActor } from 'xstate';\n\nconst pedestrianStates = {\n initial: 'walk',\n states: {\n walk: {\n on: {\n PED_TIMER: 'wait'\n }\n },\n wait: {\n on: {\n PED_TIMER: 'stop'\n }\n },\n stop: {}\n }\n};\n\nconst lightMachine = createMachine({\n id: 'light',\n initial: 'green',\n states: {\n green: {\n on: {\n TIMER: 'yellow'\n }\n },\n yellow: {\n on: {\n TIMER: 'red'\n }\n },\n red: {\n on: {\n TIMER: 'green'\n },\n ...pedestrianStates\n }\n }\n});\n\nconst actor = createActor(lightMachine);\n\nactor.subscribe((state) => {\n console.log(state.value);\n});\n\nactor.start();\n// logs 'green'\n\nactor.send({ type: 'TIMER' });\n// logs 'yellow'\n\nactor.send({ type: 'TIMER' });\n// logs { red: 'walk' }\n\nactor.send({ type: 'PED_TIMER' });\n// logs { red: 'wait' }\n```\n\n | \n\n\n \n Open in Stately Studio\n\n \n | \n
| Code | Statechart |
|---|---|
| \n\n```ts\nimport { createMachine, createActor } from 'xstate';\n\nconst wordMachine = createMachine({\n id: 'word',\n type: 'parallel',\n states: {\n bold: {\n initial: 'off',\n states: {\n on: {\n on: { TOGGLE_BOLD: 'off' }\n },\n off: {\n on: { TOGGLE_BOLD: 'on' }\n }\n }\n },\n underline: {\n initial: 'off',\n states: {\n on: {\n on: { TOGGLE_UNDERLINE: 'off' }\n },\n off: {\n on: { TOGGLE_UNDERLINE: 'on' }\n }\n }\n },\n italics: {\n initial: 'off',\n states: {\n on: {\n on: { TOGGLE_ITALICS: 'off' }\n },\n off: {\n on: { TOGGLE_ITALICS: 'on' }\n }\n }\n },\n list: {\n initial: 'none',\n states: {\n none: {\n on: {\n BULLETS: 'bullets',\n NUMBERS: 'numbers'\n }\n },\n bullets: {\n on: {\n NONE: 'none',\n NUMBERS: 'numbers'\n }\n },\n numbers: {\n on: {\n BULLETS: 'bullets',\n NONE: 'none'\n }\n }\n }\n }\n }\n});\n\nconst actor = createActor(wordMachine);\n\nactor.subscribe((state) => {\n console.log(state.value);\n});\n\nactor.start();\n// logs {\n// bold: 'off',\n// italics: 'off',\n// underline: 'off',\n// list: 'none'\n// }\n\nactor.send({ type: 'TOGGLE_BOLD' });\n// logs {\n// bold: 'on',\n// italics: 'off',\n// underline: 'off',\n// list: 'none'\n// }\n\nactor.send({ type: 'TOGGLE_ITALICS' });\n// logs {\n// bold: 'on',\n// italics: 'on',\n// underline: 'off',\n// list: 'none'\n// }\n```\n\n | \n\n\n \n Open in Stately Studio\n\n | \n
| Code | Statechart |
|---|---|
| \n\n```js\nimport { createMachine, createActor } from 'xstate';\n\nconst paymentMachine = createMachine({\n id: 'payment',\n initial: 'method',\n states: {\n method: {\n initial: 'cash',\n states: {\n cash: {\n on: {\n SWITCH_CHECK: 'check'\n }\n },\n check: {\n on: {\n SWITCH_CASH: 'cash'\n }\n },\n hist: { type: 'history' }\n },\n on: { NEXT: 'review' }\n },\n review: {\n on: { PREVIOUS: 'method.hist' }\n }\n }\n});\n\nconst actor = createActor(paymentMachine);\n\nactor.subscribe((state) => {\n console.log(state.value);\n});\n\nactor.start();\n// logs {\n// value: { method: 'cash' },\n// }\n\nactor.send({ type: 'SWITCH_CHECK' });\n// logs {\n// value: { method: 'check' },\n// }\n\nactor.send({ type: 'NEXT' });\n// logs {\n// value: 'review',\n// }\n\nactor.send({ type: 'PREVIOUS' });\n// logs {\n// value: { method: 'check' },\n// }\n```\n\n | \n\n\n \n Open in Stately Studio\n\n | \n
![](\"https://opencollective.com/xstate/tiers/backer/badge.svg?label=sponsors&color=brightgreen\"){kind=icon}
\n\n\n ![\"Transloadit](\"https://assets.transloadit.com/assets/images/sponsorships/logo-default.svg\"){kind=logo}
\n