Stately.ai Inspect

The @statelyai/inspect package enables developers to visually inspect state transitions and actor communication in any JavaScript/TypeScript app.

Documentation: stately.ai/docs/inspector

Features

• Visualize state machines
• Visualize sequence diagrams
• Works best with XState
• Can be used with any framework or library (or none at all)

Usage

Browser inspector with XState:

1import { createBrowserInspector } from '@statelyai/inspect';
2import { createActor } from 'xstate';
3import { machine } from './someMachine';
4
5const inspector = createBrowserInspector();
6
7const actor = createActor(machine, {
8  inspect: inspector.inspect,
9});
10
11actor.start();

Browser inspector with anything:

1import { createBrowserInspector } from '@statelyai/inspect';
2
3const inspector = createBrowserInspector();
4
5// ...
6
7inspector.actor('someActor', {
8  status: 'active',
9  context: {
10    /* any context data */
11  },
12});
13
14inspector.actor('anotherActor');
15
16inspector.event('someActor', 'hello', { source: 'anotherActor' });
17
18inspector.snapshot('anotherActor', {
19  status: 'active',
20  context: {
21    /* any context data */
22  },
23});