TanStack Devtools

https://tanstack.com/devtools/latest
Admin
TanStack Devtools is a framework-agnostic devtool for managing and debugging devtools. It brings...
Tokens:29,274
Snippets:343
Trust Score:9.4
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install Solid Devtools

Source: https://tanstack.com/devtools/latest/docs/installation.md

Install the Solid-specific devtools package and the optional Vite plugin.

```sh
npm install -D @tanstack/solid-devtools
npm install -D @tanstack/devtools-vite
```

--------------------------------

### Install Vanilla JS Devtools

Source: https://tanstack.com/devtools/latest/docs/installation.md

Install the core package for use with any framework or without one.

```sh
npm install -D @tanstack/devtools
```

--------------------------------

### Install devtools-utils

Source: https://tanstack.com/devtools/latest/docs/devtools-utils.md

Install the package via npm.

```bash
npm install @tanstack/devtools-utils
```

--------------------------------

### Install Devtools Event Client

Source: https://tanstack.com/devtools/latest/docs/framework/react/guides/custom-plugins.md

Command to install the necessary utility package for event communication.

```bash
npm i @tanstack/devtools-event-client
```

--------------------------------

### Install TanStack Devtools

Source: https://tanstack.com/devtools/latest/docs/framework/react/basic-setup.md

Install the TanStack Devtools library using npm. This command installs the core devtools and framework-specific adapters.

```bash
npm i @tanstack/react-devtools
```

--------------------------------

### Vite Plugin Configuration Example

Source: https://tanstack.com/devtools/latest/docs/vite-plugin.md

Example of configuring the TanStack Devtools Vite plugin in your vite.config.js file. This shows basic setup and options.

```javascript
import devtools from "vite-plugin-solid-devtools";

export default {
  plugins: [
    devtools({
      // enabled: true, // enable/disable devtools
      // appendDevToolsScript: true, // inject devtools script into index.html
      // autoConnect: true, // auto connect to devtools
      // launchEditor: true, // enable 'go to source' feature
      // vite: {
      //   // vite specific options
      // }, 
    }),
  ],
};

```

--------------------------------

### Install Vite Plugin

Source: https://tanstack.com/devtools/latest/docs/quick-start.md

Install the Vite plugin as a development dependency.

```bash
npm install -D @tanstack/devtools-vite
```

--------------------------------

### Install Preact Devtools

Source: https://tanstack.com/devtools/latest/docs/installation.md

Install the Preact-specific devtools package and the optional Vite plugin.

```sh
npm install -D @tanstack/preact-devtools
npm install -D @tanstack/devtools-vite
```

--------------------------------

### Install React Devtools

Source: https://tanstack.com/devtools/latest/docs/installation.md

Install the React-specific devtools package and the optional Vite plugin.

```sh
npm install -D @tanstack/react-devtools
npm install -D @tanstack/devtools-vite
```

--------------------------------

### Multiple Plugin Submission Example

Source: https://tanstack.com/devtools/latest/docs/third-party-plugins.md

Demonstrates how to submit multiple plugins for different frameworks within the same registry entry. This example includes both React and Solid versions of a Pacer devtools plugin.

```tsx
'@tanstack/react-pacer-devtools': {
  packageName: '@tanstack/react-pacer-devtools',
  title: 'Pacer Devtools',
  description: 'Monitor and debug your Pacer animations and transitions',
  requires: {
    packageName: '@tanstack/react-pacer',
    minVersion: '0.16.4',
  },
  author: 'TanStack',
  framework: 'react',
  tags: ['TanStack'],
},
'@tanstack/solid-pacer-devtools': {
  packageName: '@tanstack/solid-pacer-devtools',
  title: 'Pacer Devtools',
  description: 'Monitor and debug your Pacer animations and transitions',
  requires: {
    packageName: '@tanstack/solid-pacer',
    minVersion: '0.14.4',
  },
  author: 'TanStack',
  framework: 'solid',
  tags: ['TanStack'],
},
```

--------------------------------

### Install Svelte Devtools

Source: https://tanstack.com/devtools/latest/docs/quick-start.md

Install the required package for Svelte integration.

```bash
npm install @tanstack/svelte-devtools
```

--------------------------------

### Example debug console output

Source: https://tanstack.com/devtools/latest/docs/framework/react/guides/custom-plugins.md

Sample log output showing event bus initialization and plugin registration.

```text
🌴 [tanstack-devtools:client-bus] Initializing client event bus

🌴 [tanstack-devtools:custom-devtools-plugin] Registered event to bus custom-devtools:counter-state
```

--------------------------------

### Install Vue Devtools Adapter

Source: https://tanstack.com/devtools/latest/docs/quick-start.md

Install the required package for Vue integration.

```bash
npm install -D @tanstack/vue-devtools
```

--------------------------------

### Usage of createVuePlugin

Source: https://tanstack.com/devtools/latest/docs/devtools-utils.md

Example of initializing a Vue plugin with a component.

```ts
import { createVuePlugin } from '@tanstack/devtools-utils/vue'
import MyStorePanel from './MyStorePanel.vue'

const [MyPlugin, NoOpPlugin] = createVuePlugin('My Store', MyStorePanel)
```

--------------------------------

### Example Plugin Registry Entry

Source: https://tanstack.com/devtools/latest/docs/third-party-plugins.md

This is an example of how a single plugin entry should be formatted in the plugin registry. It includes essential metadata like package name, title, description, and requirements.

```tsx
'@tanstack/react-pacer-devtools': {
  packageName: '@tanstack/react-pacer-devtools',
  title: 'Pacer Devtools',
  description: 'Monitor and debug your Pacer animations and transitions',
  requires: {
    packageName: '@tanstack/react-pacer',
    minVersion: '0.16.4',
  },
  author: 'TanStack',
  framework: 'react',
  tags: ['TanStack'],
},
```

--------------------------------

### Install for Production Builds

