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 with the Svelte-specific adapter.

npm i @tanstack/svelte-devtools

Next, in the root of your application, import the TanStackDevtools component from @tanstack/svelte-devtools and add it to your template.

<script lang="ts">
  import { TanStackDevtools } from '@tanstack/svelte-devtools'
</script>

<main>
  <!-- Your app content -->
</main>
<TanStackDevtools />

Import the desired devtools and provide them to the TanStackDevtools component via the plugins prop along with a label for the menu.

<script lang="ts">
  import { TanStackDevtools } from '@tanstack/svelte-devtools'
  import type { TanStackDevtoolsSveltePlugin } from '@tanstack/svelte-devtools'
  import { SvelteQueryDevtoolsPanel } from '@tanstack/svelte-query-devtools'

  const plugins: TanStackDevtoolsSveltePlugin[] = [
    {
      name: 'Svelte Query',
      component: SvelteQueryDevtoolsPanel,
    },
  ]
</script>

<main>
  <!-- Your app content -->
</main>
<TanStackDevtools {plugins} />

Note: The Svelte adapter uses component (a Svelte component reference) instead of render (a JSX element) in plugin definitions. Components receive the shared theme and devtoolsOpen props. Additional values from the plugin's props field are merged into the same object when the component mounts.

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