# TanStackDevtoolsInit

<!-- DO NOT EDIT: this page is autogenerated from the type comments -->

# Interface: TanStackDevtoolsInit

Defined in: [devtools/src/core.tsx:13](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/core.tsx#L13)

## Properties

### config?

```ts
optional config: Partial<{
  customTrigger: (el, props) => void;
  defaultOpen: boolean;
  hideUntilHover: boolean;
  openHotkey: KeyboardKey[];
  panelLocation: "top" | "bottom";
  position: TriggerPosition;
  requireUrlFlag: boolean;
  theme: "light" | "dark";
  triggerHidden: boolean;
  urlFlag: string;
}>;
```

Defined in: [devtools/src/core.tsx:19](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/core.tsx#L19)

Configuration for the devtools shell. These configuration options are used to set the
initial state of the devtools when it is started for the first time. Afterwards,
the settings are persisted in local storage and changed through the settings panel.

***

### eventBusConfig?

```ts
optional eventBusConfig: ClientEventBusConfig;
```

Defined in: [devtools/src/core.tsx:40](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/core.tsx#L40)

***

### plugins?

```ts
optional plugins: TanStackDevtoolsPlugin[];
```

Defined in: [devtools/src/core.tsx:39](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/core.tsx#L39)

Array of plugins to be used in the devtools.
Each plugin has a `render` function that gives you the dom node to mount into

Example:
```ts
 const devtools = new TanStackDevtoolsCore({
   plugins: [
     {
       id: "your-plugin-id",
       name: "Your Plugin",
       render: (el) => {
         // Your render logic here
       },
     },
   ],
 })
```