### Start Example Server

Source: https://github.com/tanstack/devtools/blob/main/CONTRIBUTING.md

Alternatively, use this command to start the example's development server. Do not reinstall dependencies.

```bash
pnpm start
```

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

### Install Dependencies and Start Dev Server

Source: https://github.com/tanstack/devtools/blob/main/examples/react/drizzle/README.md

Run these commands in your terminal to install project dependencies and start the development server for local previewing.

```sh
pnpm install
pnpm dev
```

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

### Install and Run Development Server

Source: https://github.com/tanstack/devtools/blob/main/examples/react/bundling-repro/README.md

Use these commands to install project dependencies and start the local development server.

```bash
npm install
npm run dev
```

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

### Install and Start TanStack App

Source: https://github.com/tanstack/devtools/blob/main/examples/react/start/README.md

Use these commands to install dependencies and start the development server for your TanStack application.

```bash
pnpm install
pnpm start
```

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

### Install Dependencies and Run Dev Server

Source: https://github.com/tanstack/devtools/blob/main/examples/react/drizzle/README.md

Navigate to the TanStack.com directory, install its dependencies, and start the development server to preview documentation locally. The app typically runs on https://localhost:3000.

```sh
cd tanstack.com
pnpm i
# The app will run on https://localhost:3000 by default
pnpm dev
```

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

### Start SolidStart Development Server

Source: https://github.com/tanstack/devtools/blob/main/examples/solid/start/README.md

After installing dependencies, run `npm run dev` to start the development server. Use `npm run dev -- --open` to automatically open the application in a new browser tab.

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

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

### Start Client Event Bus

Source: https://github.com/tanstack/devtools/blob/main/packages/event-bus/README.md

Import and start the client-side event bus. This is typically done once in your application's client-side setup.

```ts
import { ClientEventBus } from '@tanstack/devtools-event-bus/client'
// Start the client event bus
const devtoolsClient = new ClientEventBus()

devtoolsClient.start()

export { devtoolsClient }
```

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

### Run Example Project

Source: https://github.com/tanstack/devtools/blob/main/docs/plugins/a11y.md

Navigate to the example directory and run the development server to see the a11y devtools in action.

```bash
cd examples/react/a11y-devtools
pnpm dev

```

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

### Install Event Client Package

Source: https://github.com/tanstack/devtools/blob/main/docs/building-custom-plugins.md

Install the necessary package for the EventClient functionality.

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

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

### Install Solid Devtools

Source: https://github.com/tanstack/devtools/blob/main/packages/devtools/skills/devtools-app-setup/SKILL.md

Install the Solid Devtools and Vite adapter as development dependencies.

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

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

### Commit Example Changes

Source: https://github.com/tanstack/devtools/blob/main/CONTRIBUTING.md

Use this commit message format when adding a new example to the project.

```bash
docs: Add example-name
```

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

### Install Dependencies with pnpm

Source: https://github.com/tanstack/devtools/blob/main/CONTRIBUTING.md

Ensure you have pnpm installed and then run this command to install project dependencies and linkages.

```bash
pnpm install
```

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

### Install devtools-utils

Source: https://github.com/tanstack/devtools/blob/main/docs/devtools-utils.md

Install the devtools-utils package using npm.

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

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

### Install Preact Devtools

Source: https://github.com/tanstack/devtools/blob/main/packages/devtools/skills/devtools-app-setup/SKILL.md

Install the Preact Devtools and Vite adapter as development dependencies.

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

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

### Install React Devtools

Source: https://github.com/tanstack/devtools/blob/main/packages/devtools/skills/devtools-app-setup/SKILL.md

Install the React Devtools and Vite adapter as development dependencies.

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

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

### Install Vanilla JS Devtools

Source: https://github.com/tanstack/devtools/blob/main/docs/installation.md

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

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

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

### Install TanStack Devtools Solid Adapter

Source: https://github.com/tanstack/devtools/blob/main/docs/framework/solid/adapter.md

Use this command to install the Solid Devtools adapter package.

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

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

### Start Server Event Bus

Source: https://github.com/tanstack/devtools/blob/main/packages/event-bus/README.md

Import and start the server-side event bus. This is typically done once in your application's server setup.

```tsx
import { ServerEventBus } from '@tanstack/devtools-event-bus/server'
// Start the server event bus
const devtoolsServer = new ServerEventBus()

devtoolsServer.start()

export { devtoolsServer }
```

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

