tanstack-devtoolslisted
Install: claude install-skill louisbrulenaudet/monorepo-template
## Overview
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
## Installation
```bash
npm install @tanstack/react-devtools
```
## Basic Setup
```tsx
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>
)
}
```
## Built-in Plugins
### Query Devtools
```tsx
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>
)
}
```
### Router Devtools
```tsx
import { TanStackDevtools } from '@tanstack/react-devtools'
import { TanStackRouterDev