Devtools
Build the inspector, not another debugging shell.
Devtools gives TanStack panels and your product-specific runtime state one extensible cockpit, with plugins, typed events, source inspection, and client/server logs already handled.
your app
queries
42
mutations
3
stale
8
The shell is infrastructure
Stop rebuilding everything around the useful panel.
The trigger, tabs, window management, settings, persistence, hotkeys, source bridge, and transport are shared. Each library or product team can focus on the runtime truth it wants to expose.
Shell
Trigger, panel, tabs, and settings
Plugins
Library and product inspectors
Events
Typed local, WebSocket, and SSE transport
Source
Element and log locations in the editor
Windowing
Docking, persistence, hotkeys, and PiP
Adapters
React, Vue, Solid, and Preact
Custom plugins
Your product gets devtools too.
Register a panel beside TanStack inspectors and communicate through a typed event client. Events can stay local or travel between browser and server over WebSocket or SSE.
type JobEvents = {
progress: { jobId: string; percent: number }
}
class JobsClient extends EventClient<JobEvents> {
constructor() { super({ pluginId: 'jobs' }) }
}
const jobs = new JobsClient()Background Jobs
A product-owned panel registered beside library inspectors.
typed event stream
connectedjobs:progress
sync-catalog · 24%
jobs:started
sync-catalog · 12%
browser console
[ui] route mounted
[query] cache updated
server terminal
[loader] project:42
[api] 200 /projects/42
One debugging conversation
See client and server logs without changing windows.
The Vite integration can pipe browser logs into the terminal and server logs into the browser console, with enhanced source locations attached.
Development only
Click straight to source. Ship none of the shell.
Source injection connects elements and logs to their exact file and line during development. By default, the Vite plugin removes Devtools imports and matching JSX usage from production builds.
development
Project summary
Hold the inspector hotkey, click an element, and open its exact source location.
production build
The Vite plugin enables removeDevtoolsOnBuild by default.