Source: https://tanstack.com/devtools/latest/docs/installation.md

Install the core package as a regular dependency to include devtools in production builds.

```sh
npm install @tanstack/devtools
npm install -D @tanstack/devtools-vite
```

--------------------------------

### Usage of createSolidPlugin

Source: https://tanstack.com/devtools/latest/docs/devtools-utils.md

Example of initializing a Solid plugin with a custom component.

```tsx
import { createSolidPlugin } from '@tanstack/devtools-utils/solid'

const [MyPlugin, NoOpPlugin] = createSolidPlugin({
  name: 'My Store',
  id: 'my-store',
  Component: (props) => <MyStorePanel theme={props.theme} />,
})
```

--------------------------------

### Install TanStack Devtools React

Source: https://tanstack.com/devtools/latest/docs/framework/react/adapter.md

Install the React adapter for TanStack Devtools using npm.

```sh
npm install @tanstack/react-devtools
```

--------------------------------

### Install Angular Devtools

Source: https://tanstack.com/devtools/latest/docs/quick-start.md

Install the Angular devtools package via npm.

```bash
npm install @tanstack/angular-devtools
```

--------------------------------

### Install Svelte Devtools

Source: https://tanstack.com/devtools/latest/docs/installation.md

Install the Svelte-specific devtools package and the optional Vite plugin for advanced features.

```sh
npm install -D @tanstack/svelte-devtools
```

```sh
npm install -D @tanstack/devtools-vite
```

--------------------------------

### Usage of createVuePanel

Source: https://tanstack.com/devtools/latest/docs/devtools-utils.md

Example of creating a Vue panel for a class-based devtools core.

```ts
import { createVuePanel } from '@tanstack/devtools-utils/vue'

const [MyPanel, NoOpPanel] = createVuePanel(MyDevtoolsCore)
```

--------------------------------

### Usage of createPreactPlugin

Source: https://tanstack.com/devtools/latest/docs/devtools-utils.md

Example of initializing a Preact plugin with a custom component.

```tsx
import { createPreactPlugin } from '@tanstack/devtools-utils/preact'

const [MyPlugin, NoOpPlugin] = createPreactPlugin({
  name: 'My Store',
  id: 'my-store',
  Component: ({ theme }) => <MyStorePanel theme={theme} />,
})
```

--------------------------------

### Install Angular Devtools

Source: https://tanstack.com/devtools/latest/docs/installation.md

Install the Angular-specific devtools package and the optional Vite plugin for advanced features.

```sh
npm install -D @tanstack/angular-devtools
```

```sh
npm install -D @tanstack/devtools-vite
```

--------------------------------

### Implement custom EventClient

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

Example of extending EventClient with custom configuration.

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

--------------------------------

### Install Vue Devtools

Source: https://tanstack.com/devtools/latest/docs/installation.md

Install the Vue-specific devtools package and the optional Vite plugin for advanced features.

```sh
npm install -D @tanstack/vue-devtools
```

```sh
npm install -D @tanstack/devtools-vite
```

--------------------------------

### Usage of createSveltePlugin

Source: https://tanstack.com/devtools/latest/docs/devtools-utils.md

Example of initializing a Svelte plugin with a component.

```ts
import { createSveltePlugin } from '@tanstack/devtools-utils/svelte'
import MyStorePanel from './MyStorePanel.svelte'

const [MyPlugin, NoOpPlugin] = createSveltePlugin('My Store', MyStorePanel)
```

--------------------------------

### Usage of createSveltePanel

Source: https://tanstack.com/devtools/latest/docs/devtools-utils.md

Example of creating a Svelte panel for a class-based devtools core.

```ts
import { createSveltePanel } from '@tanstack/devtools-utils/svelte'

const [MyPanel, NoOpPanel] = createSveltePanel(MyDevtoolsCore)
```

--------------------------------

### Plugin Name as Simple String

Source: https://tanstack.com/devtools/latest/docs/plugin-lifecycle.md

Example of a plugin using a plain string for its name, displayed as a tab title.

```javascript
{ name: 'My Plugin', render: (el) => { /* ... */ } }
```

--------------------------------

### Configure the EventClient

Source: https://tanstack.com/devtools/latest/docs/framework/react/guides/custom-plugins.md

Setup a custom EventClient class to handle specific event types and plugin identification.

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


type EventMap = {
  // The key is the event suffix only — the pluginId is prepended automatically by EventClient
  // The value is the expected type of the event payload
  'counter-state': { count: number, history: number[] }
}

class CustomEventClient extends EventClient<EventMap> {
  constructor() {
    super({
      // The pluginId is prepended to event map keys when emitting/listening
      pluginId: 'custom-devtools',
    })
  }
}

// This is where the magic happens, it'll be used throughout your application.
export const DevtoolsEventClient = new CustomEventClient()
```

--------------------------------

### Example: Adding a Custom Plugin to TanStack Devtools

Source: https://tanstack.com/devtools/latest/docs/reference/interfaces/tanstackdevtoolsinit.md

Demonstrates how to initialize TanStack Devtools with a custom plugin. The plugin's render function is used to inject custom UI elements.

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

--------------------------------

### React Usage Example with TanStackDevtools

Source: https://tanstack.com/devtools/latest/docs/framework/react/adapter.md

Demonstrates how to integrate the TanStackDevtools component into a React application. Includes configuration for position, hover behavior, server bus connection, and a custom plugin for TanStack Query devtools.

```tsx
import { TanStackDevtools } from '@tanstack/react-devtools'
import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'

function App() {
  return (
    <>
      <YourApp />
      <TanStackDevtools
        config={{ position: 'bottom-right', hideUntilHover: true }}
        eventBusConfig={{ connectToServerBus: true }}
        plugins={[
          {
            name: 'TanStack Query',
            render: <ReactQueryDevtoolsPanel />,
            defaultOpen: true,
          },
        ]}
      />
    </>
  )
}
```

--------------------------------

### Usage of createReactPlugin

Source: https://tanstack.com/devtools/latest/docs/devtools-utils.md

Example of creating a plugin and its no-op counterpart using a React component.

```tsx
import { createReactPlugin } from '@tanstack/devtools-utils/react'

