{"id":13395403,"url":"https://github.com/statelyai/xstate","last_synced_at":"2026-05-28T01:10:49.359Z","repository":{"id":37042108,"uuid":"42455934","full_name":"statelyai/xstate","owner":"statelyai","description":"State machines, statecharts, and actors for complex logic","archived":false,"fork":false,"pushed_at":"2026-05-22T19:04:50.000Z","size":274134,"stargazers_count":29643,"open_issues_count":128,"forks_count":1358,"subscribers_count":185,"default_branch":"main","last_synced_at":"2026-05-24T10:46:10.538Z","etag":null,"topics":["background-jobs","finite-state-machine","fsm","hacktoberfest","interpreter","javascript","orchestration","scxml","state","state-machine","state-management","statechart","statecharts","typescript","visualizer","workflow"],"latest_commit_sha":null,"homepage":"https://stately.ai/docs","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/statelyai.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null},"funding":{"github":"davidkpiano","patreon":null,"open_collective":"xstate","ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2015-09-14T15:04:15.000Z","updated_at":"2026-05-23T16:42:11.000Z","dependencies_parsed_at":"2023-12-20T06:44:50.743Z","dependency_job_id":"7f502e3e-3a98-4e37-86dc-ced2e1728afd","html_url":"https://github.com/statelyai/xstate","commit_stats":{"total_commits":5172,"total_committers":382,"mean_commits":"13.539267015706807","dds":0.4303944315545244,"last_synced_commit":"d67b71dd25d457a2a59f2c943db13f50fab7ec3d"},"previous_names":["davidkpiano/xstate","davidkpiano/estado"],"tags_count":561,"template":false,"template_full_name":null,"purl":"pkg:github/statelyai/xstate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/statelyai%2Fxstate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/statelyai%2Fxstate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/statelyai%2Fxstate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/statelyai%2Fxstate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/statelyai","download_url":"https://codeload.github.com/statelyai/xstate/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/statelyai%2Fxstate/sbom","scorecard":{"id":327014,"data":{"date":"2025-08-11","repo":{"name":"github.com/statelyai/xstate","commit":"bfc4ba2824d12bf3ff32b2206dac7e83838087c4"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":5.4,"checks":[{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Code-Review","score":6,"reason":"Found 13/19 approved changesets -- score normalized to 6","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Token-Permissions","score":10,"reason":"GitHub workflow tokens follow principle of least privilege","details":["Warn: jobLevel 'contents' permission set to 'write': .github/workflows/release.yml:16","Info: topLevel 'contents' permission set to 'read': .github/workflows/nodejs.yml:13","Info: found token with 'none' permissions: .github/workflows/release.yml:1"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Maintained","score":10,"reason":"30 commit(s) and 10 issue activity found in the last 90 days -- score normalized to 10","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nodejs.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/statelyai/xstate/nodejs.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/statelyai/xstate/release.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/statelyai/xstate/release.yml/main?enable=pin","Info:   0 out of   2 GitHub-owned GitHubAction dependencies pinned","Info:   0 out of   1 third-party GitHubAction dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 27 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"106 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99","Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-64vr-g452-qvp3","Warn: Project is vulnerable to: GHSA-9cwx-2883-4wfx","Warn: Project is vulnerable to: GHSA-vg6x-rcgg-rjx6","Warn: Project is vulnerable to: GHSA-x574-m823-4x7w","Warn: Project is vulnerable to: GHSA-4r4m-qw57-chr8","Warn: Project is vulnerable to: GHSA-xcj6-pq6g-qj4x","Warn: Project is vulnerable to: GHSA-356w-63v5-8wf4","Warn: Project is vulnerable to: GHSA-859w-5945-r5v3","Warn: Project is vulnerable to: GHSA-g3ch-rx76-35fx","Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7","Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x","Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747","Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5","Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp","Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq","Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr","Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765","Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g","Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr","Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6","Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59","Warn: Project is vulnerable to: GHSA-566m-qj78-rww5","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-qxrj-hx23-xp82","Warn: Project is vulnerable to: GHSA-593f-38f6-jp5m","Warn: Project is vulnerable to: GHSA-x2rg-q646-7m2v","Warn: Project is vulnerable to: GHSA-jgmv-j7ww-jx2x","Warn: Project is vulnerable to: GHSA-mv48-hcvh-8jj8","Warn: Project is vulnerable to: GHSA-353f-5xf4-qw67","Warn: Project is vulnerable to: GHSA-jr5f-v2jv-69x6","Warn: Project is vulnerable to: GHSA-vc8w-jr9v-vj7f","Warn: Project is vulnerable to: GHSA-hqq7-2q2v-82xq","Warn: Project is vulnerable to: GHSA-q8gg-vj6m-hgmj","Warn: Project is vulnerable to: GHSA-xffm-g5w8-qvg7","Warn: Project is vulnerable to: GHSA-h452-7996-h45h","Warn: Project is vulnerable to: GHSA-36jr-mh4h-2g58","Warn: Project is vulnerable to: GHSA-p3vf-v8qc-cwcr","Warn: Project is vulnerable to: GHSA-gx9m-whjm-85jf","Warn: Project is vulnerable to: GHSA-mmhx-hmjr-r674","Warn: Project is vulnerable to: GHSA-vhxf-7vqr-mrjg","Warn: Project is vulnerable to: GHSA-qrmc-fj45-qfc2","Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q","Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c","Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc","Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp","Warn: Project is vulnerable to: GHSA-8mmm-9v2q-x3f9","Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97","Warn: Project is vulnerable to: GHSA-7wwv-vh3v-89cq","Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m","Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27","Warn: Project is vulnerable to: GHSA-4www-5p9h-95mh","Warn: Project is vulnerable to: GHSA-9gqv-wp59-fq42","Warn: Project is vulnerable to: GHSA-8g7p-74h8-hg48","Warn: Project is vulnerable to: GHSA-pc5p-h8pf-mvwp","Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-6vfc-qv3f-vr6c","Warn: Project is vulnerable to: GHSA-x3vm-38hw-55wf","Warn: Project is vulnerable to: GHSA-m4gq-x24j-jpmf","Warn: Project is vulnerable to: GHSA-wrvr-8mpx-r7pp","Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-5g97-whc9-8g7j","Warn: Project is vulnerable to: GHSA-8r4g-cg4m-x23c","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-6fw4-hr69-g3rv","Warn: Project is vulnerable to: GHSA-gqgv-6jq5-jjj9","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6","Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj","Warn: Project is vulnerable to: GHSA-3f95-r44v-8mrg","Warn: Project is vulnerable to: GHSA-28xr-mwxg-3qc8","Warn: Project is vulnerable to: GHSA-9p95-fxvg-qgq2","Warn: Project is vulnerable to: GHSA-9w5j-4mwv-2wj8","Warn: Project is vulnerable to: GHSA-8225-6cvr-8pqp","Warn: Project is vulnerable to: GHSA-8266-84wp-wv5c","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-5j4c-8p2g-v4jx","Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6","Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v","Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-c24v-8rfc-w8vw","Warn: Project is vulnerable to: GHSA-8jhw-289h-jh2g"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-18T02:42:00.398Z","repository_id":37042108,"created_at":"2025-08-18T02:42:00.398Z","updated_at":"2025-08-18T02:42:00.398Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33589803,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-05-27T02:00:06.184Z","response_time":53,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["background-jobs","finite-state-machine","fsm","hacktoberfest","interpreter","javascript","orchestration","scxml","state","state-machine","state-management","statechart","statecharts","typescript","visualizer","workflow"],"created_at":"2024-07-30T17:01:57.039Z","updated_at":"2026-05-28T01:10:49.354Z","avatar_url":"https://github.com/statelyai.png","language":"TypeScript","funding_links":["https://github.com/sponsors/davidkpiano","https://opencollective.com/xstate"],"categories":["TypeScript","四、状态管理与数据获取","State Management","Awesome XState","Web","By Industry","前端开发框架及项目","workflow","📖 Categories","hacktoberfest","Distributed \u0026 Parallel Architectures","📊 Data \u0026 Analytics","Uncategorized",":books: Libraries"],"sub_categories":["1. 状态管理（同步状态）","Other State Libraries","Data Science","其他_文本生成、文本对话","State Management","Uncategorized","Universal"],"readme":"\u003cp align=\"center\"\u003e\n  \u003cbr /\u003e\n\n  \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://raw.githubusercontent.com/statelyai/public-assets/main/logos/xstate-logo-white-nobg.svg\"\u003e\n    \u003cimg alt=\"XState logotype\" src=\"https://raw.githubusercontent.com/statelyai/public-assets/main/logos/xstate-logo-black-nobg.svg\" width=\"200\"\u003e\n  \u003c/picture\u003e\n  \u003cbr /\u003e\n    \u003cstrong\u003eActor-based state management \u0026 orchestration for complex app logic.\u003c/strong\u003e \u003ca href=\"https://stately.ai/docs\"\u003e→ Documentation\u003c/a\u003e\n  \u003cbr /\u003e\n  \u003cbr /\u003e\n\u003c/p\u003e\n\nXState is a state management and orchestration solution for JavaScript and TypeScript apps. It has _zero_ dependencies, and is useful for frontend and backend application logic.\n\nIt uses event-driven programming, state machines, statecharts, and the actor model to handle complex logic in predictable, robust, and visual ways. XState provides a powerful and flexible way to manage application and workflow state by allowing developers to model logic as actors and state machines.\n\n### ✨ Create state machines visually in Stately Studio → [state.new](https://state.new)\n\n---\n\n📖 [Read the documentation](https://stately.ai/docs)\n\n➡️ [Create state machines with the Stately Editor](https://stately.ai/editor)\n\n🖥 [Download our VS Code extension](https://marketplace.visualstudio.com/items?itemName=statelyai.stately-vscode)\n\n📑 Inspired by the [SCXML specification](https://www.w3.org/TR/scxml/)\n\n💬 Chat on the [Stately Discord Community](https://discord.gg/xstate)\n\n✍️ Browse through the many [XState examples](https://github.com/statelyai/xstate/tree/main/examples)\n\n## Which package should I use?\n\nPick based on what you need:\n\n- **[`@xstate/store`](#xstate-store)**: simple event-based state management. \u003c1kb, great TypeScript inference, similar in spirit to Redux/Zustand. Start here if you just need a store.\n- **[`xstate`](#super-quick-start)**: state machines, statecharts, actors, effects, and orchestration for complex app logic.\n\nThey work great together, but you don't need one to use the other.\n\n## Sponsors\n\nSpecial thanks to the sponsors who support this open-source project:\n\n\u003cimg src=\"https://opencollective.com/xstate/tiers/backer/badge.svg?label=sponsors\u0026color=brightgreen\" /\u003e\n\n## Templates\n\nGet started by forking one of these templates on CodeSandbox:\n\n\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\u003cth\u003eTemplate\u003c/th\u003e\u003cth\u003e\u003c/th\u003e\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\n\u003ctr\u003e\n\u003ctd\u003e\n\n[🤖 XState Template (CodeSandbox)](https://codesandbox.io/p/devbox/github/statelyai/xstate/tree/main/templates/vanilla-ts)\n\n[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/statelyai/xstate/tree/main/templates/vanilla-ts?file=%2Fsrc%2FfeedbackMachine.ts)\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n- XState v5\n- TypeScript\n- _No framework_\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003e\n\n[⚛️ XState + React Template (CodeSandbox)](https://codesandbox.io/p/devbox/github/statelyai/xstate/tree/main/templates/react-ts)\n\n[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/statelyai/xstate/tree/main/templates/react-ts?file=%2Fsrc%2FfeedbackMachine.ts)\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n- [React](https://react.dev/)\n- XState v5\n- TypeScript\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003e\n\n[💚 XState + Vue Template (CodeSandbox)](https://codesandbox.io/p/devbox/github/statelyai/xstate/tree/main/templates/vue-ts)\n\n[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/statelyai/xstate/tree/main/templates/vue-ts?file=%2Fsrc%2FfeedbackMachine.ts)\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n- [Vue](https://vuejs.org/)\n- XState v5\n- TypeScript\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003e\n\n[🧡 XState + Svelte Template (CodeSandbox)](https://codesandbox.io/p/devbox/github/statelyai/xstate/tree/main/templates/svelte-ts)\n\n[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/statelyai/xstate/tree/main/templates/svelte-ts?file=%2Fsrc%2FfeedbackMachine.ts)\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n- [Svelte](https://svelte.dev/)\n- XState v5\n- TypeScript\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n## Super quick start\n\n```bash\nnpm install xstate\n```\n\n```ts\nimport { createMachine, createActor, assign } from 'xstate';\n\n// State machine\nconst toggleMachine = createMachine({\n  id: 'toggle',\n  initial: 'inactive',\n  context: {\n    count: 0\n  },\n  states: {\n    inactive: {\n      on: {\n        TOGGLE: { target: 'active' }\n      }\n    },\n    active: {\n      entry: assign({ count: ({ context }) =\u003e context.count + 1 }),\n      on: {\n        TOGGLE: { target: 'inactive' }\n      }\n    }\n  }\n});\n\n// Actor (instance of the machine logic, like a store)\nconst toggleActor = createActor(toggleMachine);\ntoggleActor.subscribe((state) =\u003e console.log(state.value, state.context));\ntoggleActor.start();\n// =\u003e logs 'inactive', { count: 0 }\n\ntoggleActor.send({ type: 'TOGGLE' });\n// =\u003e logs 'active', { count: 1 }\n\ntoggleActor.send({ type: 'TOGGLE' });\n// =\u003e logs 'inactive', { count: 1 }\n```\n\n---\n\n\u003ca id=\"xstate-store\"\u003e\u003c/a\u003e\n\n## `@xstate/store`: simple state management\n\nNot every app needs all the features of state machines and statecharts. **[`@xstate/store`](https://github.com/statelyai/xstate/tree/main/packages/xstate-store)** is a separate, extremely small event-based store with first-class TypeScript inference; similar to Redux or Zustand, but with less boilerplate.\n\nUse it on its own, or graduate to full XState machines when your logic gets more complex.\n\n```bash\nnpm install @xstate/store\n```\n\n```ts\nimport { createStore } from '@xstate/store';\n\nconst donutStore = createStore({\n  context: {\n    donuts: 0,\n    favoriteFlavor: 'chocolate'\n  },\n  on: {\n    addDonut: (context) =\u003e ({ ...context, donuts: context.donuts + 1 }),\n    changeFlavor: (context, event: { flavor: string }) =\u003e ({\n      ...context,\n      favoriteFlavor: event.flavor\n    }),\n    eatAllDonuts: (context) =\u003e ({ ...context, donuts: 0 })\n  }\n});\n\ndonutStore.subscribe((snapshot) =\u003e {\n  console.log(snapshot.context);\n});\n\ndonutStore.send({ type: 'addDonut' });\n// =\u003e { donuts: 1, favoriteFlavor: 'chocolate' }\n\ndonutStore.send({ type: 'changeFlavor', flavor: 'strawberry' });\n// =\u003e { donuts: 1, favoriteFlavor: 'strawberry' }\n```\n\n📖 See the [`@xstate/store` README](https://github.com/statelyai/xstate/tree/main/packages/xstate-store) for React/Solid bindings, selectors, and more.\n\n---\n\n## [Stately Studio](https://stately.ai)\n\n- Visually create, edit, and collaborate on state machines\n- Export to many formats, including XState v5\n- Test path \u0026 documentation autogeneration\n- Deploy to Stately Sky\n- Generate \u0026 modify machines with Stately AI\n\n\u003ca href=\"stately.ai/registry/new?ref=github\" title=\"Stately Studio\"\u003e\n  \u003cimg src=\"https://github.com/statelyai/xstate/assets/1093738/74ed9cbc-b824-4ed7-a16d-f104947af8a7\" alt=\"XState Viz\" width=\"800\" /\u003e\n\u003c/a\u003e\n\n**[state.new](https://stately.ai/registry/new?ref=github)**\n\n## Why?\n\nStatecharts are a formalism for modeling stateful, reactive systems. This is useful for declaratively describing the _behavior_ of your application, from the individual components to the overall application logic.\n\nRead [📽 the slides](http://slides.com/davidkpiano/finite-state-machines) ([🎥 video](https://www.youtube.com/watch?v=VU1NKX6Qkxc)) or check out these resources for learning about the importance of finite state machines and statecharts in user interfaces:\n\n- [Statecharts - A Visual Formalism for Complex Systems](https://www.sciencedirect.com/science/article/pii/0167642387900359/pdf) by David Harel\n- [The World of Statecharts](https://statecharts.github.io/) by Erik Mogensen\n\n## Packages\n\n| Package                                                                                     | Description                                                                                                                  |\n| ------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |\n| 🤖 `xstate`                                                                                 | Core finite state machine and statecharts library + interpreter, including graph traversal and model-based testing utilities |\n| [🏪 `@xstate/store`](https://github.com/statelyai/xstate/tree/main/packages/xstate-store)   | Simple event-based state management (\u003c1kb) — standalone, works with or without `xstate`                                      |\n| [⚛️ `@xstate/react`](https://github.com/statelyai/xstate/tree/main/packages/xstate-react)   | React hooks and utilities for using XState in React applications                                                             |\n| [💚 `@xstate/vue`](https://github.com/statelyai/xstate/tree/main/packages/xstate-vue)       | Vue composition functions and utilities for using XState in Vue applications                                                 |\n| [🎷 `@xstate/svelte`](https://github.com/statelyai/xstate/tree/main/packages/xstate-svelte) | Svelte utilities for using XState in Svelte applications                                                                     |\n| [🥏 `@xstate/solid`](https://github.com/statelyai/xstate/tree/main/packages/xstate-solid)   | Solid hooks and utilities for using XState in Solid applications                                                             |\n| [🔍 `@statelyai/inspect`](https://github.com/statelyai/inspect)                             | Inspection utilities for XState                                                                                              |\n\n## Finite State Machines\n\n\u003ctable\u003e\n\u003cthead\u003e\u003ctr\u003e\u003cth\u003eCode\u003c/th\u003e\u003cth\u003eStatechart\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003e\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) =\u003e {\n  console.log(state.value);\n});\n\nactor.start();\n// logs 'green'\n\nactor.send({ type: 'TIMER' });\n// logs 'yellow'\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n\u003ca href=\"https://stately.ai/registry/editor/fa443471-b416-4014-8e6f-12417863e4d4?mode=design\u0026machineId=27e86036-f2f7-40f1-9d1e-66ce6e1accc0\" title=\"Finite states\"\u003e\n  \u003cimg src=\"https://github.com/statelyai/xstate/assets/1093738/36d4b6b5-e3d0-4c19-9f41-2e3425ceac88\" alt=\"Finite states\" width=\"400\" /\u003e\n  \u003cbr /\u003e\n  Open in Stately Studio\n\u003c/a\u003e\n\u003cbr /\u003e\n\n\u003c/td\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n## Hierarchical (Nested) State Machines\n\n\u003ctable\u003e\n\u003cthead\u003e\u003ctr\u003e\u003cth\u003eCode\u003c/th\u003e\u003cth\u003eStatechart\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003e\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) =\u003e {\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\u003c/td\u003e\n\u003ctd\u003e\n\u003ca href=\"https://stately.ai/registry/editor/fa443471-b416-4014-8e6f-12417863e4d4?mode=design\u0026machineId=30dffcdd-16c2-49e2-bfc6-a674057cb271\" title=\"Hierarchical states\"\u003e\n  \u003cimg src=\"https://github.com/statelyai/xstate/assets/1093738/32b0692b-1c29-4469-b5e3-03146e3ef249\" alt=\"Hierarchical states\" width=\"400\" /\u003e\n  \u003cbr /\u003e\n  Open in Stately Studio\n\u003c/a\u003e\n\u003cbr /\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n## Parallel State Machines\n\n\u003ctable\u003e\n\u003cthead\u003e\u003ctr\u003e\u003cth\u003eCode\u003c/th\u003e\u003cth\u003eStatechart\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003e\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) =\u003e {\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\u003c/td\u003e\n\u003ctd\u003e\n\u003ca href=\"https://stately.ai/registry/editor/fa443471-b416-4014-8e6f-12417863e4d4?mode=design\u0026machineId=980f50d8-e1ff-4441-8c8b-afe41c1610f2\" title=\"Parallel states\"\u003e\n  \u003cimg src=\"https://github.com/statelyai/xstate/assets/1093738/3b1989c0-f4a9-4653-baf2-4df3a40e91a6\" alt=\"Parallel states\" width=\"400\" /\u003e\n  \u003cbr /\u003e\n  Open in Stately Studio\n\u003c/a\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n## History States\n\n\u003ctable\u003e\n\u003cthead\u003e\u003ctr\u003e\u003cth\u003eCode\u003c/th\u003e\u003cth\u003eStatechart\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003e\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) =\u003e {\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\u003c/td\u003e\n\u003ctd\u003e\n\u003ca href=\"https://stately.ai/registry/editor/fa443471-b416-4014-8e6f-12417863e4d4?mode=design\u0026machineId=d1a9bb95-db97-4af3-b38b-71b005c643d3\" title=\"History states\"\u003e\n  \u003cimg src=\"https://github.com/statelyai/xstate/assets/1093738/1be5c495-d560-4660-94f2-5341efbf7128\" alt=\"History state\" width=\"400\" /\u003e\n  \u003cbr /\u003e\n  Open in Stately Studio\n\u003c/a\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n## SemVer Policy\n\nWe understand the importance of the public contract and do not intend to release any breaking changes to the **runtime** API in a minor or patch release. We consider this with any changes we make to the XState libraries and aim to minimize their effects on existing users.\n\n### Breaking changes\n\nXState executes much of the user logic itself. Therefore, almost any change to its behavior might be considered a breaking change. We recognize this as a potential problem but believe that treating every change as a breaking change is not practical. We do our best to implement new features thoughtfully to enable our users to implement their logic in a better, safer way.\n\nAny change _could_ affect how existing XState machines behave if those machines are using particular configurations. We do not introduce behavior changes on a whim and aim to avoid making changes that affect most existing machines. But we reserve the right to make _some_ behavior changes in minor releases. Our best judgment of the situation will always dictate such changes. Please always read our release notes before deciding to upgrade.\n\n### TypeScript changes\n\nWe also reserve a similar right to adjust declared TypeScript definitions or drop support for older versions of TypeScript in a minor release. The TypeScript language itself evolves quickly and often introduces breaking changes in its minor releases. Our team is also continuously learning how to leverage TypeScript more effectively - and the types improve as a result.\n\nFor these reasons, it is impractical for our team to be bound by decisions taken when an older version of TypeScript was its latest version or when we didn’t know how to declare our types in a better way. We won’t introduce declaration changes often - but we are more likely to do so than with runtime changes.\n\n### Packages\n\nMost of the packages in the XState family declare a peer dependency on XState itself. We’ll be cautious about maintaining compatibility with already-released packages when releasing a new version of XState, **but** each release of packages depending on XState will always adjust the declared peer dependency range to include the latest version of XState. For example, you should always be able to update `xstate` without `@xstate/react`. But when you update `@xstate/react`, we highly recommend updating `xstate` too.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstatelyai%2Fxstate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstatelyai%2Fxstate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstatelyai%2Fxstate/lists"}