### Registry Entry Example: React Function-Based Plugin

Source: https://github.com/tanstack/devtools/blob/main/packages/devtools/skills/devtools-marketplace/SKILL.md

Example of a marketplace registry entry for a function-based React plugin. This configuration enables one-click installation by specifying the package name, import details, and framework.

```typescript
'@acme/react-analytics-devtools': {
  packageName: '@acme/react-analytics-devtools',
  title: 'Acme Analytics Devtools',
  description: 'Inspect analytics events, funnels, and session data',
  requires: {
    packageName: '@acme/react-analytics',
    minVersion: '2.0.0',
  },
  pluginImport: {
    importName: 'AnalyticsDevtoolsPlugin',
    type: 'function',
  },
  pluginId: 'acme-analytics',
  docsUrl: 'https://acme.dev/analytics/devtools',
  repoUrl: 'https://github.com/acme/analytics',
  author: 'Acme Corp',
  framework: 'react',
  isNew: true,
  tags: ['Analytics', 'Tracking'],
},
```

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

### Install TanStack Devtools

Source: https://github.com/tanstack/devtools/blob/main/docs/framework/react/basic-setup.md

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

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

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

### Preact Devtools Integration Example

Source: https://github.com/tanstack/devtools/blob/main/packages/devtools-utils/skills/devtools-framework-adapters/references/preact.md

This example demonstrates the typical setup for integrating TanStack Devtools into a Preact application. It involves creating a custom devtools core class, generating a panel and plugin, and conditionally enabling the plugin based on the environment.

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

class MyDevtoolsCore {
  mount(el: HTMLElement, theme: 'light' | 'dark') {
    // Use DOM APIs to render your devtools UI into the provided element
    const container = document.createElement('div')
    container.className = theme
    container.textContent = 'Devtools loaded'
    el.appendChild(container)
  }
  unmount() {
    // cleanup
  }
}

// Step 1: Create panel from class
const [MyPanel, NoOpPanel] = createPreactPanel(MyDevtoolsCore)

// Step 2: Create plugin from panel
const [MyPlugin, NoOpPlugin] = createPreactPlugin({
  name: 'My Store',
  Component: MyPanel,
})

// Step 3: Conditional for production
const ActivePlugin =
  process.env.NODE_ENV === 'development' ? MyPlugin : NoOpPlugin

```

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

### Install TanStack Devtools

Source: https://github.com/tanstack/devtools/blob/main/docs/framework/solid/basic-setup.md

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

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

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

### Install Solid Devtools

Source: https://github.com/tanstack/devtools/blob/main/docs/installation.md

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

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

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

### Install TanStack Devtools

Source: https://github.com/tanstack/devtools/blob/main/docs/framework/vue/basic-setup.md

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

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

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

### Usage Example

Source: https://github.com/tanstack/devtools/blob/main/packages/devtools-utils/skills/devtools-framework-adapters/references/solid.md

Demonstrates the basic steps to set up custom devtools panels in a SolidJS application using `createSolidPanel` and `createSolidPlugin`.

```APIDOC
## Usage