const [MyPlugin, NoOpPlugin] = createReactPlugin({
  name: 'My Store',
  id: 'my-store',
  defaultOpen: false,
  Component: ({ theme }) => <MyStorePanel theme={theme} />,
})
```

--------------------------------

### Configure TanStack Devtools Plugins

Source: https://tanstack.com/devtools/latest/docs/plugin-configuration.md

Example of passing an array of plugin configurations to the `plugins` prop of the `TanStackDevtools` component. This snippet demonstrates how to include the FormDevtools plugin and set it to open by default.

```tsx
import { TanStackDevtools } from '@tanstack/react-devtools'
import { FormDevtools } from '@tanstack/react-form-devtools'

function App() {
  return (
    <>
      <YourApp />
      <TanStackDevtools
        plugins={[
          {
            name: 'TanStack Form',
            render: <FormDevtools />,
            defaultOpen: true,
          },
        ]}
      />
    </>
  )
}
```

--------------------------------

### Usage of createReactPanel

Source: https://tanstack.com/devtools/latest/docs/devtools-utils.md

Example of wrapping a class-based devtools core into a React panel component.

```tsx
import { createReactPanel } from '@tanstack/devtools-utils/react'

class MyDevtoolsCore {
  mount(el: HTMLElement, theme: 'light' | 'dark') {
    // render your devtools UI into el
  }
  unmount() {
    // cleanup
  }
}

const [MyPanel, NoOpPanel] = createReactPanel(MyDevtoolsCore)

// Then use the panel component inside createReactPlugin:
const [MyPlugin, NoOpPlugin] = createReactPlugin({
  name: 'My Store',
  Component: MyPanel,
})
```

--------------------------------

### Configure Inspect Hotkey

Source: https://tanstack.com/devtools/latest/docs/source-inspector.md

Customize the hotkey used to activate the source inspector overlay. This example shows how to set the hotkey to Shift+Alt+Ctrl or Shift+Alt+Meta.

```typescript
<TanStackDevtools
  config={{
    inspectHotkey: ['Shift', 'Alt', 'CtrlOrMeta'],
  }}
/>
```

--------------------------------

### EventClient Setup with Custom Events

Source: https://tanstack.com/devtools/latest/docs/architecture.md

Defines custom events for an EventClient and initializes it with a plugin ID. This client is used for sending and receiving typed events between different parts of the application.

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

type MyEvents = {
  'state-update': { count: number }
  'reset': void
}

const client = new EventClient<MyEvents>({ pluginId: 'my-plugin' })
```

--------------------------------

### React App Setup for Accessibility Testing

Source: https://tanstack.com/devtools/latest/docs/framework/react/examples/a11y-devtools

The main application component containing various accessibility anti-patterns for audit testing.

```tsx
import { useState } from 'react' /** * Example app with intentional accessibility issues for testing the A11y devtools plugin */ export default function App() { const [showModal, setShowModal] = useState(false) return ( 
# A11y Devtools Demo
This page contains intentional accessibility issues to demonstrate the A11y devtools plugin. Open the devtools panel and click "Run Audit" to see the issues. 
## Accessibility Issues Demo
{/* Issue: Image without alt text */} 
### 1. Image without alt text
{/* Issue: Button without accessible name */} 
### 2. Button without accessible name
×
{/* Issue: Form input without label */} 
### 3. Form input without label
{/* Issue: Low color contrast */} 
### 4. Low color contrast
This text has poor color contrast and may be hard to read. 
{/* Issue: Link without discernible text */} 
### 5. Link without discernible text
{/* Issue: Missing main landmark */} 
### 6. Click handler on non-interactive element
setShowModal(true)} style={{ padding: '12px 24px', backgroundColor: '#0ea5e9', color: 'white', borderRadius: '4px', display: 'inline-block', cursor: 'pointer', }} > Click me (not a button!) 
{/* Issue: Empty heading */} 
### 7. Empty heading
#### 
{/* Issue: Missing form labels */} 
### 8. Select without label
Option 1 Option 2 Option 3
```

--------------------------------

### Basic Plugin Render Function

Source: https://tanstack.com/devtools/latest/docs/plugin-lifecycle.md

A simple example of a plugin's render function that injects basic HTML content into its designated DOM element.

```javascript
render: (el, theme) => {
  el.innerHTML = `<div class="${theme}">Hello from my plugin!</div>`
}
```

--------------------------------

### Plugin Name as Custom Function

Source: https://tanstack.com/devtools/latest/docs/plugin-lifecycle.md

Example of a plugin using a function to customize its tab title, including dynamic styling based on theme.

```javascript
{
  name: (el, theme) => {
    el.innerHTML = `<span style="color: ${theme === 'dark' ? '#fff' : '#000'}">My Plugin</span>`
  },
  render: (el) => { /* ... */ }
}
```

--------------------------------

### Initialize TanStack Query and Devtools integration

Source: https://tanstack.com/devtools/latest/docs/framework/react/examples/basic

Sets up the QueryClient with default options and demonstrates basic plugin event emission and subscription.

