Repository files navigation

XState Ninja

A dedicated devtool for XState state machines.

---

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

npm install --save xstate-ninja xstate

3. Interpret your state machine with the providedinterpret function:

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

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

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

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

// in your index.tsimport{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.

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.

Type: LogLevels enum

Default:LogLevels.error

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

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

// ❌ DEPRECATED xstate-ninja v1importXStateNinjafrom'xstate-ninja'XStateNinja({enabled:false})// ✅ xstate-ninja v2import{configure}from'xstate-ninja'configure({enabled:false})

Ninja icons created by Good Ware - Flaticon