```tsx
import {
  createSolidPanel,
  createSolidPlugin,
} from '@tanstack/devtools-utils/solid'
import { constructCoreClass } from '@tanstack/devtools-utils/solid/class'

// Step 1: Build a core class with lazy loading
const [MyDevtoolsCore, NoOpCore] = constructCoreClass(
  () => import('./MyDevtoolsUI'),
)

// Step 2: Create panel from core class
const [MyPanel, NoOpPanel] = createSolidPanel(MyDevtoolsCore)

// Step 3: Create plugin from panel
const [MyPlugin, NoOpPlugin] = createSolidPlugin({
  name: 'My Store',
  Component: MyPanel,
})
```
```

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

### Install Solid Devtools and Vite Plugin

Source: https://github.com/tanstack/devtools/blob/main/docs/quick-start.md

Install the necessary packages for Solid development. This includes the core devtools and the Vite plugin.

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

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

### Install TanStack Devtools

Source: https://github.com/tanstack/devtools/blob/main/docs/framework/angular/basic-setup.md

Install the TanStack Devtools library using npm. This command installs the core devtools and the Angular adapter.

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

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

### Install TanStack Devtools (Vue)

Source: https://context7.com/tanstack/devtools/llms.txt

Install the Vue adapter and the Vite plugin as dev dependencies.

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

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

### Install TanStack Preact Devtools

Source: https://github.com/tanstack/devtools/blob/main/docs/framework/preact/basic-setup.md

Install the TanStack Devtools library for Preact using npm. This command installs the core devtools and the Preact-specific adapter.

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

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

### Start Angular Development Server

Source: https://github.com/tanstack/devtools/blob/main/examples/angular/a11y-devtools/README.md

Run this command to start a local development server. The application will automatically reload on source file changes.

```bash
ng serve
```

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

### Install TanStack Devtools React

Source: https://github.com/tanstack/devtools/blob/main/docs/framework/react/adapter.md

Install the React Devtools package using npm.

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

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

### Install Preact Devtools

Source: https://github.com/tanstack/devtools/blob/main/docs/installation.md

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

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

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

### Example Plugin Entry for Marketplace

Source: https://github.com/tanstack/devtools/blob/main/docs/third-party-plugins.md

This is an example of a single plugin entry that would be added to the plugin registry. It includes essential metadata like package name, title, description, required dependencies, author, framework, and tags.

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

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

### Example Debug Output for Event Client

Source: https://github.com/tanstack/devtools/blob/main/docs/event-system.md

Example output demonstrating debug logs from the client event bus and a specific plugin. This output is useful for verifying event wiring and diagnosing issues.

```text
🌴 [tanstack-devtools:client-bus] Initializing client event bus
🌴 [tanstack-devtools:my-plugin] Registered event to bus my-plugin:state-update
🌴 [tanstack-devtools:my-plugin] Emitting event my-plugin:state-update
```

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

### Example of Submitting Multiple Plugins

Source: https://github.com/tanstack/devtools/blob/main/docs/third-party-plugins.md

This example demonstrates how to submit multiple plugins for different frameworks within a single pull request. It includes entries for 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 Preact Devtools and Vite Plugin

Source: https://github.com/tanstack/devtools/blob/main/docs/quick-start.md

Install the necessary packages for Preact development. This includes the core devtools and the Vite plugin.

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

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

### Install Devtools Vite Plugin

Source: https://github.com/tanstack/devtools/blob/main/packages/devtools-vite/skills/devtools-vite-plugin/SKILL.md

Install the @tanstack/devtools-vite package as a development dependency using pnpm.

```bash
pnpm add -D @tanstack/devtools-vite
```

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

### Install Angular Devtools

Source: https://github.com/tanstack/devtools/blob/main/docs/quick-start.md

Install the TanStack Devtools package for Angular using npm.

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

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

### Install TanStack Devtools Accessibility Plugin

Source: https://github.com/tanstack/devtools/blob/main/docs/plugins/a11y.md

Install the accessibility plugin using npm, pnpm, or yarn.

```bash
npm install @tanstack/devtools-a11y
# or
pnpm add @tanstack/devtools-a11y
# or
yarn add @tanstack/devtools-a11y
```

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

### Install React Devtools

Source: https://github.com/tanstack/devtools/blob/main/docs/installation.md

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

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

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

### Install React-Query Dependencies

Source: https://github.com/tanstack/devtools/blob/main/examples/react/start/README.md

Add React-Query and its devtools to your project using pnpm.

```bash
pnpm add @tanstack/react-query @tanstack/react-query-devtools
```

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

### Install TanStack Devtools Preact Adapter

Source: https://github.com/tanstack/devtools/blob/main/docs/framework/preact/adapter.md

Use npm to install the Preact Devtools adapter package.

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

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

### Multi-Framework Plugin Configuration

Source: https://github.com/tanstack/devtools/blob/main/packages/devtools/skills/devtools-marketplace/SKILL.md

Example of configuring plugins for multiple frameworks (React and Solid) within the same marketplace entry. Each framework has its own entry keyed by its package name.

```typescript
'@acme/react-analytics-devtools': {
  packageName: '@acme/react-analytics-devtools',
  title: 'Acme Analytics Devtools',
  description: 'Inspect analytics events, funnels, and session data',
  requires: {
    packageName: '@acme/react-analytics',
    minVersion: '2.0.0',
  },
  pluginImport: {
    importName: 'AnalyticsDevtoolsPlugin',
    type: 'function',
  },
  pluginId: 'acme-analytics',
  author: 'Acme Corp',
  framework: 'react',
  isNew: true,
  tags: ['Analytics', 'Tracking'],
},
'@acme/solid-analytics-devtools': {
  packageName: '@acme/solid-analytics-devtools',
  title: 'Acme Analytics Devtools',
  description: 'Inspect analytics events, funnels, and session data',
  requires: {
    packageName: '@acme/solid-analytics',
    minVersion: '2.0.0',
  },
  pluginImport: {
    importName: 'AnalyticsDevtoolsPlugin',
    type: 'function',
  },
  pluginId: 'acme-analytics',
  author: 'Acme Corp',
  framework: 'solid',
  isNew: true,
  tags: ['Analytics', 'Tracking'],
},
```

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

### Install React Devtools and Vite Plugin

Source: https://github.com/tanstack/devtools/blob/main/docs/quick-start.md

Install the necessary packages for React development. This includes the core devtools and the Vite plugin for enhanced features.

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

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

### Install Vue Devtools

Source: https://github.com/tanstack/devtools/blob/main/docs/installation.md

Install the Vue-specific devtools package. The Vite plugin is optional but recommended for advanced features.

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

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

### Manual Plugin Object Example

Source: https://github.com/tanstack/devtools/blob/main/docs/devtools-utils.md

Demonstrates a manual approach for creating a one-off internal devtools panel, suitable when not publishing a reusable library plugin.

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

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

### Install React Query Dependencies

Source: https://github.com/tanstack/devtools/blob/main/examples/react/bundling-repro/README.md

Add React Query and its devtools to your project using npm.

```bash
npm install @tanstack/react-query @tanstack/react-query-devtools
```

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

### Install Angular Devtools

Source: https://github.com/tanstack/devtools/blob/main/docs/installation.md

Install the Angular-specific devtools package. The Vite plugin is optional but recommended for advanced features.

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

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

### Custom EventClient Implementation Example

Source: https://github.com/tanstack/devtools/blob/main/docs/configuration.md

Example of creating a custom EventClient with specific event types and debug mode enabled.

```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 Devtools for Production Builds

