devtools-plugin-panel

TanStackDevtoolsPlugin Interface

The low-level contract every plugin implements. Framework adapters wrap this automatically.

// Source: packages/devtools/src/context/devtools-context.tsx
interface TanStackDevtoolsPlugin {
  id?: string
  name: string | ((el: HTMLHeadingElement, theme: 'dark' | 'light') => void)
  render: (el: HTMLDivElement, theme: 'dark' | 'light') => void
  destroy?: (pluginId: string) => void
  defaultOpen?: boolean
}

• name (required) -- String tab title, or function receiving (el, theme) for custom rendering.
• render (required) -- Called on activation with a <div> container and theme. Called again on theme change.
• id (optional) -- Stable identifier. If omitted: name.toLowerCase().replace(' ', '-')-{index}. Explicit ids persist selection across reloads.
• defaultOpen (optional) -- Opens panel on first load when no saved state. Max 3 open. Does not override saved preferences.
• destroy (optional) -- Called on deactivation or unmount. Framework adapters handle cleanup automatically.

---

Two Development Paths

Path 1: Solid.js Core + Framework Adapters (Multi-Framework)

Build the panel in Solid.js using @tanstack/devtools-ui components. Use constructCoreClass for lazy loading, then createReactPanel/createSolidPanel to wrap for each framework. The devtools core is Solid, so Solid panels run natively.

Path 2: Framework-Specific Panel (Single Framework)

Build directly in your framework and use createReactPlugin/createVuePlugin/createSolidPlugin/createPreactPlugin from @tanstack/devtools-utils.

---

Path 1: Solid.js Core Panel

Step 1: Define Event Map and Create EventClient

// src/event-client.ts
import { EventClient } from '@tanstack/devtools-event-client'

type StoreEvents = {
  'state-changed': { storeName: string; state: unknown; timestamp: number }
  'action-dispatched': { storeName: string; action: string; payload: unknown }
  reset: void
}

class StoreInspectorClient extends EventClient<StoreEvents> {
  constructor() {
    super({ pluginId: 'store-inspector' })
  }
}

export const storeInspector = new StoreInspectorClient()