Basic setup

TanStack devtools provides you with an easy to use and modular client that allows you to compose multiple devtools into one easy to use panel.

Setup#

Install the TanStack Devtools library, this will install the devtools core as well as provide you framework specific adapters.

npm i -D @tanstack/preact-devtools

Next in the root of your application import the TanStackDevtools from the required framework adapter (in this case @tanstack/preact-devtools).

import { TanStackDevtools } from '@tanstack/preact-devtools'
import { render } from 'preact'

import App from './App'

render(
  <>
    <App />

    <TanStackDevtools />
  </>,
  document.getElementById('root')!,
)

Import the desired devtools and provide it to the TanStackDevtools component along with a label for the menu.

Currently TanStack offers:

• QueryDevtools
• RouterDevtools
• PacerDevtools
• FormDevtools coming soon

import { render } from 'preact'

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

import App from './App'

render(
  <>
    <App />

    <TanStackDevtools
      plugins={[
        {
          name: 'Your Plugin',
          render: <YourPluginComponent />,
        },
      ]}
    />
  </>,
  document.getElementById('root')!,
)

Finally add any additional configuration you desire to the TanStackDevtools component, more information can be found under the TanStack Devtools Configuration section.

A complete working example can be found in our basic example.