tanstack-devtools

## 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...