- Install the browser extension from the Chrome Web Store or Firefox Add-ons.
- Install the xstate-ninja package in your project:
npm install --save xstate-ninja xstate- 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.
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.
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.
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 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 })