Source: https://github.com/tanstack/devtools/blob/main/docs/installation.md

Install the core devtools package as a regular dependency if you need it in production builds, along with the optional Vite plugin.

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

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

### Basic Vue Setup

Source: https://github.com/tanstack/devtools/blob/main/docs/framework/vue/basic-setup.md

Import and add the TanStackDevtools component to your Vue application's template in the root file.

```vue
<script setup lang="ts">
import { TanStackDevtools } from '@tanstack/vue-devtools'
</script>

<template>
  <App />
  <TanStackDevtools />
</template>
```

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

### Basic Vite Plugin Setup

Source: https://github.com/tanstack/devtools/blob/main/packages/devtools-vite/skills/devtools-vite-plugin/SKILL.md

Import and include the devtools plugin as the first item in your Vite configuration's plugins array. Ensure other plugins are added after it.

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

export default {
  plugins: [
    devtools(),
    // ... other plugins AFTER devtools
  ],
}
```

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

### Vue Setup with Plugins

Source: https://github.com/tanstack/devtools/blob/main/docs/framework/vue/basic-setup.md

Configure TanStackDevtools with plugins like VueQueryDevtoolsPanel. The 'plugins' prop accepts an array of objects, each with a 'name' and 'component'.

```vue
<script setup lang="ts">
import { TanStackDevtools } from '@tanstack/vue-devtools'
type { TanStackDevtoolsVuePlugin } from '@tanstack/vue-devtools'
import { VueQueryDevtoolsPanel } from '@tanstack/vue-query-devtools'

const plugins: TanStackDevtoolsVuePlugin[] = [
  {
    name: 'Vue Query',
    component: VueQueryDevtoolsPanel,
  },
]
</script>

<template>
  <App />
  <TanStackDevtools
    :eventBusConfig="{ connectToServerBus: true }"
    :plugins="plugins"
  />
</template>
```

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

### Set Up Query Client and Provider

Source: https://github.com/tanstack/devtools/blob/main/examples/react/bundling-repro/README.md

Initialize a QueryClient and wrap your application with QueryClientProvider in main.tsx.

```tsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'

// ...

const queryClient = new QueryClient()

// ...

if (!rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement)

  root.render(
    <QueryClientProvider client={queryClient}>
      <RouterProvider router={router} />
    </QueryClientProvider>,
  )
}
```

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

### Build for Production

Source: https://github.com/tanstack/devtools/blob/main/examples/react/bundling-repro/README.md

Execute this command to create a production-ready build of the application.

```bash
npm run build
```

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

### Create a New SolidStart Project

Source: https://github.com/tanstack/devtools/blob/main/examples/solid/start/README.md

Use `npm init solid@latest` to create a new SolidStart project. You can either initialize it in the current directory or specify a project name like `my-app`.

```bash
npm init solid@latest

