configuration.md

title	Configuration
id	configuration

Both TanStack DevTools and EventClient can be configured.

Important

All configuration is optional unless marked (required)

Devtools Component Configuration

The Devtools component has two configuration props, regardless of Frameworks these are the same.

• config - Configuration for the devtool panel and interaction with it.
• eventBusConfig - Configuration for the event bus.

The config object is mainly focused around user interaction with the devtools panel and accepts the following properties:

• defaultOpen - If the devtools are open by default

{ defaultOpen: boolean }

• hideUntilHover - Hides the TanStack devtools trigger until hovered

{ hideUntilHover: boolean }

• position - The position of the TanStack devtools trigger

{ position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'middle-left' | 'middle-right' }

• panelLocation - The location of the devtools panel

{ panelLocation: 'top' | 'bottom' }

• openHotkey - The hotkey to open the devtools. Uses the Hotkey type from @tanstack/hotkeys (e.g. "Control+\``", "Mod+D"). Mod maps to Command on macOS and Control on Windows/Linux.

import type { Hotkey } from '@tanstack/hotkeys'

{ openHotkey: Hotkey }

• inspectHotkey - The hotkey to open the source inspector. Uses TanStack Hotkeys string format (e.g. "Mod+Shift"). Mod maps to Command on macOS and Control on Windows/Linux.

{ inspectHotkey: string }

• requireUrlFlag - Requires a flag present in the url to enable devtools

{ requireUrlFlag: boolean }

• triggerImage - The image used for the dev tools trigger

{ triggerImage: string }

• urlFlag - The required flag that must be present in the url to enable devtools.

{ urlFlag: string }

The eventBusConfig is configuration for the back bone of the devtools, the EventClient, and accepts the following properties:

• debug - Enables debug mode for the EventBus

{ debug: boolean }

• connectToServerBus - Optional flag to indicate if the devtools server event bus is available to connect to

{ connectToServerBus: boolean }

• port - The port at which the client connects to the devtools server event bus

{ port: number }

Put together here is an example in react:

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { FormDevtools } from '@tanstack/react-form'

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

import App from './App'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />

    <TanStackDevtools
      config={{ hideUntilHover: true }}
      eventBusConfig={{ debug: true }}
      plugins={[
        {
          name: 'TanStack Form',
          render: <FormDevtools />,
          defaultOpen: true,
        },
      ]}
    />
  </StrictMode>,
)

EventClient Configuration

Configuration for the EventClient is as follows

• pluginId (required) - The plugin identifier used by the event bus to direct events to listeners

{ pluginId: string }

• debug - Enables debug mode for the EventClient

{ debug: boolean }

Put together the EventClient configuration looks like:

import { EventClient } from '@tanstack/devtools-event-client'

type EventMap = {
  'custom-devtools:custom-state': { state: string }
}

class customEventClient extends EventClient<EventMap> {
  constructor() {
    super({
      debug: true,
      pluginId: 'custom-devtools',
    })
  }
}

More information about EventClient configuration can be found in our custom-plugins example