Find Similar Packages for xstate
Search packages..
1 Year
xstateSimilar Packages:
NPM Package Downloads Trend
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
xstate1,566,04727,2641.69 MB13723 days agoMIT
Similar Npm Packages to xstate

xstate is a state management library that utilizes finite state machines and statecharts to manage complex state logic in applications. It provides a robust framework for modeling state transitions and handling side effects, making it particularly useful for applications with intricate state management needs. While xstate offers a powerful approach to managing state, there are several alternatives in the ecosystem that cater to different use cases:

  • effector is a fast and powerful state management library that focuses on reactive programming. It allows developers to create complex applications with a simple and intuitive API. Effector is designed to be highly efficient, enabling fine-grained reactivity and easy composition of state and effects. If you are looking for a library that emphasizes performance and a functional approach to state management, effector is an excellent choice.

  • mobx is a simple and scalable state management library that uses observable data structures to automatically track dependencies and update the UI when the state changes. MobX is particularly well-suited for applications where you want to minimize boilerplate code and focus on reactive programming. Its straightforward API and powerful reactivity model make it a popular choice for many developers.

  • react-query is a library designed for managing server state in React applications. It simplifies data fetching, caching, and synchronization, making it easier to work with remote data. While react-query primarily focuses on server state, it can be used alongside other state management libraries to handle client state. If your application relies heavily on remote data and requires efficient data-fetching capabilities, react-query is a great option.

  • recoil is a state management library that provides a more efficient and scalable way to manage complex state in React applications. It introduces concepts like atoms and selectors to manage state dependencies and derived state. Recoil is particularly useful for applications with intricate state relationships and can be a good alternative to more traditional state management solutions.

  • redux is one of the most popular state management libraries in the React ecosystem. It follows a unidirectional data flow and uses a centralized store to manage application state. Redux is well-suited for large applications with complex state management needs, but it can introduce boilerplate code. If you are building a large-scale application and need a robust solution, Redux is a tried-and-true option.

  • vuex is a state management library specifically designed for Vue.js applications. It follows a similar pattern to Redux but is tailored for the Vue ecosystem. If you are working with Vue.js and need a centralized state management solution, Vuex is the go-to library.

  • zustand is a minimalist state management library that focuses on simplicity and performance. It provides a straightforward API for managing state without the complexity of more extensive libraries. Zustand is ideal for small to medium-sized projects where you want to maintain a lightweight approach to state management.

To see how xstate compares with effector, mobx, react-query, recoil, redux, vuex, and zustand, check out the comparison: Comparing effector vs mobx vs react-query vs recoil vs redux vs vuex vs xstate vs zustand.

README for xstate


XState logotype
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 visually in Stately Studio → state.new

📖 Read the documentation

➡️ 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

Templates

Get started by forking one of these templates on CodeSandbox:

Template

🤖 XState Template (CodeSandbox)

Open in StackBlitz
  • XState v5
  • TypeScript
  • No framework

⚛️ XState + React Template (CodeSandbox)

Open in StackBlitz
  • React
  • XState v5
  • TypeScript

💚 XState + Vue Template (CodeSandbox)

Open in StackBlitz
  • Vue
  • XState v5
  • TypeScript

🧡 XState + Svelte Template (CodeSandbox)

Open in StackBlitz

Super quick start

npm install xstate

import { createMachine, createActor, assign } from 'xstate';

// State machine
const toggleMachine = createMachine({
  id: 'toggle',
  initial: 'inactive',
  context: {
    count: 0
  },
  states: {
    inactive: {
      on: {
        TOGGLE: { target: 'active' }
      }
    },
    active: {
      entry: assign({ count: ({ context }) => context.count + 1 }),
      on: {
        TOGGLE: { target: 'inactive' }
      }
    }
  }
});

// Actor (instance of the machine logic, like a store)
const toggleActor = createActor(toggleMachine);
toggleActor.subscribe((state) => console.log(state.value, state.context));
toggleActor.start();
// => logs 'inactive', { count: 0 }

toggleActor.send({ type: 'TOGGLE' });
// => logs 'active', { count: 1 }

toggleActor.send({ type: 'TOGGLE' });
// => logs 'inactive', { count: 1 }

Stately Studio

  • Visually create, edit, and collaborate on state machines
  • Export to many formats, including XState v5
  • Test path & documentation autogeneration
  • Deploy to Stately Sky
  • Generate & modify machines with Stately AI
XState Viz

state.new

Why?

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:

Packages

| 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 |

Finite State Machines

CodeStatechart
import { createMachine, createActor } from 'xstate';

const lightMachine = createMachine({
  id: 'light',
  initial: 'green',
  states: {
    green: {
      on: {
        TIMER: 'yellow'
      }
    },
    yellow: {
      on: {
        TIMER: 'red'
      }
    },
    red: {
      on: {
        TIMER: 'green'
      }
    }
  }
});