# create a new project in my-app
npm init solid@latest my-app
```

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

### Build Project

Source: https://github.com/tanstack/devtools/blob/main/CONTRIBUTING.md

Run this command to build the project. This is useful when testing your changes in your own projects.

```bash
pnpm build
```

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

### Setup Custom Event Client

Source: https://github.com/tanstack/devtools/blob/main/docs/framework/preact/guides/custom-plugins.md

Sets up a custom `EventClient` by defining an `EventMap` for custom events and initializing the client with a `pluginId`. This client will be used throughout the application to emit and listen for events.

```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()
```

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

### Basic Usage of createSolidPlugin

Source: https://github.com/tanstack/devtools/blob/main/packages/devtools-utils/skills/devtools-framework-adapters/references/solid.md

Demonstrates how to create a Solid devtools plugin with a named component and configuration options.

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

function MyStorePanel(props: { theme?: 'light' | 'dark' }) {
  return (
    <div class={props.theme === 'dark' ? 'dark' : 'light'}>
      <h2>My Store Devtools</h2>
    </div>
  )
}

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

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

### Create Solid Devtools Panel and Plugin

Source: https://github.com/tanstack/devtools/blob/main/packages/devtools-utils/skills/devtools-framework-adapters/references/solid.md

Steps to build a lazy-loaded devtools core, create a panel from it, and then create a plugin for your store. Import necessary functions from '@tanstack/devtools-utils/solid'.

```tsx
import {
  createSolidPanel,
  createSolidPlugin,
} from '@tanstack/devtools-utils/solid'
import { constructCoreClass } from '@tanstack/devtools-utils/solid/class'

// Step 1: Build a core class with lazy loading
const [MyDevtoolsCore, NoOpCore] = constructCoreClass(
  () => import('./MyDevtoolsUI'),
)

// Step 2: Create panel from core class
const [MyPanel, NoOpPanel] = createSolidPanel(MyDevtoolsCore)

// Step 3: Create plugin from panel
const [MyPlugin, NoOpPlugin] = createSolidPlugin({
  name: 'My Store',
  Component: MyPanel,
})
```

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

### Usage Example for Vue Devtools

Source: https://github.com/tanstack/devtools/blob/main/packages/devtools-utils/skills/devtools-framework-adapters/references/vue.md

Demonstrates how to create a custom devtools core class, then use it to create a Vue panel and plugin. Ensure the `createVuePlugin` function receives the correct arguments.

```typescript
import { createVuePanel, createVuePlugin } from '@tanstack/devtools-utils/vue'

class MyDevtoolsCore {
  constructor(private props: { theme?: string }) {}
  mount(el: HTMLElement, theme?: 'dark' | 'light' | 'system') {
    // render into el
  }
  unmount() {
    // cleanup
  }
}

// Step 1: Create panel from class
const [MyPanel, NoOpPanel] = createVuePanel(MyDevtoolsCore)

// Step 2: Create plugin from panel
const [MyPlugin, NoOpPlugin] = createVuePlugin('My Store', MyPanel)
```

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

### Run Tests with Vitest

Source: https://github.com/tanstack/devtools/blob/main/examples/react/bundling-repro/README.md

This command initiates the test suite using Vitest.

```bash
npm run test
```

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

### Install TanStack Devtools for Vue

Source: https://github.com/tanstack/devtools/blob/main/docs/framework/vue/adapter.md

Install the necessary package for TanStack Devtools Vue integration using npm.

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

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

### Setup Custom Event Client

Source: https://github.com/tanstack/devtools/blob/main/docs/framework/angular/guides/custom-plugins.md

Sets up a custom `EventClient` by defining a custom event map and providing a unique `pluginId`. This client will be used throughout the application to emit and listen to events.

```typescript
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()
```

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

### Full Vite Plugin Configuration Example

Source: https://github.com/tanstack/devtools/blob/main/packages/devtools-vite/skills/devtools-vite-plugin/references/vite-options.md

Demonstrates a comprehensive configuration for the TanStack DevTools Vite plugin, including source injection, console piping, enhanced logs, build stripping, logging, event bus settings, and editor integration.

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

export default {
  plugins: [
    devtools({
      // Source injection for Go to Source feature
      injectSource: {
        enabled: true,
        ignore: {
          files: [/.*\.stories\.(js|ts|jsx|tsx)$/],
          components: [/^Styled/, 'InternalWrapper'],
        },
      },

      // Bidirectional console piping
      consolePiping: {
        enabled: true,
        levels: ['log', 'warn', 'error'],
      },

      // Enhanced console.log/error with source locations
      enhancedLogs: {
        enabled: true,
      },

      // Strip devtools from production builds
      removeDevtoolsOnBuild: true,

      // Plugin console output
      logging: true,

      // Server event bus
      eventBusConfig: {
        port: 4206,
        enabled: true,
        debug: false,
      },

      // Editor integration (default: VS Code via launch-editor)
      // editor: { name: 'VSCode', open: async (path, line, col) => { ... } },
    }),
    // ... framework plugin (react(), vue(), solid(), etc.)
  ],
}
```

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

