devtools-plugin-panel

To build a TanStack devtools panel for real-time debugging, you create and register a panel that listens to store interactions via EventClient.on() and renders the emitted event data using @tanstack/devtools-ui components.

Yes, TanStack devtools panels support framework adapters for React, Vue, and Preact. You can choose between a Solid.js core with adapters or build framework-specific panels to suit your environment.

The plugin lifecycle for TanStack devtools panels handles mount, activate, and destroy phases. It enforces a max-active-plugins rule that allows up to three active panels simultaneously while maintaining persistent state across reloads.

When debugging store interactions in TanStack, you should listen to "state-changed" and "action-dispatched" events. The EventClient API captures these emitted events so your custom devtools panel can display the data for real-time analysis.

Yes, the max-active-plugins rule limits you to a maximum of three active TanStack devtools panels at once. This constraint ensures stable rendering and lifecycle management while preserving persistent panel state across application reloads.