{"id":13393250,"url":"https://github.com/steveruizok/state-designer","last_synced_at":"2025-05-16T09:05:29.547Z","repository":{"id":42039125,"uuid":"229999804","full_name":"steveruizok/state-designer","owner":"steveruizok","description":"State management with statecharts.","archived":false,"fork":false,"pushed_at":"2023-01-07T04:39:42.000Z","size":7148,"stargazers_count":657,"open_issues_count":9,"forks_count":24,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-05-09T18:12:09.611Z","etag":null,"topics":["react","statecharts","typescript"],"latest_commit_sha":null,"homepage":"https://state-designer.com","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/steveruizok.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":["steveruizok"]}},"created_at":"2019-12-24T20:22:19.000Z","updated_at":"2025-05-07T10:16:08.000Z","dependencies_parsed_at":"2023-02-06T12:00:29.347Z","dependency_job_id":null,"html_url":"https://github.com/steveruizok/state-designer","commit_stats":null,"previous_names":[],"tags_count":120,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steveruizok%2Fstate-designer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steveruizok%2Fstate-designer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steveruizok%2Fstate-designer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steveruizok%2Fstate-designer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/steveruizok","download_url":"https://codeload.github.com/steveruizok/state-designer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254501557,"owners_count":22081528,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","statecharts","typescript"],"created_at":"2024-07-30T17:00:47.574Z","updated_at":"2025-05-16T09:05:24.538Z","avatar_url":"https://github.com/steveruizok.png","language":"HTML","funding_links":["https://github.com/sponsors/steveruizok"],"categories":["HTML","TypeScript"],"sub_categories":[],"readme":"# State Designer\n\nState 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.\n\n- **See examples in [React](https://codesandbox.io/s/state-designer-react-r0z0v) and [TypeScript](https://codesandbox.io/s/state-designer-react-typescript-op1qk).**\n- **Learn more at [state-designer.com](https://state-designer.com).**\n\n## Features\n\n- Write [state-charts](https://statecharts.github.io/) in a simple declarative syntax.\n- Create both global and local component states.\n- Use selectors to subscribe to just the data you need.\n\n## Packages\n\n- [`@state-designer/core`](https://github.com/steveruizok/state-designer/tree/master/packages/core) - Core library.\n- [`@state-designer/react`](https://github.com/steveruizok/state-designer/tree/master/packages/react) - React hook.\n\n## Usage\n\nUsing State Designer involves three steps:\n\n1. Create a state with a configuration object.\n2. Subscribe to the state's updates.\n3. Send events to the state.\n\nYour exact usage will depend on your framework:\n\n- [Usage in JavaScript](https://github.com/steveruizok/state-designer/tree/master/packages/core#usage)\n- [Usage in React](https://github.com/steveruizok/state-designer/tree/master/packages/react#usage)\n\n## Inspiration\n\nState 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).\n\n## Author\n\n- [Steve Ruiz](https://twitter.com/@steveruizok)\n\n## License\n\n[MIT](https://oss.ninja/mit/steveruizok)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsteveruizok%2Fstate-designer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsteveruizok%2Fstate-designer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsteveruizok%2Fstate-designer/lists"}