### Run Development Server

Source: https://github.com/tanstack/devtools/blob/main/CONTRIBUTING.md

Use this command to auto-build and auto-test files as you edit them during development.

```bash
pnpm dev
```

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

### Install Optional Vue Vite Plugin

Source: https://github.com/tanstack/devtools/blob/main/docs/installation.md

Install the optional Vite plugin for Vue to enable features like source inspection and console piping.

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

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

### Conditional Dynamic Import for Devtools Setup

Source: https://github.com/tanstack/devtools/blob/main/packages/devtools/skills/devtools-production/SKILL.md

For non-Vite projects, conditionally import the devtools setup to ensure it's not included in production bundles when `NODE_ENV` is 'production'.

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

export default function Devtools() {
  return (
    <TanStackDevtools
      plugins={
        [
          // your plugins
        ]
      }
    />
  )
}
```

```tsx
// App.tsx
const Devtools =
  process.env.NODE_ENV === 'development'
    ? (await import('./devtools-setup')).default
    : () => null

function App() {
  return (
    <>
      <YourApp />
      <Devtools />
    </>
  )
}
```

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

### Install TanStack Devtools Skills for AI Agents

Source: https://github.com/tanstack/devtools/blob/main/README.md

Install the TanStack Devtools skills for AI coding agents to enhance code generation capabilities. This command integrates the tools for better AI-assisted development.

```sh
npx @tanstack/intent@latest install
```

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

### Create and Mount TanStackDevtoolsCore Instance

Source: https://context7.com/tanstack/devtools/llms.txt

Use the low-level imperative API to integrate the devtools shell into any environment. This example shows creating a core instance with custom plugins and configuration, then mounting it into the DOM.

```typescript
import { TanStackDevtoolsCore } from '@tanstack/devtools'

// Create the core instance with config and plugins
const core = new TanStackDevtoolsCore({
  plugins: [
    {
      id: 'my-plugin',
      name: 'My Plugin',
      render: (el: HTMLDivElement, theme: 'dark' | 'light') => {
        el.innerHTML = `<div style="padding:16px;color:${theme === 'dark' ? '#fff' : '#000'}">
          Hello from vanilla plugin!
        </div>`
      },
      destroy: (pluginId: string) => {
        console.log(`Plugin ${pluginId} destroyed`)
      },
      defaultOpen: true,
    },
    {
      // Custom tab title rendered as a function
      name: (el: HTMLHeadingElement, theme: 'dark' | 'light') => {
        el.innerHTML = `<span>🛠 Tools</span>`
      },
      render: (el, theme) => {
        el.textContent = `Theme: ${theme}`
      },
    },
  ],
  config: {
    defaultOpen: false,
    position: 'bottom-left',
  },
})

// Mount into a DOM element
const container = document.createElement('div')
document.body.appendChild(container)
core.mount(container)

// Update config and plugins at runtime (reactive — tabs update immediately)
core.setConfig({
  config: { defaultOpen: true },
  plugins: [/* updated plugin list */],
})