```typescript
import { createRoot } from 'react-dom/client'
import { createContext, useContext, useState } from 'react'
import { createPortal } from 'react-dom'
import {
  QueryClient,
  QueryClientProvider,
  useQuery,
  useQueryClient,
} from '@tanstack/react-query'
import Devtools from './setup'
import { queryPlugin } from './plugin'
import { Button } from './button'
import { Feature } from './feature'

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      gcTime: 1000 * 60 * 60 * 24, // 24 hours
    },
  },
})

type Post = {
  id: number
  title: string
  body: string
}

function Posts({
  setPostId,
}: {
  setPostId: React.Dispatch<React.SetStateAction<number>>
}) {
  const queryClient = useQueryClient()
  const { status, data, error, isFetching } = usePosts()

  return (
    <div>
      <h1>Posts</h1>
      <div>
        {status === 'pending' ? (
          'Loading...'
        ) : status === 'error' ? (
          <span>Error: {error.message}</span>
        ) : (
          <>
            <div>
              {data.map((post) => (
                <p key={post.id}>
                  <a
                    onClick={() => setPostId(post.id)}
                    href="#"
                    style={
                      // We can access the query data here to show bold links for
                      // ones that are cached
                      queryClient.getQueryData(['post', post.id])
                        ? {
                            fontWeight: 'bold',
                            color: 'green',
                          }
                        : {}
                    }
                  >
                    {post.title}
                  </a>
                </p>
              ))}
            </div>
            <div>{isFetching ? 'Background Updating...' : ' '}</div>
          </>
        )}
      </div>
    </div>
  )
}

const getPostById = async (id: number): Promise<Post> => {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/posts/${id}`,
  )
  return await response.json()
}

function usePost(postId: number) {
  return useQuery({
    queryKey: ['post', postId],
    queryFn: () => getPostById(postId),
    enabled: !!postId,
  })
}

function Post({
  postId,
  setPostId,
}: {
  postId: number
  setPostId: React.Dispatch<React.SetStateAction<number>>
}) {
  const { status, data, error, isFetching } = usePost(postId)

  return (
    <div>
      <div>
        <a onClick={() => setPostId(-1)} href="#">
          Back
        </a>
      </div>
      {!postId || status === 'pending' ? (
        'Loading...'
      ) : status === 'error' ? (
        <span>Error: {error.message}</span>
      ) : (
        <>
          <h1>{data.title}</h1>
          <div>
            <p>{data.body}</p>
          </div>
          <div>{isFetching ? 'Background Updating...' : ' '}</div>
        </>
      )}
    </div>
  )
}
function usePosts() {
  return useQuery({
    queryKey: ['posts'],
    queryFn: async (): Promise<Array<Post>> => {
      const response = await fetch('https://jsonplaceholder.typicode.com/posts')
      return await response.json()
    },
  })
}

const Context = createContext<{
  count: number
  setCount: (count: number) => void
}>({ count: 0, setCount: () => {} })

setTimeout(() => {
  queryPlugin.emit('test', {
    title: 'Test Event',
    description:
      'This is a test event from the TanStack Query Devtools plugin.',
  })
}, 1000)

queryPlugin.on('test', (event) => {
  console.log('Received test event:', event)
})

function Mounted() {
  const c = useContext(Context)
  console.log(c)
  return (
    <p
      onClick={() => {
        c.setCount(c.count + 1)
      }}
    >
      {c.count}
      <hr />
    </p>
  )
}
```

--------------------------------

### Initialize React application with A11y Devtools

Source: https://tanstack.com/devtools/latest/docs/framework/react/examples/a11y-devtools

Entry point file demonstrating how to wrap the application with the accessibility devtools plugin.

```typescript
import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' import { TanStackDevtools } from '@tanstack/react-devtools' import { a11yDevtoolsPlugin } from '@tanstack/devtools-a11y/react' import App from './App' createRoot(document.getElementById('root')!).render(  , ) 
```

--------------------------------

### createSolidPanel

Source: https://tanstack.com/devtools/latest/docs/devtools-utils.md

Creates a Solid devtools panel using a class-based API.

```APIDOC
## createSolidPanel(MyDevtoolsCore)

### Description
Creates a Solid devtools panel from a core class, utilizing Solid signals and lifecycle hooks.

### Usage
import { createSolidPanel } from '@tanstack/devtools-utils/solid'

const [MyPanel, NoOpPanel] = createSolidPanel(MyDevtoolsCore)
```

--------------------------------

### Solid Plugin Integration

Source: https://tanstack.com/devtools/latest/docs/plugin-lifecycle.md

Demonstrates defining a plugin in Solid and how the adapter uses the Portal component.

```tsx
// What you write:
<TanStackDevtools
  plugins={[{
    name: 'My Plugin',
    render: <MyPluginComponent />,
  }]}
/>

// What happens internally:
// The adapter wraps your component in:
//   <Portal mount={containerElement}>{yourComponent}</Portal>
```

--------------------------------

### TanStackDevtoolsCore Constructor

Source: https://tanstack.com/devtools/latest/docs/reference/classes/tanstackdevtoolscore.md

Initializes a new instance of TanStackDevtoolsCore.

```APIDOC
## new TanStackDevtoolsCore()

### Description
Initializes a new instance of TanStackDevtoolsCore.

### Parameters
#### init
- **init** (TanStackDevtoolsInit) - Description of the init parameter.

### Returns
- **TanStackDevtoolsCore** - A new instance of TanStackDevtoolsCore.
```

--------------------------------

### Basic TanStackDevtools Integration

Source: https://tanstack.com/devtools/latest/docs/framework/react/basic-setup.md

Import and render the TanStackDevtools component in the root of your React application. This provides a basic setup for the devtools panel.

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

import App from './App'

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

    <TanStackDevtools />
  </StrictMode>,
)
```

--------------------------------

### TanStackDevtoolsInit Interface

Source: https://tanstack.com/devtools/latest/docs/reference/interfaces/tanstackdevtoolsinit.md

This interface defines the initial configuration options for TanStack Devtools. It includes properties for general shell configuration, event bus settings, and an array of plugins.

```APIDOC
## Interface: TanStackDevtoolsInit

### Properties

#### config

- **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;
}>) - Optional

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

- **eventBusConfig** (ClientEventBusConfig) - Optional

#### plugins

- **plugins** (TanStackDevtoolsPlugin[]) - Optional

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
       },
     },
   ],
 })
```
```

--------------------------------

### createSolidPlugin

Source: https://tanstack.com/devtools/latest/docs/devtools-utils.md

Creates a Solid devtools plugin that renders a custom component.

```APIDOC
## createSolidPlugin(options)

