---
id: TanStackDevtoolsPlugin
title: TanStackDevtoolsPlugin
---

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

# Interface: TanStackDevtoolsPlugin

Defined in: [devtools/src/context/devtools-context.tsx:15](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/context/devtools-context.tsx#L15)

## Properties

### defaultOpen?

```ts
optional defaultOpen: boolean;
```

Defined in: [devtools/src/context/devtools-context.tsx:58](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/context/devtools-context.tsx#L58)

Whether the plugin should be open by default when there are no active plugins.
If true, this plugin will be added to activePlugins on initial load when activePlugins is empty.

#### Default

```ts
false
```

***

### destroy()?

```ts
optional destroy: (pluginId) => void;
```

Defined in: [devtools/src/context/devtools-context.tsx:77](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/context/devtools-context.tsx#L77)

#### Parameters

##### pluginId

`string`

#### Returns

`void`

***

### id?

```ts
optional id: string;
```

Defined in: [devtools/src/context/devtools-context.tsx:52](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/context/devtools-context.tsx#L52)

Unique identifier for the plugin.
If not provided, it will be generated based on the name.

***

### name

```ts
name: string | (el, theme) => void;
```

Defined in: [devtools/src/context/devtools-context.tsx:42](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/context/devtools-context.tsx#L42)

Name to be displayed in the devtools UI.
If a string, it will be used as the plugin name.
If a function, it will be called with the mount element.

Example:
```ts
  {
    // If a string, it will be used as the plugin name
    name: "Your Plugin",
    render: () => {}
  }
```
or

```ts
  {
    // If a function, it will be called with the mount element
    name: (el) => {
      el.innerText = "Your Plugin Name"
      // Your name logic here
    },
    render: () => {}
  }
```

***

### render()

```ts
render: (el, theme) => void;
```

Defined in: [devtools/src/context/devtools-context.tsx:72](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/context/devtools-context.tsx#L72)

Render the plugin UI by using the provided element. This function will be called
when the plugin tab is clicked and expected to be mounted.

#### Parameters

##### el

`HTMLDivElement`

The mount element for the plugin.

##### theme

`"light"` | `"dark"`

#### Returns

`void`

void

Example:
```ts
  render: (el) => {
    el.innerHTML = "<h1>Your Plugin</h1>"
  }
```