Source: https://tanstack.com/devtools/latest/docs/configuration

TanStack

Devtools v0v0

Search...

+ K

Auto

Log In

TanStack StartRC

Docs Examples GitHub Contributors

TanStack Router

Docs Examples GitHub Contributors

TanStack Query

Docs Examples GitHub Contributors

TanStack Table

Docs Examples Github Contributors

TanStack Formnew

Docs Examples Github Contributors

TanStack DBbeta

Docs Github Contributors

TanStack Virtual

Docs Examples Github Contributors

TanStack Paceralpha

Docs Examples Github Contributors

TanStack Storealpha

Docs Examples Github Contributors

TanStack Devtoolsalpha

Docs Github Contributors

More Libraries

Maintainers Partners Support Learn StatsBETA Discord Merch Blog GitHub Ethos Brand Guide

Documentation

Framework

React

Version

Latest

Search...

+ K

Menu

• Home

• Frameworks

• Contributors

• GitHub

• Discord

Getting Started

• Overview
  
  core

• Quick Start
  
  core

• Configuration
  
  core

• Plugin Configuration
  
  core

• Installation
  
  core

• Vite plugin
  
  core

• Third party plugins
  
  core

• Production
  
  core

• Basic setup
  
  react

• React adapter
  
  react

Guides

• Custom plugins
  
  react

API Reference

• Core API Reference
  
  core

• React Hooks
  
  react

Examples

• Basic
  
  react

• TanStack Start
  
  react

• Custom devtools
  
  react

Framework

React

Version

Latest

Menu

• Home

• Frameworks

• Contributors

• GitHub

• Discord

Getting Started

• Overview
  
  core

• Quick Start
  
  core

• Configuration
  
  core

• Plugin Configuration
  
  core

• Installation
  
  core

• Vite plugin
  
  core

• Third party plugins
  
  core

• Production
  
  core

• Basic setup
  
  react

• React adapter
  
  react

Guides

• Custom plugins
  
  react

API Reference

• Core API Reference
  
  core

• React Hooks
  
  react

Examples

• Basic
  
  react

• TanStack Start
  
  react

• Custom devtools
  
  react

On this page

• Devtools Component Configuration

• EventClient Configuration

Configuration

Copy Markdown

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

ts

{ defaultOpen: boolean }


{ defaultOpen: boolean }

• hideUntilHover - Hides the TanStack devtools trigger until hovered

ts

{ hideUntilHover: boolean }


{ hideUntilHover: boolean }

• position - The position of the TanStack devtools trigger

ts

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


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

• panelLocation - The location of the devtools panel

ts

{ panelLocation: 'top' | 'bottom' }


{ panelLocation: 'top' | 'bottom' }

• openHotkey - The hotkey set to open the devtools

ts

type ModifierKey = 'Alt' | 'Control' | 'Meta' | 'Shift';
type KeyboardKey = ModifierKey | (string & {});

{ openHotkey: Array<KeyboardKey> }


type ModifierKey = 'Alt' | 'Control' | 'Meta' | 'Shift';
type KeyboardKey = ModifierKey | (string & {});

{ openHotkey: Array<KeyboardKey> }

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

ts

{ requireUrlFlag: boolean }


{ requireUrlFlag: boolean }

• triggerImage - The image used for the dev tools trigger

ts

{ triggerImage: string }


{ triggerImage: string }

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

ts

{ urlFlag: string }


{ urlFlag: string }

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

• debug - Enables debug mode for the EventBus

ts

{ debug: boolean }


{ debug: boolean }

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

ts

{ connectToServerBus: boolean }


{ connectToServerBus: boolean }

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

ts

{ port: number }


{ port: number }

Put together here is an example in react:

tsx

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>,
)


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

ts

{pluginId: string}


{pluginId: string}

• debug - Enables debug mode for the EventClient

ts

{debug: boolean}


{debug: boolean}

Put together the EventClient configuration looks like:

tsx

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',
    })
  }
}


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

Edit on GitHub

Quick Start

Plugin Configuration

Partners Become a Partner