https://github.com/statelyai/xstate-viz

Visualizer for XState machines
https://github.com/statelyai/xstate-viz

hacktoberfest state state-machine state-management typescript visualization workflow xstate

Last synced: about 2 months ago
JSON representation

Visualizer for XState machines

• Host: GitHub
• URL: https://github.com/statelyai/xstate-viz
• Owner: statelyai
• License: mit
• Archived: true
• Created: 2021-04-20T01:22:34.000Z (over 3 years ago)
• Default Branch: dev
• Last Pushed: 2023-11-03T17:59:51.000Z (11 months ago)
• Last Synced: 2024-06-17T17:13:46.763Z (3 months ago)
• Topics: hacktoberfest, state, state-machine, state-management, typescript, visualization, workflow, xstate
• Language: TypeScript
• Homepage: https://stately.ai/viz
• Size: 117 MB
• Stars: 431
• Watchers: 9
• Forks: 100
• Open Issues: 99
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# XState (Legacy) Visualizer

Visualize [XState](https://stately.ai/docs/xstate) state machines and statecharts in real-time.

[🪄 Use the new Stately visual editor](https://state.new?source=viz-readme)

[🔗 Use the legacy Visualizer](https://stately.ai/viz).

## Usage

[Visit stately.ai/viz to use the Visualizer](https://stately.ai/viz?source=viz-readme).

Alternatively, you can install it locally (see installation)

## Features

- Create XState machines in JavaScript or TypeScript right in the visualizer

- Simulate machines visually by clicking on events

- Pan and zoom into the visualized machine

- View current machine state

- View list of events sent to the simulated machine

- Access quick features via the command palette: cmd/ctrl + k

- Inspect machines by setting `url: 'https://stately.ai/viz?inspect'` in `@xstate/inspect`

## Installation

1. Clone this GitHub repo

1. Run `yarn install`

1. Run `yarn start` and visit [localhost:3000/viz](http://localhost:3000/viz)

## Releases

https://www.loom.com/share/5357e00577e64387b45de8ee65cb3805