Gathering detailed insights and metrics for xstate
Gathering detailed insights and metrics for xstate
Gathering detailed insights and metrics for xstate
Gathering detailed insights and metrics for xstate
Actor-based state management & orchestration for complex app logic.
npm install xstate
Typescript
Module System
Node Version
NPM Version
99.5
Supply Chain
100
Quality
92.5
Maintenance
100
Vulnerability
100
License
@xstate/store@2.6.2
Published on 05 Dec 2024
@xstate/vue@4.0.0
Published on 12 Nov 2024
@xstate/store@2.6.1
Published on 12 Nov 2024
@xstate/svelte@4.0.0
Published on 12 Nov 2024
xstate@5.19.0
Published on 12 Nov 2024
@xstate/solid@1.0.0
Published on 12 Nov 2024
Updated on 06 Dec 2024
Minified
Minified + Gzipped
TypeScript (97.71%)
Vue (0.82%)
JavaScript (0.67%)
Svelte (0.45%)
CSS (0.27%)
HTML (0.08%)
Cumulative downloads
Total Downloads
Last day
26.7%
Compared to previous day
Last week
1.2%
Compared to previous week
Last month
3%
Compared to previous month
Last year
18.7%
Compared to previous year
Actor-based state management & orchestration for complex app logic. → Documentation
XState 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.
It 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.
➡️ Create state machines with the Stately Editor
🖥 Download our VS Code extension
📑 Inspired by the SCXML specification
💬 Chat on the Stately Discord Community
✍️ Browse through the many XState examples
Get started by forking one of these templates on CodeSandbox:
Template | |
---|---|
| |
| |
| |
|
1npm install xstate
1import { createMachine, createActor, assign } from 'xstate'; 2 3// State machine 4const toggleMachine = createMachine({ 5 id: 'toggle', 6 initial: 'inactive', 7 context: { 8 count: 0 9 }, 10 states: { 11 inactive: { 12 on: { 13 TOGGLE: { target: 'active' } 14 } 15 }, 16 active: { 17 entry: assign({ count: ({ context }) => context.count + 1 }), 18 on: { 19 TOGGLE: { target: 'inactive' } 20 } 21 } 22 } 23}); 24 25// Actor (instance of the machine logic, like a store) 26const toggleActor = createActor(toggleMachine); 27toggleActor.subscribe((state) => console.log(state.value, state.context)); 28toggleActor.start(); 29// => logs 'inactive', { count: 0 } 30 31toggleActor.send({ type: 'TOGGLE' }); 32// => logs 'active', { count: 1 } 33 34toggleActor.send({ type: 'TOGGLE' }); 35// => logs 'inactive', { count: 1 }
Statecharts 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.
Read 📽 the slides (🎥 video) or check out these resources for learning about the importance of finite state machines and statecharts in user interfaces:
Package | Description |
---|---|
🤖 xstate | Core finite state machine and statecharts library + interpreter |
📉 @xstate/graph | Graph traversal and model-based testing utilities using XState |
⚛️ @xstate/react | React hooks and utilities for using XState in React applications |
💚 @xstate/vue | Vue composition functions and utilities for using XState in Vue applications |
🎷 @xstate/svelte | Svelte utilities for using XState in Svelte applications |
🥏 @xstate/solid | Solid hooks and utilities for using XState in Solid applications |
🔍 @xstate/inspect | Inspection utilities for XState |
Code | Statechart | ||||
---|---|---|---|---|---|
|
Open in Stately Studio |
Code | Statechart |
---|---|
|
Open in Stately Studio |
Code | Statechart |
---|---|
|
Open in Stately Studio |
Code | Statechart |
---|---|
|
Open in Stately Studio |
Special thanks to the sponsors who support this open-source project:
We 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.
XState 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.
Any 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.
We 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.
For 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.
Most 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.
No vulnerabilities found.
Reason
GitHub workflow tokens follow principle of least privilege
Details
Reason
30 commit(s) and 16 issue activity found in the last 90 days -- score normalized to 10
Reason
no dangerous workflow patterns detected
Reason
license file detected
Details
Reason
no binaries found in the repo
Reason
Found 13/24 approved changesets -- score normalized to 5
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
80 existing vulnerabilities detected
Details
Score
Last Scanned on 2024-11-25
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More