# 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

```ts
{ defaultOpen: boolean }
```

- `hideUntilHover` - Hides the TanStack devtools trigger until hovered

```ts
{ hideUntilHover: boolean }
```

- `position` - The position of the TanStack devtools trigger (used when `triggerMode` is `'fixed'`)

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

- `triggerMode` - How the trigger is placed. `'floating'` (the default) lets you drag the trigger anywhere on screen, and throw it: it glides with momentum and springs back off the edges. Drag it off any screen edge to dock it as a slim tab. Hover the tab to show the TanStack mark, click it to open the panel, or drag it to pull the trigger back out, and hold it still over a glowing corner for two seconds to drop it there without pinning. `'fixed'` anchors it to `position`. The floating spot is persisted in local storage.

```ts
{ triggerMode: 'fixed' | 'floating' }
```

- `panelLocation` - The location of the devtools panel

```ts
{ panelLocation: 'top' | 'bottom' }
```

- `openHotkey` - The hotkey set to open the devtools

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

{ openHotkey: Array<KeyboardKey> }
```

- `inspectHotkey` - The hotkey set to open the source inspector

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

{ inspectHotkey: Array<KeyboardKey> }
```

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

```ts
{ requireUrlFlag: boolean }
```

- `hideInAutomation` - Does not render the devtools when a browser is driven by automation (Playwright, Cypress, Selenium). This keeps the devtools out of your end-to-end test selectors. The check uses `navigator.webdriver`. The default is `false`.

```ts
{ hideInAutomation: boolean }
```

- `openAsModal` - Moves the open panel on top of a modal dialog of your app. A dialog that you open with `dialog.showModal()` makes the rest of the page inert, the devtools included. While the panel is on top, your dialog is inert. Close the panel to use your dialog again. The trigger is inert while your dialog is open, so open the panel with the open hotkey. The default is `false`.

```ts
{ openAsModal: boolean }
```

- `triggerImage` - The image used for the dev tools trigger

```ts
{ triggerImage: string }
```

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

```ts
{ 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

```ts
{ debug: boolean }
```

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

```ts
{ connectToServerBus: boolean }
```

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

```ts
{ 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>,
)

```

## 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 }
```

- `debug` - Enables debug mode for the EventClient

```ts
{ debug: boolean }
```

Put together the `EventClient` configuration looks like:

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

type EventMap = {
  '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](https://tanstack.com/devtools/latest/docs/framework/react/examples/custom-devtools)