@xstate/inspect

This package contains inspection tools for XState.

• Read the full documentation in the XState docs.
• Read our contribution guidelines.

Templates

• XState (Vanilla)
• XState + TypeScript
• XState + Vue
• XState + React

Check out the XState + Vue Minute Timer + Viz example on CodeSandbox

Installation

1. Install with npm or yarn:

npm install @xstate/inspect
# or yarn add @xstate/inspect

Via CDN

<script src="https://unpkg.com/@xstate/inspect/dist/xstate-inspect.umd.min.js"></script>

By using the global variable XStateInspect

2. Import it at the beginning of your project, before any other code is called:

import { inspect } from '@xstate/inspect';

inspect({
  // options
  // url: 'https://statecharts.io/inspect', // (default)
  iframe: false // open in new window
});

3. Add { devTools: true } to any interpreted machines you want to visualize:

import { interpret } from 'xstate';
import { inspect } from '@xstate/inspect';
// ...

const service = interpret(someMachine, { devTools: true });
service.start();