### Description
Creates a Solid devtools plugin. Returns a tuple containing the Plugin and a NoOpPlugin.

### Signature
function createSolidPlugin(options: { name: string, id?: string, defaultOpen?: boolean, Component: (props: DevtoolsPanelProps) => JSX.Element }): readonly [Plugin, NoOpPlugin]

### Usage
import { createSolidPlugin } from '@tanstack/devtools-utils/solid'

const [MyPlugin, NoOpPlugin] = createSolidPlugin({
  name: 'My Store',
  id: 'my-store',
  Component: (props) => <MyStorePanel theme={props.theme} />,
})
```

--------------------------------

### Define Project Dependencies

Source: https://tanstack.com/devtools/latest/docs/framework/react/examples/a11y-devtools

Include the required TanStack devtools and accessibility packages in your package.json.

```json
{
"name": "@tanstack/
react-devtools-a11y-example",
"private": true,
"type": "module",
"scripts": {
"dev": "vite --port=3002",
"build": "vite build",
"preview": "vite preview",
"test:types": "tsc"
},
"dependencies": {
"@tanstack/devtools-a11y": "^0.1.6",
"@tanstack/react-devtools": "^0.10.9",
"react": "^19.2.0",
"react-dom": "^19.2.0"
},
"devDependencies": {
"@tanstack/devtools-vite": "0.8.3",
"@types/react": "^19.2.0",
"@types/react-dom": "^19.2.0",
"@vitejs/plugin-react": "^6.0.1",

```

--------------------------------

### Configure DevTools openHotkey

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

Defines the keyboard shortcut to open the devtools.

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

{ openHotkey: Array<KeyboardKey> }
```

--------------------------------

### React/Preact Plugin Integration

Source: https://tanstack.com/devtools/latest/docs/plugin-lifecycle.md

Shows how to define a plugin using JSX in React/Preact and how the adapter uses createPortal internally.

```tsx
// What you write:
<TanStackDevtools
  plugins={[{
    name: 'My Plugin',
    render: <MyPluginComponent />,
  }]}
/>

// What happens internally:
// The adapter's render function calls:
//   createPortal(<MyPluginComponent />, containerElement)
```

--------------------------------

### createSveltePanel

Source: https://tanstack.com/devtools/latest/docs/devtools-utils.md

Creates a Svelte panel wrapper for class-based devtools cores.

```APIDOC
## createSveltePanel(MyDevtoolsCore)

### Description
Creates a Svelte wrapper that handles mounting and unmounting of a class-based devtools core.

### Parameters
- **MyDevtoolsCore** (Class) - Required - The devtools core class to be managed.
```

--------------------------------

### TanStackDevtoolsInit Configuration Options

Source: https://tanstack.com/devtools/latest/docs/reference/interfaces/tanstackdevtoolsinit.md

Defines the initial configuration for the TanStack Devtools shell. These settings control aspects like custom triggers, default open state, hotkeys, panel location, and theme. Subsequent changes are persisted in local storage.

```typescript
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;
}>;
```

--------------------------------

### Importing the EventClient for development

Source: https://tanstack.com/devtools/latest/docs/building-custom-plugins.md

Use the root import to ensure the client is tree-shaken out of production bundles.

```ts
// dev: real client — production: no-op (tree-shaken away)
import { EventClient } from '@tanstack/devtools-event-client'
```

--------------------------------

### mount()

Source: https://tanstack.com/devtools/latest/docs/reference/classes/tanstackdevtoolscore.md

Mounts the devtools to a specified HTML element.

```APIDOC
## mount<T>(el: T)

### Description
Mounts the devtools to a specified HTML element.

### Type Parameters
- **T**: Extends `HTMLElement`

### Parameters
#### el
- **el** (T) - The HTML element to mount the devtools to.

### Returns
- **void**
```

--------------------------------

### Configure TypeScript paths

Source: https://tanstack.com/devtools/latest/docs/framework/react/examples/a11y-devtools

TypeScript configuration to resolve the accessibility devtools package source.

```json
{ "compilerOptions": { "baseUrl": ".", "paths": { "@tanstack/devtools-a11y/*": ["../../../packages/devtools-a11y/src/*"] }, "target": "ESNext", "lib": ["DOM", "DOM.Iterable", "ESNext"], "module": "ESNext", "skipLibCheck": true, /* Bundler mode */ "moduleResolution": "Bundler", "allowImportingTsExtensions": true, "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "react-jsx", /* Linting */ "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, "noFallthroughCasesInSwitch": true }, "include": ["src", "vite.config.ts"] } 
```

--------------------------------

### createVuePlugin

Source: https://tanstack.com/devtools/latest/docs/devtools-utils.md

Creates a Vue plugin by providing a name and a Vue component.

```APIDOC
## createVuePlugin(name, component)

### Description
Creates a Vue plugin that returns a tuple containing a Plugin and a NoOpPlugin. The Plugin renders the provided component, while the NoOpPlugin renders a Fragment.

### Signature
`function createVuePlugin<TComponentProps>(name: string, component: DefineComponent<TComponentProps, {}, unknown>): readonly [Plugin, NoOpPlugin]`

### Parameters
- **name** (string) - Required - The display name of the plugin.
- **component** (DefineComponent) - Required - The Vue component to render.
```

--------------------------------

### createVuePanel

Source: https://tanstack.com/devtools/latest/docs/devtools-utils.md

Creates a Vue panel component for class-based devtools cores.

```APIDOC
## createVuePanel(MyDevtoolsCore)

### Description
Creates a Vue component that manages the lifecycle (mounting/unmounting) of a class-based devtools core.

### Parameters
- **MyDevtoolsCore** (Class) - Required - The devtools core class to be managed.
```

--------------------------------

### createReactPanel

Source: https://tanstack.com/devtools/latest/docs/devtools-utils.md

Wraps a class-based devtools core into a React component that handles mounting, theme propagation, and cleanup.

```APIDOC
## createReactPanel

### Description
Wraps a class-based devtools core that exposes `mount(el, theme)` and `unmount()` methods into a React component. It manages the lifecycle of the devtools instance within a React component tree.

### Signature
`function createReactPanel<TComponentProps, TCoreDevtoolsClass>(CoreClass: new () => TCoreDevtoolsClass): readonly [Panel, NoOpPanel]`

### Parameters
- **CoreClass** (class) - Required - A class with `mount(el, theme)` and `unmount()` methods.
```

--------------------------------

### Framework Adapter Integration Flow

Source: https://tanstack.com/devtools/latest/docs/plugin-lifecycle.md

A diagram showing how a plugin component within a framework runtime renders into the devtools core's container via portals or teleports.

```mermaid
graph LR
    subgraph fw["Your Framework Runtime"]
        comp["Your Plugin Component<br/><i>Full reactivity, hooks, signals</i>"]
    end
    subgraph core["Devtools Core (Solid.js)"]
        container["Plugin Container<br/>&lt;div id='plugin-container-{id}'&gt;"]
    end
    comp -- "Portal / Teleport" --> container
```

--------------------------------

### createPreactPanel

Source: https://tanstack.com/devtools/latest/docs/devtools-utils.md

Creates a Preact devtools panel using a class-based API.

```APIDOC
## createPreactPanel(MyDevtoolsCore)

### Description
Creates a Preact devtools panel from a core class.

### Usage
import { createPreactPanel } from '@tanstack/devtools-utils/preact'

const [MyPanel, NoOpPanel] = createPreactPanel(MyDevtoolsCore)
```

--------------------------------

### TanStackDevtoolsInit Plugins Configuration

Source: https://tanstack.com/devtools/latest/docs/reference/interfaces/tanstackdevtoolsinit.md

Optional configuration for plugins to be used with TanStack Devtools. Each plugin must have a render function to mount its DOM node.

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

--------------------------------

### Importing the EventClient for production

Source: https://tanstack.com/devtools/latest/docs/building-custom-plugins.md

Use the /production subpath to include devtools events in production builds.

```ts
// always the real client, in every environment
import { EventClient } from '@tanstack/devtools-event-client/production'
```

--------------------------------

### Create Solid Panel

Source: https://tanstack.com/devtools/latest/docs/devtools-utils.md

Factory function for creating a Solid devtools panel using signals and lifecycle hooks.

```ts
import { createSolidPanel } from '@tanstack/devtools-utils/solid'

const [MyPanel, NoOpPanel] = createSolidPanel(MyDevtoolsCore)
```

--------------------------------

### Manual Plugin Object

Source: https://tanstack.com/devtools/latest/docs/devtools-utils.md

Alternative approach for one-off internal devtools panels without using factory functions.

```tsx
// Manual approach -- fine for one-off panels
{
  name: 'App State',
  render: (el, theme) => <MyPanel theme={theme} />,
}
```

--------------------------------

### Listen to All Events

Source: https://tanstack.com/devtools/latest/docs/event-system.md

Use onAll to subscribe to all events from all plugins, useful for logging or debugging.

```typescript
const cleanup = myEventClient.onAll((event) => {
  console.log(event.type, event.payload)
})
```

--------------------------------

### Configure Root Route and Devtools

Source: https://tanstack.com/devtools/latest/docs/framework/react/examples/start

Defines the root route with meta tags and a shell component that integrates TanStack Router Devtools and custom navigation panels.

```typescript
import * as React from 'react'
import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router'
import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'

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

import Header from '../components/Header'
import { RouteNavigationPanel } from '../devtools'

import appCss from '../styles.css?url'

export const Route = createRootRoute({
  head: () => ({
    meta: [
      {
        charSet: 'utf-8',
      },
      {
        name: 'viewport',
        content: 'width=device-width, initial-scale=1',
      },
      {
        title: 'TanStack Start Starter',
      },
    ],
    links: [
      {
        rel: 'stylesheet',
        href: appCss,
      },
    ],
  }),

  shellComponent: RootDocument,
})

function RootDocument({ children }: { children: React.ReactNode }) {
  console.log('Rendering Root Document')
  const plugins = [
    {
      name: 'Tanstack Router',
      render: <TanStackRouterDevtoolsPanel />,
    },
    {
      id: 'route-navigation',
      name: 'Route Navigation',
      render: <RouteNavigationPanel />,
    },
  ]

  return (
    <html lang="en">
      <head>
        <HeadContent />
      </head>
      <body>
        <Header />
        {children}
        <TanStackDevtools
          config={{
            position: 'bottom-right',
          }}
          plugins={plugins}
        />
        <Scripts />
      </body>
    </html>
  )
}
```

--------------------------------

### Localhost Resource Access Request

Source: https://tanstack.com/devtools/latest/docs/framework/react/examples/a11y-devtools

Displays the structure of a request for accessing localhost resources, including method and header placeholders.

```text
Method: undefined
Headers:
```

--------------------------------

### Configure Console Piping

Source: https://tanstack.com/devtools/latest/docs/vite-plugin.md

Enable bidirectional console piping between client and server, specifying which console methods to pipe. Defaults to enabled.

```ts
import { devtools } from '@tanstack/devtools-vite'

export default {
  plugins: [
    devtools({
      consolePiping: {
        // Whether to enable console piping (defaults to true)
        enabled: true,
        // Which console methods to pipe (defaults to all)
        levels: ['log', 'warn', 'error', 'info', 'debug'],
      }
    }),
    // ... rest of your plugins here
  ],
}
```

--------------------------------

### Manage Event Client production behavior

Source: https://tanstack.com/devtools/latest/docs/production.md

The default import automatically no-ops in production, while the /production subpath import forces the inclusion of the real client.

```ts
// dev: real client — production: no-op (tree-shaken away)
import { EventClient } from '@tanstack/devtools-event-client'
```

```ts
// always the real client, in every environment
import { EventClient } from '@tanstack/devtools-event-client/production'
```

--------------------------------

### Configure DevTools inspectHotkey

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

Defines the keyboard shortcut to open the source inspector.

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

{ inspectHotkey: Array<KeyboardKey> }
```

--------------------------------

### Create an EventClient

Source: https://tanstack.com/devtools/latest/docs/building-custom-plugins.md

Extend the base EventClient class to define a custom inspector client for your plugin.

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

class StoreInspectorClient extends EventClient<StoreEvents> {
  constructor() {
    super({ pluginId: 'store-inspector' })
  }
}

export const storeInspector = new StoreInspectorClient()
```

--------------------------------

### createPreactPlugin

Source: https://tanstack.com/devtools/latest/docs/devtools-utils.md

Creates a Preact devtools plugin that renders a custom component.

```APIDOC
## createPreactPlugin(options)

### Description
Creates a Preact devtools plugin. Returns a tuple containing the Plugin and a NoOpPlugin.

### Signature
function createPreactPlugin(options: { name: string, id?: string, defaultOpen?: boolean, Component: (props: DevtoolsPanelProps) => JSX.Element }): readonly [Plugin, NoOpPlugin]

### Usage
import { createPreactPlugin } from '@tanstack/devtools-utils/preact'

const [MyPlugin, NoOpPlugin] = createPreactPlugin({
  name: 'My Store',
  id: 'my-store',
  Component: ({ theme }) => <MyStorePanel theme={theme} />,
})
```

--------------------------------

### Configure Vite Plugin with Options

Source: https://tanstack.com/devtools/latest/docs/vite-plugin.md

Pass options to the devtools function to configure the plugin's behavior.

```ts
import { devtools } from '@tanstack/devtools-vite'

export default {
  plugins: [
    devtools({
      // options here
    }),
    // ... rest of your plugins here
  ],
}
```

--------------------------------

### Vue Plugin Integration

Source: https://tanstack.com/devtools/latest/docs/plugin-lifecycle.md

Illustrates defining a plugin in Vue with a component and props, and how the adapter uses Teleport.

```vue
<!-- What you write: -->
<TanStackDevtools
  :plugins="[{
    name: 'My Plugin',
    component: MyPluginComponent,
    props: { someProp: 'value' },
  }]"
/>

<!-- What happens internally: -->
<!-- The adapter renders: -->
<Teleport :to="'#plugin-container-' + pluginId">
  <component :is="plugin.component" v-bind="plugin.props" :theme="theme" />
</Teleport>
```

--------------------------------

### ClientEventBusConfig

Source: https://tanstack.com/devtools/latest/docs/reference/interfaces/clienteventbusconfig.md

Configuration options for the client-side event bus.

```APIDOC
## Interface: ClientEventBusConfig

### Properties

#### connectToServerBus

- **connectToServerBus** (boolean) - Optional - Optional flag to indicate if the devtools server event bus is available to connect to. This is used to determine if the devtools can connect to the server for real-time event streams.

#### debug

- **debug** (boolean) - Optional - Optional flag to enable debug mode for the event bus.

#### port

- **port** (number) - Optional - Optional port to connect to the devtools server event bus. Defaults to 4206.
```

--------------------------------

### Configure Solid Devtools Plugins

Source: https://tanstack.com/devtools/latest/docs/quick-start.md

Pass custom plugins to the TanStackDevtools component using the plugins prop.

```tsx
import { render } from 'solid-js/web'
import { TanStackDevtools } from '@tanstack/solid-devtools'
import { SolidQueryDevtoolsPanel } from '@tanstack/solid-query-devtools'
import { TanStackRouterDevtoolsPanel } from '@tanstack/solid-router-devtools'

import App from './App'

render(() => (
  <>
    <App />
    <TanStackDevtools
      plugins={[
        {
          name: 'TanStack Query',
          render: <SolidQueryDevtoolsPanel />,
        },
        {
          name: 'TanStack Router',
          render: <TanStackRouterDevtoolsPanel />,
        },
      ]}
    />
  </>
), document.getElementById('root')!)
```

--------------------------------

### Integrate Solid Devtools

Source: https://tanstack.com/devtools/latest/docs/quick-start.md

Add the TanStackDevtools component to the Solid render function.

```tsx
import { render } from 'solid-js/web'
import { TanStackDevtools } from '@tanstack/solid-devtools'

import App from './App'

render(() => (
  <>
    <App />
    <TanStackDevtools />
  </>
), document.getElementById('root')!)
```

--------------------------------

### TanStackDevtoolsInit Event Bus Configuration

Source: https://tanstack.com/devtools/latest/docs/reference/interfaces/tanstackdevtoolsinit.md

Optional configuration for the client event bus used by TanStack Devtools.

```typescript
optional eventBusConfig: ClientEventBusConfig;
```

--------------------------------

### Configure Devtools with plugins

Source: https://tanstack.com/devtools/latest/docs/quick-start.md

Pass an array of plugin objects to the plugins prop to extend devtools functionality.

```tsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { TanStackDevtools } from '@tanstack/react-devtools'
import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'

import App from './App'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
    <TanStackDevtools
      plugins={[
        {
          name: 'TanStack Query',
          render: <ReactQueryDevtoolsPanel />,
        },
        {
          name: 'TanStack Router',
          render: <TanStackRouterDevtoolsPanel />,
        },
      ]}
    />
  </StrictMode>,
)
```

--------------------------------

### Configure Event Bus

Source: https://tanstack.com/devtools/latest/docs/vite-plugin.md

Customize the event bus configuration for client-server communication, including port, debug logging, and enabling/disabling the bus.

```ts
import { devtools } from '@tanstack/devtools-vite'

export default {
  plugins: [
    devtools({
      eventBusConfig: {
        // port to run the event bus on
        port: 1234,
        // console log debug logs or not
        debug: false,
        // enables the server event bus (defaults to true), you can disable it if you're running devtools in something like storybook or vitest
        enabled: true
      },
    }),
    // ... rest of your plugins here
  ],
}
```

--------------------------------

### TanStackDevtoolsCore Constructor

Source: https://tanstack.com/devtools/latest/docs/reference/classes/tanstackdevtoolscore.md

Initializes a new instance of TanStackDevtoolsCore. Requires an initialization object.

```typescript
new TanStackDevtoolsCore(init)
```

--------------------------------

### Create Angular Panel

Source: https://tanstack.com/devtools/latest/docs/devtools-utils.md

Creates a standalone Angular component for class-based devtools cores that handles mounting and unmounting.

```ts
import { createAngularPanel } from '@tanstack/devtools-utils/angular'

const [MyPanel, NoOpPanel] = createAngularPanel(MyDevtoolsCore)
```

--------------------------------

### createReactPlugin

Source: https://tanstack.com/devtools/latest/docs/devtools-utils.md

Creates a tuple containing a plugin and a no-op plugin for React, used to integrate devtools panels into the devtools shell.

```APIDOC
## createReactPlugin

### Description
Creates a `[Plugin, NoOpPlugin]` tuple from a React component and plugin metadata. This allows for easy tree-shaking of devtools in production environments.

### Signature
`function createReactPlugin(options: { name: string, id?: string, defaultOpen?: boolean, Component: (props: DevtoolsPanelProps) => JSX.Element }): readonly [Plugin, NoOpPlugin]`

### Parameters
- **options** (object) - Required
  - **name** (string) - Required - The display name of the plugin.
  - **id** (string) - Optional - Unique identifier for the plugin.
  - **defaultOpen** (boolean) - Optional - Whether the plugin is open by default.
  - **Component** (function) - Required - The React component to render, receiving `DevtoolsPanelProps`.
```

--------------------------------

### Configure DevTools defaultOpen

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

Sets whether the devtools panel is open by default.

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

--------------------------------

### Tree-shaking pattern for React plugins

Source: https://tanstack.com/devtools/latest/docs/devtools-utils.md

Select the active plugin based on the environment to ensure production safety.

```tsx
const [MyPlugin, NoOpPlugin] = createReactPlugin({ /* ... */ })

const ActivePlugin = process.env.NODE_ENV === 'development' ? MyPlugin : NoOpPlugin
```

--------------------------------

### Configure Source Injection

Source: https://tanstack.com/devtools/latest/docs/vite-plugin.md

Configure source injection, including enabling it and specifying files or components to ignore.

```ts
import { devtools } from '@tanstack/devtools-vite'

export default {
  plugins: [
    devtools({
      injectSource: {
        enabled: true,
        ignore: {
          // files to ignore source injection for
          files: ['node_modules', /.*\.test\.(js|ts|jsx|tsx)$/],
          // components to ignore source injection for
          components: ['YourComponent', /.*Lazy$/],
        },
      }
    }),
    // ... rest of your plugins here
  ],
}
```

--------------------------------

### Create Preact Panel

Source: https://tanstack.com/devtools/latest/docs/devtools-utils.md

Factory function for creating a Preact devtools panel.

```ts
import { createPreactPanel } from '@tanstack/devtools-utils/preact'

const [MyPanel, NoOpPanel] = createPreactPanel(MyDevtoolsCore)
```

--------------------------------

### TanStack Devtools Package Dependency Graph

Source: https://tanstack.com/devtools/latest/docs/architecture.md

Detailed dependency graph illustrating the relationships between TanStack Devtools packages.

```mermaid
graph TD
    subgraph Framework["Framework Adapters"]
        react["@tanstack/react-devtools"]
        vue["@tanstack/vue-devtools"]
        solid["@tanstack/solid-devtools"]
        preact["@tanstack/preact-devtools"]
    end

    subgraph Core["Core Layer"]
        shell["@tanstack/devtools<br/><i>Core shell (Solid.js)</i>"]
        client["@tanstack/devtools-client<br/><i>Core devtools events</i>"]
        eventClient["@tanstack/devtools-event-client<br/><i>Generic EventClient</i>"]
        ui["@tanstack/devtools-ui<br/><i>Shared UI components</i>"]
        clientBus["@tanstack/devtools-event-bus/client<br/><i>ClientEventBus</i>"]
    end

    subgraph Build["Build Layer"]
        vite["@tanstack/devtools-vite"]
        serverBus["@tanstack/devtools-event-bus/server<br/><i>ServerEventBus</i>"]
    end

    subgraph Utilities
        utils["@tanstack/devtools-utils"]
    end

    react --> shell
    vue --> shell
    solid --> shell
    preact --> shell

    shell --> client
    shell --> ui
    shell --> clientBus
    client --> eventClient

    vite --> client
    vite --> serverBus

    utils --> ui
```

--------------------------------

### TanStack Devtools Architecture Diagram

Source: https://tanstack.com/devtools/latest/docs/architecture.md

Visual representation of the TanStack Devtools package layers and their dependencies.

```mermaid
block-beta
    columns 1
    block:framework["Framework Layer"]
        columns 4
        React Vue Solid Preact
    end
    block:core["Core Layer"]
        columns 3
        Shell["Devtools Shell"] UI["UI Components"] Client["Event Client"]
    end
    block:transport["Transport Layer"]
        columns 3
        ClientBus["Client Event Bus"] ServerBus["Server Event Bus"] Vite["Vite Plugin"]
    end

    framework --> core
    core --> transport
```

--------------------------------

### Configure EventBus connectToServerBus

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

Indicates if the devtools server event bus is available.

```ts
{ connectToServerBus: boolean }
```
Tokens:
Raw