# Xstate > Actions are fire-and-forget effects. When a state machine transitions, it may execute actions. Actions occur in response to events, and are typically defined on transitions in the`actions: [...]`pro ## Pages - [Actions (/docs/actions)](actionsmdx.md): Actions are fire-and-forget effects. When a state machine transitions, it may execute actions. Actions occur in respo... - [The Actor model (/docs/actor-model)](actor-modelmdx.md): The [Actor model](https://en.wikipedia.org/wiki/Actor_model) in computer science is a mathematical model of concurren... - [Actors (/docs/actors)](actorsmdx.md): import { VideoIcon } from 'lucide-react'; - [AI Agents (/docs/agents/agents)](agentsmdx.md): Stately Agent is still under development. - [@xstate/store-angular (/docs/xstate-store/angular)](angularmdx.md): The`@xstate/store-angular`package provides Angular bindings for [XState Store](/docs/xstate-store). It includes uti... - [Notes (/docs/annotations)](annotationsmdx.md): import { PlusSquare } from 'lucide-react'; - [Assets in Stately’s editor (/docs/assets)](assetsmdx.md): import { Plus, Paperclip, Star, Info } from 'lucide-react'; - [Autolayout (/docs/autolayout)](autolayoutmdx.md): import { Wand } from 'lucide-react'; - [Callback Actors (/docs/callback-actors)](callback-actorsmdx.md): Callback actors are actors whose logic is represented by a function that can "callback" to the parent actor by sendin... - [Canvas controls (/docs/canvas-view-controls)](canvas-view-controlsmdx.md): import { Sparkles, MousePointer2, Hand, PlusSquare, Undo, Redo, Scan, Check, ListTree } from 'lucide-react'; - [Cheatsheet (/docs/cheatsheet)](cheatsheetmdx.md): Use this cheatsheet to quickly look up the syntax for XState v5. - [Colors (/docs/colors)](colorsmdx.md): import { Info, Star } from 'lucide-react'; - [Context (/docs/context)](contextmdx.md): In XState,`context`is how you store data in a state machine [actor](actors). - [Delayed (after) transitions (/docs/delayed-transitions)](delayed-transitionsmdx.md): **Delayed transitions** are transitions that are triggered after a set amount of time. Delayed transitions are usefu... - [Descriptions (/docs/descriptions)](descriptionsmdx.md): import { AlignLeft, Info, Plus } from 'lucide-react'; - [Design mode (/docs/design-mode)](design-modemdx.md): import { ClipboardCheck, Code, Database, History, Info, ListTree, Play, UploadCloud, HelpCircle } from 'lucide-react'; - [Developer tools (/docs/developer-tools)](developer-toolsmdx.md): The XState developer tools currently only work for XState version 4. Typegen is not supported in XState version 5. - [Discover (/docs/discover)](discovermdx.md): import { GitFork, MoreHorizontal } from 'lucide-react'; - [Stately + XState docs (/docs)](docsmdx.md): import { LayoutIcon, BookOpenTextIcon, CodeIcon, RocketIcon } from 'lucide-react'; - [Actions and actors in Stately’s editor (/docs/editor-actions-and-actors)](editor-actions-and-actorsmdx.md): import { Code, Info, Plus, Zap, Edit, Trash, Backspace, MoreHorizontal, PlayCircle } from 'lucide-react'; - [Context and meta in Stately’s editor (/docs/editor-context-and-meta)](editor-context-and-metamdx.md): * Coming soon… setting initial context values - [States and transitions in Stately’s editor (/docs/editor-states-and-transitions)](editor-states-and-transitionsmdx.md): import { MoreHorizontal, Plus, Info, AlertTriangle, Star, Code, PlayCircle } from 'lucide-react'; - [Tags in Stately’s editor (/docs/editor-tags)](editor-tagsmdx.md): import { Plus, Info, PlusSquare } from 'lucide-react'; - [Embed machines using their embed URL (/docs/embed)](embedmdx.md): You can embed your machines anywhere that supports [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Ele... - [Event emitter (/docs/event-emitter)](event-emittermdx.md): *Since XState version 5.9.0* - [Eventless (always) transitions (/docs/eventless-transitions)](eventless-transitionsmdx.md): **Eventless transitions** are transitions that happen without an explicit event. These transitions are *always* ta... - [XState examples (/docs/examples)](examplesmdx.md): XState v5 examples are also available in the [`/examples`directory](https://github.com/statelyai/xstate/tree/main/ex... - [Export as code (/docs/export-as-code)](export-as-codemdx.md): import { Code, MoreHorizontal, Copy } from 'lucide-react'; - [Embed Figma (/docs/figma)](figmamdx.md): import { Plus, Paperclip, Star, Info, Settings } from 'lucide-react'; - [Final states (/docs/final-states)](final-statesmdx.md): A final state is a state that represents the completion or successful termination of a machine. It is defined by the ... - [Finite states (/docs/finite-states)](finite-statesmdx.md): A finite state is one of the possible states that a state machine can be in at any given time. It's called "finite" b... - [Function Actors (/docs/function-actors)](function-actorsmdx.md) - [Generate with AI (/docs/generate-flow)](generate-flowmdx.md): import { Sparkles, History } from 'lucide-react'; - [Generate React app (/docs/generate-react)](generate-reactmdx.md): import { Code } from 'lucide-react'; - [Generate test paths (/docs/generate-test-paths)](generate-test-pathsmdx.md): import { ClipboardCheck } from 'lucide-react'; - [Glossary (/docs/glossary)](glossarymdx.md): This glossary is an alphabetical guide to the most common terms in statecharts and state machines. - [Graph & Paths (/docs/graph)](graphmdx.md): The graph utilities are now included in the main`xstate`package. Import from`xstate/graph`instead of the deprecat... - [Guards (/docs/guards)](guardsmdx.md): A **guard** is a condition function that the machine checks when it goes through an event. If the condition is`tru... - [History states (/docs/history-states)](history-statesmdx.md): A history state is a special type of state (a *pseudostate*) that remembers the last [child state](parent-states) tha... - [Share machine images using their image URL (/docs/image)](imagemdx.md): import { LinkIcon, MoreHorizontal } from 'lucide-react'; - [Usage with Immer (/docs/immer)](immermdx.md): [Immer](https://immerjs.github.io/immer/) is a library that makes it more convenient to work with updating data immut... - [Import from code (/docs/import-from-code)](import-from-codemdx.md): import { Code, FilePlus2, Import } from 'lucide-react'; - [Connect GitHub repo (/docs/import-from-github)](import-from-githubmdx.md): import { Code, Github, Settings } from 'lucide-react'; - [Initial states (/docs/initial-states)](initial-statesmdx.md): When a state machine starts, it enters the **initial state** first. A machine can only have one top-level initial s... - [Input (/docs/input)](inputmdx.md): Input refers to the data provided to a state machine that influences its behavior. In [XState](xstate), you provide i... - [Inspection (/docs/inspection)](inspectionmdx.md): The Inspect API is a way to inspect the state transitions of your state machines and every aspect of actors in an act... - [Inspector (/docs/inspector)](inspectormdx.md): Stately Inspector is a tool that allows you to inspect your application’s state visually. It primarily works with f... - [Installation (/docs/installation)](installationmdx.md): XState has **zero dependencies** and runs anywhere that JavaScript runs. You can install XState using your favorite p... - [Invoke (/docs/invoke)](invokemdx.md): [State machines](machines) can “invoke” one or many [actors](actors) within a given state. The invoked actor will... - [Keyboard shortcuts (/docs/keyboard-shortcuts)](keyboard-shortcutsmdx.md): Stately Studio has a number of keyboard shortcuts. - [Live simulation mode (/docs/live-simulation)](live-simulationmdx.md): import { Play, Triangle } from 'lucide-react'; - [Actions (/docs/actions)](llms-fulltxt.md): Actions are fire-and-forget effects. When a state machine transitions, it may execute actions. Actions occur in respo... - [Lock machines (/docs/lock-machines)](lock-machinesmdx.md): import { Lock, Unlock, Info } from 'lucide-react'; - [Machine restore (/docs/machine-restore)](machine-restoremdx.md): The Studio is built using a server-client architecture. - [State machines (/docs/machines)](machinesmdx.md): A [state machine](state-machines-and-statecharts) is a model that describes the behavior of something, for example an... - [Migrating from XState v4 to v5 (/docs/migration)](migrationmdx.md): The guide below explains how to migrate from XState version 4 to version 5. Migrating from XState v4 to v5 should be ... - [Observable Actors (/docs/observable-actors)](observable-actorsmdx.md): Observable actors are actors that represent an observable stream of values. This makes it easy to interop with observ... - [Output (/docs/output)](outputmdx.md): Output refers to the final data that an [actor](actors) produces. When an actor is responsible for performing some ta... - [Parallel states (/docs/parallel-states)](parallel-statesmdx.md): In statecharts, a parallel state is a state that has multiple child states (also known as **regions**) that are all a... - [Parent states (/docs/parent-states)](parent-statesmdx.md): States can contain more states, also known as **child states**. These child states are only active when the parent st... - [Persistence (/docs/persistence)](persistencemdx.md): [Actors](actors) can persist their internal state and restore it later. **Persistence** refers to storing the state o... - [@xstate/store-preact (/docs/xstate-store/preact)](preactmdx.md): The`@xstate/store-preact`package provides Preact bindings for [XState Store](/docs/xstate-store). It includes hooks... - [Projects (/docs/projects)](projectsmdx.md): import { PlusSquare, MoreHorizontal } from 'lucide-react'; - [Promise actors (/docs/promise-actors)](promise-actorsmdx.md): Promise actors are actors that represent a promise that performs some asynchronous task. They may resolve with some o... - [Pure transition functions (/docs/pure-transitions)](pure-transitionsmdx.md): Pure transition functions allow you to compute the next state and actions of a state machine without creating a live ... - [Quick start (/docs/quick-start)](quick-startmdx.md): import { Tab, Tabs } from 'fumadocs-ui/components/tabs'; - [@xstate/store-react (/docs/xstate-store/react)](reactmdx.md): The`@xstate/store-react`package provides React bindings for [XState Store](/docs/xstate-store). It includes hooks f... - [Setup (/docs/setup)](setupmdx.md): In XState version 5, you can now use the`setup({ ... })`function to setup types and sources for your machines. This... - [Sign up for Stately Studio (/docs/sign-up)](sign-upmdx.md): [Sign up for a Stately Studio account from the sign up page](https://stately.ai/registry/login) or using the **Sign i... - [Simulate mode (/docs/simulate-mode)](simulate-modemdx.md): import { Play, ListOrderedIcon, RefreshCcw, AlertCircle } from 'lucide-react'; - [@xstate/store-solid (/docs/xstate-store/solid)](solidmdx.md): The`@xstate/store-solid`package provides Solid bindings for [XState Store](/docs/xstate-store). It includes utiliti... - [Sources (/docs/sources)](sourcesmdx.md): import { Code, PenSquare, TextQuote } from 'lucide-react'; - [Spawn (/docs/spawn)](spawnmdx.md): Sometimes invoking [actors](actors) may not be flexible enough for your needs. For example, you might want to: - [State done events (/docs/state-done-events)](state-done-eventsmdx.md): A **state done event** transitions from a parent state when one of its child states reaches its final state. State ... - [State machine actors (/docs/state-machine-actors)](state-machine-actorsmdx.md): import { Info } from 'lucide-react'; - [What are state machines and statecharts? (/docs/state-machines-and-statecharts)](state-machines-and-statechartsmdx.md): State machines help us model how a process goes from state to state when an event occurs. - [Stately Sky getting started (/docs/stately-sky-getting-started)](stately-sky-getting-startedmdx.md): This guide will walk you through deploying a simple traffic light state machine workflow with Stately Sky using [XSta... - [State (/docs/states)](statesmdx.md): A state describes the machine’s status or mode, which could be as simple as *Paused* and *Playing*. A state mach... - [Stately Studio API (/docs/studio-api)](studio-apimdx.md): You can use the Studio's REST API to access your projects and machines in any of your external projects. This allows ... - [Stately Studio Community plan (/docs/studio-community-plan)](studio-community-planmdx.md): **Stately Studio will always be free to our Community users** on this free plan, and we will make many future feature... - [Stately Studio Enterprise plan (/docs/studio-enterprise-plan)](studio-enterprise-planmdx.md): import { Mail } from 'lucide-react'; - [Stately Studio Pro plan (/docs/studio-pro-plan)](studio-pro-planmdx.md): [Upgrade to a Pro account](https://stately.ai/pricing) to create more expressive flows, work faster with AI assistanc... - [Stately Studio Team plan (/docs/studio-team-plan)](studio-team-planmdx.md): [Upgrade to a Team account](https://stately.ai/pricing) to enjoy all of our Pro features as well as many features des... - [Stately Studio (/docs/studio)](studiomdx.md): import { HelpCircle, GraduationCap, MoreHorizontal, ThemedImage } from 'lucide-react'; - [@xstate/store-svelte (/docs/xstate-store/svelte)](sveltemdx.md): The`@xstate/store-svelte`package provides Svelte bindings for [XState Store](/docs/xstate-store). It includes utili... - [Systems (/docs/system)](systemmdx.md): An actor system is a collection of actors that can communicate with each other. Actors can invoke/spawn other actors,... - [Tags (/docs/tags)](tagsmdx.md): State nodes can have **tags**, which are string terms that help group or categorize the state node. For example, you ... - [Teams (/docs/teams)](teamsmdx.md): import { MoreHorizontal } from 'lucide-react'; - [Templates (/docs/templates)](templatesmdx.md): XState runs anywhere you can run JavaScript and is framework-agnostic. - [Testing (/docs/testing)](testingmdx.md): Testing actor logic is important for ensuring that the logic is correct and that it behaves as expected. You can test... - [Transition Actors (/docs/transition-actors)](transition-actorsmdx.md): Transition actors are actors whose logic is represented by a **state-transition function**, which is a function that ... - [Events and transitions (/docs/transitions)](transitionsmdx.md): A **transition** is a change from one finite state to another, triggered by an event. - [Typegen (/docs/typegen)](typegenmdx.md): Typegen is not supported in XState version 5. - [TypeScript (/docs/typescript)](typescriptmdx.md): XState v5 and its related libraries are written in [TypeScript](https://www.typescriptlang.org), and utilize complex ... - [Upgrade your Stately Studio account (/docs/upgrade)](upgrademdx.md): import { CircleDollarSign, ThemedImage } from 'lucide-react'; - [Share machines using their share URL (/docs/url)](urlmdx.md): You can share machines with your team or publicly with the machine URL. - [User preferences (/docs/user-preferences)](user-preferencesmdx.md): import { Sun, Moon, Sparkle } from 'lucide-react'; - [Version history (/docs/versions)](versionsmdx.md): import { History, ArchiveRestore, X, Copy, Trash, Info } from 'lucide-react'; - [Visualizer (deprecated) (/docs/visualizer)](visualizermdx.md): Are you looking for the *Stately Studio* visual *editor*? Check out the [Stately Studio overview](/). - [@xstate/store-vue (/docs/xstate-store/vue)](vuemdx.md): The`@xstate/store-vue`package provides Vue bindings for [XState Store](/docs/xstate-store). It includes composables... - [@xstate/fsm (/docs/xstate-fsm)](xstate-fsmmdx.md): The [@xstate/fsm package](https://github.com/statelyai/xstate/tree/main/packages/xstate-fsm) is deprecated in XState ... - [@xstate/graph (/docs/xstate-graph)](xstate-graphmdx.md): The [@xstate/graph package](https://github.com/statelyai/xstate/tree/main/packages/xstate-graph) contains graph algor... - [@xstate/immer (/docs/xstate-immer)](xstate-immermdx.md): The [@xstate/immer package](https://github.com/statelyai/xstate/tree/main/packages/xstate-immer) is deprecated in XSt... - [@xstate/react (/docs/xstate-react)](xstate-reactmdx.md): The [@xstate/react package](https://github.com/statelyai/xstate/tree/main/packages/xstate-react) contains hooks and h... - [@xstate/store (/docs/xstate-store-v2)](xstate-store-v2mdx.md): **Version 2.x** ([Version 3.x docs](./xstate-store)) - [@xstate/store (/docs/xstate-store)](xstate-storemdx.md): XState Store is a small library for simple state management in JavaScript/TypeScript applications. It is meant for up... - [@xstate/svelte (/docs/xstate-svelte)](xstate-sveltemdx.md): The [@xstate/svelte package](https://github.com/statelyai/xstate/tree/main/packages/xstate-svelte) contains utilities... - [@xstate/test (/docs/xstate-test)](xstate-testmdx.md): The latest version of the model-based testing utilities (prev.`@xstate/test`) are now part of the latest`@xstate/gr... - [XState VS Code extension (/docs/xstate-vscode-extension)](xstate-vscode-extensionmdx.md): The [XState VS Code extension](https://marketplace.visualstudio.com/items?itemName=statelyai.stately-vscode) enhances... - [@xstate/vue (/docs/xstate-vue)](xstate-vuemdx.md): The [@xstate/vue package](https://github.com/statelyai/xstate/tree/main/packages/xstate-vue) contains utilities for u... - [XState (/docs/xstate)](xstatemdx.md): XState is a state management and orchestration solution for JavaScript and TypeScript apps.