const actor = createActor(lightMachine);

actor.subscribe((state) => {
  console.log(state.value);
});

actor.start();
// logs 'green'

actor.send({ type: 'TIMER' });
// logs 'yellow'
CodeStatechart
 Finite states
Open in Stately Studio

Hierarchical (Nested) State Machines

CodeStatechart
import { createMachine, createActor } from 'xstate';

const pedestrianStates = {
  initial: 'walk',
  states: {
    walk: {
      on: {
        PED_TIMER: 'wait'
      }
    },
    wait: {
      on: {
        PED_TIMER: 'stop'
      }
    },
    stop: {}
  }
};

const lightMachine = createMachine({
  id: 'light',
  initial: 'green',
  states: {
    green: {
      on: {
        TIMER: 'yellow'
      }
    },
    yellow: {
      on: {
        TIMER: 'red'
      }
    },
    red: {
      on: {
        TIMER: 'green'
      },
      ...pedestrianStates
    }
  }
});

const actor = createActor(lightMachine);

actor.subscribe((state) => {
  console.log(state.value);
});

actor.start();
// logs 'green'

actor.send({ type: 'TIMER' });
// logs 'yellow'

actor.send({ type: 'TIMER' });
// logs { red: 'walk' }

actor.send({ type: 'PED_TIMER' });
// logs { red: 'wait' }
Hierarchical states
Open in Stately Studio

Parallel State Machines

CodeStatechart
import { createMachine, createActor } from 'xstate';

const wordMachine = createMachine({
  id: 'word',
  type: 'parallel',
  states: {
    bold: {
      initial: 'off',
      states: {
        on: {
          on: { TOGGLE_BOLD: 'off' }
        },
        off: {
          on: { TOGGLE_BOLD: 'on' }
        }
      }
    },
    underline: {
      initial: 'off',
      states: {
        on: {
          on: { TOGGLE_UNDERLINE: 'off' }
        },
        off: {
          on: { TOGGLE_UNDERLINE: 'on' }
        }
      }
    },
    italics: {
      initial: 'off',
      states: {
        on: {
          on: { TOGGLE_ITALICS: 'off' }
        },
        off: {
          on: { TOGGLE_ITALICS: 'on' }
        }
      }
    },
    list: {
      initial: 'none',
      states: {
        none: {
          on: {
            BULLETS: 'bullets',
            NUMBERS: 'numbers'
          }
        },
        bullets: {
          on: {
            NONE: 'none',
            NUMBERS: 'numbers'
          }
        },
        numbers: {
          on: {
            BULLETS: 'bullets',
            NONE: 'none'
          }
        }
      }
    }
  }
});

const actor = createActor(wordMachine);

actor.subscribe((state) => {
  console.log(state.value);
});

actor.start();
// logs {
//   bold: 'off',
//   italics: 'off',
//   underline: 'off',
//   list: 'none'
// }

actor.send({ type: 'TOGGLE_BOLD' });
// logs {
//   bold: 'on',
//   italics: 'off',
//   underline: 'off',
//   list: 'none'
// }

actor.send({ type: 'TOGGLE_ITALICS' });
// logs {
//   bold: 'on',
//   italics: 'on',
//   underline: 'off',
//   list: 'none'
// }
Parallel states
Open in Stately Studio

History States

CodeStatechart
import { createMachine, createActor } from 'xstate';

const paymentMachine = createMachine({
  id: 'payment',
  initial: 'method',
  states: {
    method: {
      initial: 'cash',
      states: {
        cash: {
          on: {
            SWITCH_CHECK: 'check'
          }
        },
        check: {
          on: {
            SWITCH_CASH: 'cash'
          }
        },
        hist: { type: 'history' }
      },
      on: { NEXT: 'review' }
    },
    review: {
      on: { PREVIOUS: 'method.hist' }
    }
  }
});

const actor = createActor(paymentMachine);

actor.subscribe((state) => {
  console.log(state.value);
});

actor.start();
// logs {
//   value: { method: 'cash' },
// }

actor.send({ type: 'SWITCH_CHECK' });
// logs {
//   value: { method: 'check' },
// }

actor.send({ type: 'NEXT' });
// logs {
//   value: 'review',
// }

actor.send({ type: 'PREVIOUS' });
// logs {
//   value: { method: 'check' },
// }
History state
Open in Stately Studio

Sponsors

Special thanks to the sponsors who support this open-source project:

Transloadit Logo

SemVer Policy

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.

Breaking changes

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.

TypeScript changes

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.

Packages

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.

Terms & PrivacyProduct HuntJSON to TypeScriptCopilotChat for Web Dev