XState DevTools

Inspect XState v5 machines at runtime

Chrome DevTools extension for inspecting XState v5 machines at runtime — both browser-side and Node.js-side actors — with time travel and event dispatch. Debugging XState machines with `console.log` or the Network tab is painful. You see raw JSON snapshots and event payloads with no sense of the machine's shape, and you can't tell which states are currently active, which transitions are possible, or how you got here. Standard browser DevTools know nothing about state machine topology. When an actor lives on the server, you typically have no visibility into it from the browser at all. XState DevTools solves this by embedding a purpose-built panel directly into Chrome DevTools that understands XState's actor model: * Visualises the full machine tree with active states highlighted * Shows every event as it happens and lets you rewind to any point in time * Bridges server-side Node.js actors over WebSocket so they appear alongside browser actors in the same panel * Links state definitions back to the corresponding source location in your editor To get started, follow the instructions on the project page: https://github.com/mjbeswick/xstate-devtools For XState documentation, see: https://github.com/statelyai/xstate Important notes: * This extension is intended for development and debugging purposes only. * Applications must be instrumented with the XState DevTools integration libraries before actors can be discovered and inspected. * Server-side actor inspection requires the companion Node.js integration and an active connection between the application and the DevTools extension. * Source code navigation features may require source maps and compatible editor configuration. * Do not expose debugging endpoints, WebSocket connections, or DevTools integrations in production environments unless you have reviewed the associated security implications. * XState DevTools is an independent project and is not affiliated with, endorsed by, or sponsored by Stately or the XState project.