devtools-plugin-panel

Build customizable TanStack devtools panels displaying emitted event data.

Updated Apr 1, 2026

Search Tags:#tanstack #frameworks #plugin #devtools #solid #panel #event-client

Ready to run

npx skills add https://github.com/cill-i-am/task-tracker --skill devtools-plugin-panel-cill-i-am

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: devtools-plugin-panel
Source: https://github.com/cill-i-am/task-tracker/tree/main/.agents/skills/tanstack-devtools-plugin-panel
Command: npx skills add https://github.com/cill-i-am/task-tracker --skill devtools-plugin-panel-cill-i-am

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Enables developers to build customizable TanStack devtools panels that display emitted event data for real-time debugging of store interactions.

Core Features & Use Cases

Create panels that listen to events via EventClient.on() and render with @tanstack/devtools-ui components.
Support two development paths: a Solid.js core with framework adapters or framework-specific panels for React, Vue, Preact, etc.
Handle plugin lifecycle (mount, activate, destroy) and allow up to three active panels with persistent state across reloads.

Quick Start

Create and register a TanStack devtools panel and mount it in your app to begin debugging emitted events.

Frequently Asked Questions about devtools-plugin-panel

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I build a TanStack devtools panel to debug store events?▼

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.

Can I use TanStack devtools panels with frameworks other than Solid.js?▼

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.

How does the plugin lifecycle work for active TanStack devtools panels?▼

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.

What events should I listen to when debugging store interactions in TanStack?▼

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.

Are there limitations on how many TanStack devtools panels I can mount at once?▼

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.