// Tear down the devtools
core.unmount()
```

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

### Install TanStack Store Dependency

Source: https://github.com/tanstack/devtools/blob/main/examples/react/bundling-repro/README.md

Add TanStack Store to your project using npm.

```bash
npm install @tanstack/store
```

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

### Install TanStack Store Dependency

Source: https://github.com/tanstack/devtools/blob/main/examples/react/start/README.md

Add TanStack Store to your project dependencies using pnpm.

```bash
pnpm add @tanstack/store
```

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

### Plugin Name: Simple String Example

Source: https://github.com/tanstack/devtools/blob/main/docs/plugin-lifecycle.md

Use a plain string for the plugin's tab title.

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

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

### Basic Usage of createPreactPlugin

Source: https://github.com/tanstack/devtools/blob/main/packages/devtools-utils/skills/devtools-framework-adapters/references/preact.md

Demonstrates how to create a Preact devtools plugin with a named component and configuration options.

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

function MyStorePanel({ theme }: { theme?: 'light' | 'dark' }) {
  return (
    <div class={theme === 'dark' ? 'dark' : 'light'}>
      <h2>My Store Devtools</h2>
    </div>
  )
}

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

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

### Quick Start: Solid Integration

Source: https://github.com/tanstack/devtools/blob/main/docs/plugins/a11y.md

Integrate the a11y plugin into your Solid application by passing it to the TanStackDevtools component.

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

render(
  () => (
    <>
      <App />
      <TanStackDevtools plugins={[a11yDevtoolsPlugin()]} />
    </>
  ),
  document.getElementById('root')!,
)
```

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

### Quick Start: React Integration

Source: https://github.com/tanstack/devtools/blob/main/docs/plugins/a11y.md

Integrate the a11y plugin into your React application by passing it to the TanStackDevtools component.

```tsx
import {
  createRoot
} from 'react-dom/client'
import { TanStackDevtools } from '@tanstack/react-devtools'
import { a11yDevtoolsPlugin } from '@tanstack/devtools-a11y/react'

createRoot(document.getElementById('root')!).render(
  <>
    <App />
    <TanStackDevtools plugins={[a11yDevtoolsPlugin()]} />
  </>,
)
```

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

### createSolidPanel

Source: https://github.com/tanstack/devtools/blob/main/packages/devtools-utils/skills/devtools-framework-adapters/references/solid.md

Wraps a class-based devtools core in a Solid component.

```APIDOC
## createSolidPanel

Wraps a class-based devtools core in a Solid component.

### Signature

```ts
function createSolidPanel<TComponentProps extends DevtoolsPanelProps | undefined>(
  CoreClass: ClassType
): readonly [Panel, NoOpPanel]
```

Where `ClassType` is `ReturnType<typeof constructCoreClass>[0]` -- a class with `mount(el, theme)` and `unmount()`.

### Return Value

- **`Panel`** -- A Solid component that:
  - Creates a `<div style={{ height: '100%' }}>` with a ref.
  - Instantiates `CoreClass` immediately via `createSignal`.
  - Calls `core.mount(el, props.theme ?? 'dark')` inside `onMount`.
  - Calls `core.unmount()` via `onCleanup` (nested inside `onMount`).
- **`NoOpPanel`** -- Renders `<></>`.
```

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

### Vue Component for Devtools Panel

Source: https://github.com/tanstack/devtools/blob/main/packages/devtools-utils/skills/devtools-framework-adapters/references/vue.md

A basic Vue component example that can be used with `createVuePlugin`. It accepts theme props.

```vue
<!-- MyStorePanel.vue -->
<script setup lang="ts">
import type { DevtoolsPanelProps } from '@tanstack/devtools-utils/vue'

const props = defineProps<DevtoolsPanelProps>()
</script>

<template>
  <div :class="props.theme">
    <h2>My Store Devtools</h2>
  </div>
</template>
```

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

### Production Tree-Shaking with createSolidPlugin

Source: https://github.com/tanstack/devtools/blob/main/packages/devtools-utils/skills/devtools-framework-adapters/references/solid.md

Illustrates how to conditionally use the active plugin or a no-operation plugin based on the environment for production builds.

```tsx
const [MyPlugin, NoOpPlugin] = createSolidPlugin({
  name: 'My Store',
  Component: MyStorePanel,
})

const ActivePlugin = import.meta.env.DEV ? MyPlugin : NoOpPlugin
```

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

### Quick Start: Vue Integration

Source: https://github.com/tanstack/devtools/blob/main/docs/plugins/a11y.md

Import and use the Vue plugin helper to create the a11y plugin for Vue applications.

```ts
import { createA11yDevtoolsVuePlugin } from '@tanstack/devtools-a11y/vue'

const plugins = [createA11yDevtoolsVuePlugin()]

```