devtools-event-client

You connect your library to DevTools by creating a singleton EventClient instance with a unique pluginId, which establishes a typed event communication layer for live state inspection. This handles the connection lifecycle with retries and event queuing.

The event client is completely framework agnostic and works seamlessly with React, Vue, Solid, Preact, and vanilla JS. It enables typed event communication between your library and TanStack Devtools regardless of your chosen framework.

You define typed event payloads by creating an event map that specifies the payload structure for each event type. The event client automatically applies pluginId namespacing to these events, ensuring safe and clear communication with the DevTools panels.

During server-side rendering or when DevTools are absent, the event client provides SSR fallbacks and queues emitted events. It handles the connection lifecycle with retries, ensuring no events are lost before the DevTools connection is successfully established.

Yes, you can instrument your custom state management library to emit state-changed events through the typed event bus. This allows the DevTools to receive the payloads and visualize state mutations as they happen in real-time.

The best way to namespace events is to rely on the EventClient's automatic pluginId namespacing. By assigning a unique pluginId to each client instance, you ensure that emitted events remain isolated and correctly routed to their specific DevTools panel.