XState Ninja

A dedicated devtool for XState state machines.

---

Screenshots

Quick Start

1. Install the browser extension from the Chrome Web Store or Firefox Add-ons.
2. Install the xstate-ninja package in your project:

npm install --save xstate-ninja xstate

3. Interpret your state machine with the provided interpret function:

import { interpret } from 'xstate-ninja'
const actor = interpret(machine, { devTools: true })

For React integration, check the @xstate-ninja/react library. For Vue integration, check the @xstate-ninja/vue library.

How it works

The interpret function is just a thin wrapper around the core interpreter provided by the XState library. It accepts the same argument as the XState's interpret function. It observes your state machines and sends updates to the XState Ninja browser extension.

Configuration

To change default settings, import the XState Ninja instance in your project's index file:

// in your index.ts
import { configure, LogLevels } from 'xstate-ninja'

configure({
  enabled: process.env.NODE_ENV !== 'production',
  logLevel: LogLevels.debug,
})

XState Ninja is a singleton, so wherever you change these settings, they will be applied throughout your application.

enabled

Type: boolean

Default: true

Turns XState Ninja on or off. By default, tracking is always on. You may want to disable tracking in the production mode to improve performance.

logLevel

Type: LogLevels enum

Default: LogLevels.error

Controls how much stuff is logged into console by XState Ninja.

Upgrading from v1 → v2

If you were using the default export to configure XState Ninja, replace it with the configure function:

// ❌ DEPRECATED xstate-ninja v1
import XStateNinja from 'xstate-ninja'
XStateNinja({ enabled: false })

// ✅ xstate-ninja v2
import { configure } from 'xstate-ninja'
configure({ enabled: false })

Attribution

Ninja icons created by Good Ware - Flaticon