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:

1. Create a state with a configuration object.
2. Subscribe to the state’s updates.
3. Send events to the state.

Your exact usage will depend on your framework:

• Usage in JavaScript
• Usage in React

Inspiration

State Designer is heavily inspired by xstate. Note that, unlike xstate, State Designer does not adhere to the scxml spec.

Author

• Steve Ruiz

License

MIT