From tanstack-devtools
Centralized, extensible devtools panel for TanStack libraries with a plugin architecture.
npx claudepluginhub tanstack-skills/tanstack-skills --plugin tanstack-devtoolsThis skill uses the workspace's default tool permissions.
TanStack Devtools provides a unified debugging interface that consolidates devtools for TanStack Query, Router, and other libraries into a single panel. It features a framework-agnostic plugin architecture, real-time state inspection, and support for custom plugins. Built with Solid.js for lightweight performance.
Creates isolated Git worktrees for feature branches with prioritized directory selection, gitignore safety checks, auto project setup for Node/Python/Rust/Go, and baseline verification.
Executes implementation plans in current session by dispatching fresh subagents per independent task, with two-stage reviews: spec compliance then code quality.
Dispatches parallel agents to independently tackle 2+ tasks like separate test failures or subsystems without shared state or dependencies.
TanStack Devtools provides a unified debugging interface that consolidates devtools for TanStack Query, Router, and other libraries into a single panel. It features a framework-agnostic plugin architecture, real-time state inspection, and support for custom plugins. Built with Solid.js for lightweight performance.
React: @tanstack/react-devtools
Core: @tanstack/devtools
Status: Alpha
npm install @tanstack/react-devtools
import { TanStackDevtools } from '@tanstack/react-devtools'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
const queryClient = new QueryClient()
function App() {
return (
<QueryClientProvider client={queryClient}>
<TanStackDevtools />
{/* Your app content */}
<MyApp />
</QueryClientProvider>
)
}
import { TanStackDevtools } from '@tanstack/react-devtools'
import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
function App() {
return (
<QueryClientProvider client={queryClient}>
<TanStackDevtools
plugins={[
{
id: 'react-query',
name: 'React Query',
render: () => <ReactQueryDevtoolsPanel />,
},
]}
/>
<MyApp />
</QueryClientProvider>
)
}
import { TanStackDevtools } from '@tanstack/react-devtools'
import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
function App() {
return (
<TanStackDevtools
plugins={[
{
id: 'router',
name: 'Router',
render: () => <TanStackRouterDevtoolsPanel router={router} />,
},
]}
/>
)
}
import { TanStackDevtools } from '@tanstack/react-devtools'
import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
function App() {
return (
<QueryClientProvider client={queryClient}>
<TanStackDevtools
plugins={[
{
id: 'react-query',
name: 'React Query',
render: () => <ReactQueryDevtoolsPanel />,
},
{
id: 'router',
name: 'Router',
render: () => <TanStackRouterDevtoolsPanel router={router} />,
},
]}
/>
<MyApp />
</QueryClientProvider>
)
}
For debugging TanStack AI workflows:
import { TanStackDevtools } from '@tanstack/react-devtools'
import { AIDevtoolsPanel } from '@tanstack/ai-react/devtools'
function App() {
return (
<TanStackDevtools
plugins={[
{
id: 'ai',
name: 'AI',
render: () => <AIDevtoolsPanel />,
},
]}
/>
)
}
AI Devtools features:
interface DevtoolsPlugin {
id: string // Unique identifier
name: string // Display name in the devtools panel
render: () => JSX.Element // React component to render
}
import { TanStackDevtools } from '@tanstack/react-devtools'
// Custom state inspector plugin
const stateInspectorPlugin = {
id: 'state-inspector',
name: 'State',
render: () => (
<div style={{ padding: '16px' }}>
<h3>Application State</h3>
<pre>{JSON.stringify(appState, null, 2)}</pre>
</div>
),
}
// Custom network logger plugin
const networkLoggerPlugin = {
id: 'network-logger',
name: 'Network',
render: () => <NetworkLoggerPanel />,
}
function App() {
return (
<TanStackDevtools
plugins={[
stateInspectorPlugin,
networkLoggerPlugin,
]}
/>
)
}
function App() {
const [plugins, setPlugins] = useState<DevtoolsPlugin[]>([])
useEffect(() => {
// Register plugins conditionally
const activePlugins: DevtoolsPlugin[] = []
if (process.env.NODE_ENV === 'development') {
activePlugins.push({
id: 'debug',
name: 'Debug',
render: () => <DebugPanel />,
})
}
setPlugins(activePlugins)
}, [])
return <TanStackDevtools plugins={plugins} />
}
// vite.config.ts
import { defineConfig } from 'vite'
import { tanstackDevtools } from '@tanstack/devtools/vite'
export default defineConfig({
plugins: [
tanstackDevtools(),
],
})
// Only include devtools in development
function App() {
return (
<>
{process.env.NODE_ENV === 'development' && (
<TanStackDevtools plugins={plugins} />
)}
<MyApp />
</>
)
}
// Or use lazy loading
const TanStackDevtools = lazy(() =>
import('@tanstack/react-devtools').then((m) => ({ default: m.TanStackDevtools }))
)
| Framework | Package | Status |
|---|---|---|
| React | @tanstack/react-devtools | Alpha |
| Solid | @tanstack/solid-devtools | Planned |
| Vue | @tanstack/vue-devtools | Planned |
| Angular | @tanstack/angular-devtools | Planned |