XState DevTools

Tracking since May 31, 2026.

Changelog

• Jun 6, 2026
  description

  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 DevTools know nothing about state machine topology. When an actor lives on the server, you have zero visibility into it from the browser at all.
  
  XState DevTools solves this by embedding a purpose-built panel directly in 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 actors over WebSocket so they appear alongside browser actors in the same panel
  - Links each state definition back to the exact line in your editor
  
  To get started follow the instructions on the project page: https://github.com/mjbeswick/xstate-devtools

  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.

• Jun 6, 2026
  permissions

  storage, contextMenus

  (empty)

Permissions & access

Permissions

None declared

Host access

None declared

Screenshots