https://github.com/steveruizok/state-designer
State management with statecharts.
https://github.com/steveruizok/state-designer
react statecharts typescript
Last synced: 10 months ago
JSON representation
State management with statecharts.
- Host: GitHub
- URL: https://github.com/steveruizok/state-designer
- Owner: steveruizok
- License: mit
- Created: 2019-12-24T20:22:19.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T04:39:42.000Z (about 3 years ago)
- Last Synced: 2025-05-09T18:12:09.611Z (10 months ago)
- Topics: react, statecharts, typescript
- Language: HTML
- Homepage: https://state-designer.com
- Size: 6.82 MB
- Stars: 657
- Watchers: 13
- Forks: 24
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
- awesome-list - state-designer
README
# 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](https://codesandbox.io/s/state-designer-react-r0z0v) and [TypeScript](https://codesandbox.io/s/state-designer-react-typescript-op1qk).**
- **Learn more at [state-designer.com](https://state-designer.com).**
## Features
- Write [state-charts](https://statecharts.github.io/) 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`](https://github.com/steveruizok/state-designer/tree/master/packages/core) - Core library.
- [`@state-designer/react`](https://github.com/steveruizok/state-designer/tree/master/packages/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](https://github.com/steveruizok/state-designer/tree/master/packages/core#usage)
- [Usage in React](https://github.com/steveruizok/state-designer/tree/master/packages/react#usage)
## Inspiration
State Designer is heavily inspired by [xstate](https://github.com/davidkpiano/xstate). Note that, unlike xstate, State Designer does not adhere to the [scxml spec](https://en.wikipedia.org/wiki/SCXML).
## Author
- [Steve Ruiz](https://twitter.com/@steveruizok)
## License
[MIT](https://oss.ninja/mit/steveruizok)