@xstate/inspect

XState inspection utilities

Usage no npm install needed!

<script type="module">
  import xstateInspect from 'https://cdn.skypack.dev/@xstate/inspect';
</script>

README

@xstate/inspect

This package contains inspection tools for XState.

Templates

Inspector running from CodeSandbox

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

Installation

Install with npm or yarn:

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

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
});

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 });