Stately Inspector

A real-time visual debugger for XState that provides live visibility into state machine transitions and actor communication.

Stately Inspector connects directly to your running XState actors to render interactive, live-updating diagrams of your application logic. It replaces manual console logs with a dedicated interface: tracking every event, state transition, and context change in real time. You can view sequence diagrams for multi-actor systems (essential for complex micro-frontends) and inspect the exact payload of every dispatched event. It works across the entire JavaScript ecosystem (React, Vue, Svelte, and Node.js) to ensure your statecharts behave exactly as designed.

https://stately.ai/docs/inspector