📄 tanstack/devtools/latest/docs/quick-start

import { TanStackDevtools } from '@tanstack/react-devtools'

function App() {
  return (
    <>
      <YourApp />
      <TanStackDevtools />
    </>
  )
}


import { TanStackDevtools } from '@tanstack/react-devtools'

function App() {
  return (
    <>
      <YourApp />
      <TanStackDevtools />
    </>
  )
}

And plug the vite plugin as the first plugin in your plugin array in vite.config.ts:

javascript

import { devtools } from '@tanstack/devtools-vite'

export default {
  plugins: [\
    devtools(),\
    // ... rest of your plugins here\
  ],
}


import { devtools } from '@tanstack/devtools-vite'

export default {
  plugins: [\
    devtools(),\
    // ... rest of your plugins here\
  ],
}

And you're done! If you want to add custom plugins, you can do so by using the plugins prop:

javascript

import { TanStackDevtools } from '@tanstack/react-devtools'

function App() {
  return (
    <>
      <YourApp />
      <TanStackDevtools plugins={[\
        // Add your custom plugins here\
      ]} />
    </>
  )
}


import { TanStackDevtools } from '@tanstack/react-devtools'

function App() {
  return (
    <>
      <YourApp />
      <TanStackDevtools plugins={[\
        // Add your custom plugins here\
      ]} />
    </>
  )
}

For example, if you want to add TanStack query & router you could do so in the following way:

javascript

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}>
      <YourApp />
      <TanStackDevtools plugins={[\
        {\
          name: 'TanStack Query',\
          render: <ReactQueryDevtoolsPanel />,\
          defaultOpen: true\
        },\
        {\
          name: 'TanStack Router',\
          render: <TanStackRouterDevtoolsPanel />,\
          defaultOpen: false\
        },\
      ]} />
    </QueryClientProvider>
  )
}


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}>
      <YourApp />
      <TanStackDevtools plugins={[\
        {\
          name: 'TanStack Query',\
          render: <ReactQueryDevtoolsPanel />,\
          defaultOpen: true\
        },\
        {\
          name: 'TanStack Router',\
          render: <TanStackRouterDevtoolsPanel />,\
          defaultOpen: false\
        },\
      ]} />
    </QueryClientProvider>
  )
}

Edit on GitHub

Overview

Configuration

Partners Become a Partner