State Designer
State Designer is a JavaScript and TypeScript library for managing the state of a user interface. It prioritizes the design experience, making it easy to experiment with ideas, iterate on solutions, and communicate the final result.
- See examples in React and TypeScript.
- Learn more at state-designer.com.
Features
- Write state-charts in a simple declarative syntax.
- Create both global and local component states.
- Use selectors to subscribe to just the data you need.
Packages
@state-designer/core- Core library.@state-designer/react- React hook.
Usage
Using State Designer involves three steps:
- Create a state with a configuration object.
- Subscribe to the state's updates.
- Send events to the state.
Your exact usage will depend on your framework:
Inspiration
State Designer is heavily inspired by xstate. Note that, unlike xstate, State Designer does not adhere to the scxml spec.