# llms-full (private-aware)
> Built from GitHub files and website pages. Large files may be truncated.

--- docs/installation.md ---
---
title: Installation
id: installation
---

You can install TanStack Devtools with any [NPM](https://npmjs.com) package manager.

Only install one of the following packages depending on your use case:

## React

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

TanStack Devtools is compatible with React v16.8+

## Solid

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

TanStack Devtools is compatible with Solid v1.9.5+

## Vanilla JS

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

Install the the core `@tanstack/devtools` package to use with any framework or without a framework. Each framework package up above will also re-export everything from this core package.


## Production Builds

If you want to have the devtools in production builds, you can install the core `@tanstack/devtools` package as a regular dependency:

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

Read more about using the devtools in production in our [Production docs](./production.md).

## Links discovered
- [NPM](https://npmjs.com)
- [Production docs](https://github.com/tanstack/devtools/blob/main/docs/production.md)

--- docs/overview.md ---
---
title: Overview
id: overview
---

TanStack Devtools is a framework-agnostic devtool for managing and debugging *devtool devtools*

We offer you all the tools you need to build and maintain your own devtools with ease.

We will continue to improve and expand the capabilities of TanStack Devtools, so you can focus on building great applications while we take care of the heavy lifting. We offer you an easy way
to add your own custom devtools and merge multiple instances of TanStack Devtools into a single cohesive experience.

> [!IMPORTANT]
> TanStack Devtools is currently in **alpha** and its API is subject to change.

## Origin

Have you ever wanted to build your own devtools? Then you start work on them, and you realize how complex and time-consuming it can be. First of all, you have to deal with the dreaded z-indexes! 
Create the trigger, make sure you can move it, style the panel, handle the interactions, make sure
it's not getting in the way... The list keeps going on, and you're just trying to build your
next feature in half the time!


Well, that's where TanStack Devtools comes in. We provide a solid foundation for building your own devtools, so you can focus on what matters most: your application. We provide everything you need
out of the box and all you have to do is plug the simple custom devtool panel into your app!

## Key Features

- **Framework Agnostic**: Works with any framework or library.
- **Customizable**: Easily add your own devtools and plugins.
- **Lightweight**: Minimal impact on your application's performance.
- **Easy to Use**: Plug and play with your existing setup.


--- docs/reference/index.md ---
---
id: "@tanstack/devtools"
title: "@tanstack/devtools"
---

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

# @tanstack/devtools

## Classes

- [TanStackDevtoolsCore](classes/tanstackdevtoolscore.md)

## Interfaces

- [ClientEventBusConfig](interfaces/clienteventbusconfig.md)
- [TanStackDevtoolsInit](interfaces/tanstackdevtoolsinit.md)
- [TanStackDevtoolsPlugin](interfaces/tanstackdevtoolsplugin.md)

## Type Aliases

- [TanStackDevtoolsConfig](type-aliases/tanstackdevtoolsconfig.md)

## Variables

- [PLUGIN\_CONTAINER\_ID](variables/plugin_container_id.md)
- [PLUGIN\_TITLE\_CONTAINER\_ID](variables/plugin_title_container_id.md)


## Links discovered
- [TanStackDevtoolsCore](https://github.com/tanstack/devtools/blob/main/docs/reference/classes/tanstackdevtoolscore.md)
- [ClientEventBusConfig](https://github.com/tanstack/devtools/blob/main/docs/reference/interfaces/clienteventbusconfig.md)
- [TanStackDevtoolsInit](https://github.com/tanstack/devtools/blob/main/docs/reference/interfaces/tanstackdevtoolsinit.md)
- [TanStackDevtoolsPlugin](https://github.com/tanstack/devtools/blob/main/docs/reference/interfaces/tanstackdevtoolsplugin.md)
- [TanStackDevtoolsConfig](https://github.com/tanstack/devtools/blob/main/docs/reference/type-aliases/tanstackdevtoolsconfig.md)
- [PLUGIN\_CONTAINER\_ID](https://github.com/tanstack/devtools/blob/main/docs/reference/variables/plugin_container_id.md)
- [PLUGIN\_TITLE\_CONTAINER\_ID](https://github.com/tanstack/devtools/blob/main/docs/reference/variables/plugin_title_container_id.md)

--- docs/configuration.md ---
---
title: Configuration
id: configuration
---

Both TanStack `DevTools` and `EventClient` can be configured.

> [!IMPORTANT] 
> All configuration is optional unless marked (required)

## Devtools Component Configuration

The `Devtools` component has two configuration props, regardless of Frameworks these are the same.

- `config` - Configuration for the devtool panel and interaction with it.
- `eventBusConfig` - Configuration for the event bus.

The `config` object is mainly focused around user interaction with the devtools panel and accepts the following properties:

- `defaultOpen` - If the devtools are open by default

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

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

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

- `position` - The position of the TanStack devtools trigger

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

- `panelLocation` - The location of the devtools panel

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

```

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

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

{ openHotkey: Array<KeyboardKey> }
```

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

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

{ inspectHotkey: Array<KeyboardKey> }
```

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

```ts
{ requireUrlFlag: boolean }

```

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

```ts
{ triggerImage: string }

```

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

```ts
{ urlFlag: string }
```

The `eventBusConfig` is configuration for the back bone of the devtools, the ``, and accepts the following properties:

- `debug` - Enables debug mode for the EventBus

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

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

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

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

```ts
{ port: number }
```

Put together here is an example in react:

```tsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { FormDevtools } from '@tanstack/react-form'

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

import App from './App'

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

    <TanStackDevtools
      config={{ hideUntilHover: true }}
      eventBusConfig={{ debug: true }}
      plugins={[
        {
          name: 'TanStack Form',
          render: <FormDevtools />,
          defaultOpen: true,
        },
      ]}
    />
  </StrictMode>,
)

```

## EventClient Configuration

Configuration for the `EventClient` is as follows

- `pluginId` (required) - The plugin identifier used by the event bus to direct events to listeners

```ts
{pluginId: string}
```

- `debug` - Enables debug mode for the EventClient

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

Put together the `EventClient` configuration looks like:

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

type EventMap = {
  'custom-devtools:custom-state': { state: string }
}

class customEventClient extends EventClient<EventMap> {
  constructor() {
    super({
      debug: true,
      pluginId: 'custom-devtools',
    })
  }
}
```

More information about EventClient configuration can be found in our [custom-plugins example](https://tanstack.com/devtools/latest/docs/framework/react/examples/custom-devtools)


## Links discovered
- [custom-plugins example](https://tanstack.com/devtools/latest/docs/framework/react/examples/custom-devtools)

--- scripts/generate-docs.ts ---
import { resolve } from 'node:path'
import { fileURLToPath } from 'node:url'
import { generateReferenceDocs } from '@tanstack/typedoc-config'

const __dirname = fileURLToPath(new URL('.', import.meta.url))

await generateReferenceDocs({
  packages: [
    {
      name: 'devtools',
      entryPoints: [resolve(__dirname, '../packages/devtools/src/index.ts')],
      tsconfig: resolve(__dirname, '../packages/devtools/tsconfig.docs.json'),
      outputDir: resolve(__dirname, '../docs/reference'),
    },
    {
      name: 'react-devtools',
      entryPoints: [
        resolve(__dirname, '../packages/react-devtools/src/index.ts'),
      ],
      tsconfig: resolve(
        __dirname,
        '../packages/react-devtools/tsconfig.docs.json',
      ),
      outputDir: resolve(__dirname, '../docs/framework/react/reference'),
      exclude: ['packages/devtools/**/*'],
    },
    {
      name: 'solid-devtools',
      entryPoints: [
        resolve(__dirname, '../packages/solid-devtools/src/index.ts'),
      ],
      tsconfig: resolve(
        __dirname,
        '../packages/solid-devtools/tsconfig.docs.json',
      ),
      outputDir: resolve(__dirname, '../docs/framework/solid/reference'),
      exclude: ['packages/devtools/**/*'],
    },
  ],
})

console.log('\n✅ All markdown files have been processed!')

process.exit(0)


--- docs/plugin-configuration.md ---
---
title: Plugin Configuration
id: plugin-configuration
---
 

# Plugin Configuration

You can configure TanStack Devtools plugins by passing them as an array to the `plugins` prop of the `TanStackDevtools` component.

Each plugin can have the following configuration options:
- `render` (required) - A React component that renders the plugin's UI
- `defaultOpen` (optional) - A boolean that determines if the plugin panel is open by default (default: false).
- `id` (optional) - A unique identifier for the plugin. If not provided, a random id will be generated.

Here's an example of how to configure plugins in the `TanStackDevtools` component:

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

## Default open

You can set a plugin to be open by default by setting the `defaultOpen` property to `true` when configuring the plugin. This will make the plugin panel open when the devtools are first loaded.

If you only have 1 plugin it will automatically be opened regardless of the `defaultOpen` setting.

The limit to open plugins is at 3 panels at a time. If more than 3 plugins are set to `defaultOpen: true`, only the first 3 will be opened.

This does not override the settings saved in localStorage. If you have previously opened the plugin panel, and selected some plugins to be open or closed, those settings will take precedence over the `defaultOpen` setting.

--- docs/production.md ---
---
title: Production
id: production
---


The whole point of devtools is to help you during development, so it's generally not recommended to include them in production builds, but if you know what you're doing, you can.


## Vite Plugin Configuration

The default behavior of the Vite plugin is to remove all devtools related code from the production build. This is usually what you want, but if you want to keep the devtools in production (not recommended) you can set the `removeDevtoolsOnBuild` option to `false`.

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

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

This will include the devtools and all it's plugins in the production build.

## Excluding Devtools from Production on non-vite projects

If you're running devtools in a non-vite project you will have to manually exclude the devtools from your production build. You can do this by using environment variables or any other method you prefer.

We would recommend you create a separate file for the devtools import and then conditionally import that file in your main application file depending on the environment.

Here's an example using environment variables:

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

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

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

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

## Where to install the Devtools

If you are using the devtools in development only, you can install them as a development dependency and only import them in development builds. This is the default recommended way to use the devtools.

If you are using the devtools in production, you need to install them as a regular dependency and import them in your application code.

This depends on if you are shedding development dependencies in production or not, but generally it's recommended to install them as a regular dependency if you are using them in production.

## Development / Production workflow

For Development, you can install the devtools as a development dependency and import them in your application code. The Vite plugin will take care of stripping them out of the production build.

For Production, you can install the devtools as a regular dependency and import them in your application code using the `/production` sub-export and then you also need to set `removeDevtoolsOnBuild` to `false` in the Vite plugin configuration.


--- docs/quick-start.md ---
---
title: Quick Start
id: quick-start
---

TanStack Devtools is a framework-agnostic devtool for managing and debugging *devtool devtools*

To get up and running install the correct adapter for your framework:

- **React**: `npm install @tanstack/react-devtools @tanstack/devtools-vite`
- **Solid**: `npm install @tanstack/solid-devtools @tanstack/devtools-vite`

Then import the devtools into the root of your application:

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

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

And plug the vite plugin as the first plugin in your plugin array in `vite.config.ts`:

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

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

And you're done! If you want to add custom plugins, you can do so by using the `plugins` prop:

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

function App() {
  return (
    <>
      <YourApp />
      <TanStackDevtools plugins={[
        // Add your custom plugins here
      ]} />
    </>
  )
}
```

For example, if you want to add TanStack query & router you could do so in the following way:
```javascript
import { TanStackDevtools } from '@tanstack/react-devtools'
import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <YourApp />
      <TanStackDevtools plugins={[
        {
          name: 'TanStack Query',
          render: <ReactQueryDevtoolsPanel />,
          defaultOpen: true
        },
        {
          name: 'TanStack Router',
          render: <TanStackRouterDevtoolsPanel />,
          defaultOpen: false
        },
      ]} />
    </QueryClientProvider>
  )
}
```

--- docs/third-party-plugins.md ---
---
title: Third-party Plugins
id: third-party-plugins
---

While TanStack offers a suite of first-party plugins, we also want to open the doors to third-party developers. Hence, we created the marketplace.
To be included in the marketplace registry, submit a PR to the [TanStack/devtools](https://github.com/TanStack/devtools) repository.

## Inclusion in the Marketplace

To add your plugin, submit the required information to the following file:
[`packages/devtools/src/tabs/plugin-registry.ts`](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/tabs/plugin-registry.ts)

### Example Entry

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

## Pull Request Format

As shown in the example above, the registry is an object with the following structure:

**Key** – Your package name

```tsx
'@tanstack/react-pacer-devtools': { PluginMetadata }
```

**Value** – An object of type `PluginMetadata` with the following properties:

- **`packageName`** – The package’s name on npm

```ts
{ packageName: string }
```

- **`title`** – The title of the plugin card

```ts
{ title: string }
```

- **`description`** – A short description of your devtools *(optional)*

```ts
{ description?: string }
```

- **`logoUrl`** – The URL of the plugin’s logo *(optional)*

```ts
{ logoUrl?: string }
```

- **`requires`** – An object containing the dependencies of your devtools *(optional)*

  ```ts
  requires?: {
    /** Required package name (e.g., '@tanstack/react-query') */
    packageName: string
    /** Minimum required version (semver) */
    minVersion: string
    /** Maximum version (if there’s a known breaking change) */
    maxVersion?: string
  }
  ```

- **`pluginImport`** – An object containing plugin import details *(optional)*

```ts
pluginImport?: {
  /** The exact name to import from the package (e.g., 'FormDevtoolsPlugin' or 'ReactQueryDevtoolsPanel') */
  importName: string
  /** Whether this is a JSX component or a function returning a plugin */
  type: 'jsx' | 'function'
}
  ```

- **`pluginId`** – A string representing a custom plugin ID *(optional)*

```ts
{ pluginId?: string }
```

- **`docsUrl`** – The URL to your plugin’s documentation *(optional)*

```ts
{ docsUrl?: string }
```

- **`author`** – The author’s name for credit *(optional)*

```ts
{ author?: string }
```

- **`repoUrl`** – The URL of the plugin’s repository *(optional)*

```ts
{ repoUrl?: string }
```

- **`framework`** – The framework supported by the plugin

```ts
{ framework?: 'react' | 'solid' | 'vue' | 'svelte' | 'angular' | 'other' }
```

- **`tags`** – Tags for filtering and categorization

```ts
{ tags?: string[] }
```

## Submitting Multiple Plugins

You can submit multiple plugins if you provide devtools for different frameworks.
For example, using the Pacer plugin from earlier, you might include a Solid version as well:

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

## Featured Plugins

The TanStack Marketplace includes a *Featured* section for official partners of the TanStack organization and select library authors we collaborate with.

To request inclusion, send an email to <partners+devtools@tanstack.com>.


## Links discovered
- [TanStack/devtools](https://github.com/TanStack/devtools)
- [`packages/devtools/src/tabs/plugin-registry.ts`](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/tabs/plugin-registry.ts)

--- docs/vite-plugin.md ---
---
title: Vite Plugin
id: vite-plugin
---

The Vite Plugin for TanStack Devtools provides a seamless integration for using the devtools in your Vite-powered applications. With this plugin, you get complementary features on top of the
existing features built into the devtools like better console logs, server event bus, and enhanced debugging capabilities.

## Installation

To add the devtools vite plugin you need to install it as a development dependency:

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

Then add it as the *FIRST* plugin in your Vite config:

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

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

And you're done!

## Configuration

You can configure the devtools plugin by passing options to the `devtools` function:

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

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

### eventBusConfig

  Configuration for the event bus that the devtools use to communicate with the client

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

```

### editor

> [!IMPORTANT] 
> `editor` is used as an escape hatch to implement your own go-to-source functionality if your system/editor does not work OOTB. We use `launch-editor` under the hood which supports a lot of editors but not all. If your editor is not supported you can implement your own version here. Here is the list of supported editors: https://github.com/yyx990803/launch-editor?tab=readme-ov-file#supported-editors

The open in editor configuration which has two fields, `name` and `open`,
`name` is the name of your editor, and `open` is a function that opens the editor with the given file and line number. You can implement your version for your editor as follows:

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

export default {
  plugins: [
    devtools({
      editor: {
        name: 'VSCode',
        open: async (path, lineNumber, columnNumber) => {
          const { exec } = await import('node:child_process')
          exec(
            // or windsurf/cursor/webstorm
            `code -g "${(path).replaceAll('$', '\\$')}${lineNumber ? `:${lineNumber}` : ''}${columnNumber ? `:${columnNumber}` : ''}"`,
          )
        },
      },
    }),
    // ... rest of your plugins here
  ],
}

```

### enhancedLogs

  Configuration for enhanced logging. Defaults to enabled.

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

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

### removeDevtoolsOnBuild

Whether to remove devtools from the production build. Defaults to true.

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

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

### logging
  Whether to log information to the console. Defaults to true.

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

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

### injectSource

Configuration for source injection. Defaults to enabled.


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

## Features

### Go to source

Allows you to open the source location on anything in your browser by clicking on it.

To trigger this behavior you need the Devtools Vite plugin installed and configured and
the Panel available on the page. Simply click on any element while holding down the Shift and Ctrl (or Meta) keys.

### Advanced console logs

Allows you to go directly to the console log location directly from the browser/terminal


--- examples/preact/basic/README.md ---
# Example

To run this example:

- `npm install`
- `npm run dev`


--- examples/preact/custom-devtools/README.md ---
# Example

To run this example:

- `npm install`
- `npm run dev`


--- examples/react/basic/README.md ---
# Example

To run this example:

- `npm install`
- `npm run dev`


--- examples/react/custom-devtools/README.md ---
# Example

To run this example:

- `npm install`
- `npm run dev`


--- examples/react/drizzle/README.md ---
# Welcome to TanStack.com!

This site is built with TanStack Router!

- [TanStack Router Docs](https://tanstack.com/router)

It's deployed automagically with Netlify!

- [Netlify](https://netlify.com/)

## Development

From your terminal:

```sh
pnpm install
pnpm dev
```

This starts your app in development mode, rebuilding assets on file changes.

## Editing and previewing the docs of TanStack projects locally

The documentations for all TanStack projects except for `React Charts` are hosted on [https://tanstack.com](https://tanstack.com), powered by this TanStack Router app.
In production, the markdown doc pages are fetched from the GitHub repos of the projects, but in development they are read from the local file system.

Follow these steps if you want to edit the doc pages of a project (in these steps we'll assume it's [`TanStack/form`](https://github.com/tanstack/form)) and preview them locally :

1. Create a new directory called `tanstack`.

```sh
mkdir tanstack
```

2. Enter the directory and clone this repo and the repo of the project there.

```sh
cd tanstack
git clone git@github.com:TanStack/tanstack.com.git
git clone git@github.com:TanStack/form.git
```

> [!NOTE]
> Your `tanstack` directory should look like this:
>
> ```
> tanstack/
>    |
>    +-- form/
>    |
>    +-- tanstack.com/
> ```

> [!WARNING]
> Make sure the name of the directory in your local file system matches the name of the project's repo. For example, `tanstack/form` must be cloned into `form` (this is the default) instead of `some-other-name`, because that way, the doc pages won't be found.

3. Enter the `tanstack/tanstack.com` directory, install the dependencies and run the app in dev mode:

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

4. Now you can visit http://localhost:3000/form/latest/docs/overview in the browser and see the changes you make in `tanstack/form/docs`.

> [!NOTE]
> The updated pages need to be manually reloaded in the browser.

> [!WARNING]
> You will need to update the `docs/config.json` file (in the project's repo) if you add a new doc page!


## Links discovered
- [TanStack Router Docs](https://tanstack.com/router)
- [Netlify](https://netlify.com/)
- [https://tanstack.com](https://tanstack.com)
- [`TanStack/form`](https://github.com/tanstack/form)

--- examples/react/https/README.md ---
# Example

To run this example:

- `npm install`
- `npm run dev`


--- examples/react/start/README.md ---
Welcome to your new TanStack app!

# Getting Started

To run this application:

```bash
pnpm install
pnpm start
```

# Building For Production

To build this application for production:

```bash
pnpm build
```

## Testing

This project uses [Vitest](https://vitest.dev/) for testing. You can run the tests with:

```bash
pnpm test
```

## Styling

This project uses [Tailwind CSS](https://tailwindcss.com/) for styling.

## Routing

This project uses [TanStack Router](https://tanstack.com/router). The initial setup is a file based router. Which means that the routes are managed as files in `src/routes`.

### Adding A Route

To add a new route to your application just add another a new file in the `./src/routes` directory.

TanStack will automatically generate the content of the route file for you.

Now that you have two routes you can use a `Link` component to navigate between them.

### Adding Links

To use SPA (Single Page Application) navigation you will need to import the `Link` component from `@tanstack/react-router`.

```tsx
import { Link } from '@tanstack/react-router'
```

Then anywhere in your JSX you can use it like so:

```tsx
<Link to="/about">About</Link>
```

This will create a link that will navigate to the `/about` route.

More information on the `Link` component can be found in the [Link documentation](https://tanstack.com/router/v1/docs/framework/react/api/router/linkComponent).

### Using A Layout

In the File Based Routing setup the layout is located in `src/routes/__root.tsx`. Anything you add to the root route will appear in all the routes. The route content will appear in the JSX where you use the `<Outlet />` component.

Here is an example layout that includes a header:

```tsx
import { Outlet, createRootRoute } from '@tanstack/react-router'
import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'

import { Link } from '@tanstack/react-router'

export const Route = createRootRoute({
  component: () => (
    <>
      <header>
        <nav>
          <Link to="/">Home</Link>
          <Link to="/about">About</Link>
        </nav>
      </header>
      <Outlet />
      <TanStackRouterDevtools />
    </>
  ),
})
```

The `<TanStackRouterDevtools />` component is not required so you can remove it if you don't want it in your layout.

More information on layouts can be found in the [Layouts documentation](https://tanstack.com/router/latest/docs/framework/react/guide/routing-concepts#layouts).

## Data Fetching

There are multiple ways to fetch data in your application. You can use TanStack Query to fetch data from a server. But you can also use the `loader` functionality built into TanStack Router to load the data for a route before it's rendered.

For example:

```tsx
const peopleRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/people',
  loader: async () => {
    const response = await fetch('https://swapi.dev/api/people')
    return response.json() as Promise<{
      results: {
        name: string
      }[]
    }>
  },
  component: () => {
    const data = peopleRoute.useLoaderData()
    return (
      <ul>
        {data.results.map((person) => (
          <li key={person.name}>{person.name}</li>
        ))}
      </ul>
    )
  },
})
```

Loaders simplify your data fetching logic dramatically. Check out more information in the [Loader documentation](https://tanstack.com/router/latest/docs/framework/react/guide/data-loading#loader-parameters).

### React-Query

React-Query is an excellent addition or alternative to route loading and integrating it into you application is a breeze.

First add your dependencies:

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

Next we'll need to create a query client and provider. We recommend putting those 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>,
  )
}
```

You can also add TanStack Query Devtools to the root route (optional).

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

const rootRoute = createRootRoute({
  component: () => (
    <>
      <Outlet />
      <ReactQueryDevtools buttonPosition="top-right" />
      <TanStackRouterDevtools />
    </>
  ),
})
```

Now you can use `useQuery` to fetch your data.

```tsx
import { useQuery } from '@tanstack/react-query'

import './App.css'

function App() {
  const { data } = useQuery({
    queryKey: ['people'],
    queryFn: () =>
      fetch('https://swapi.dev/api/people')
        .then((res) => res.json())
        .then((data) => data.results as { name: string }[]),
    initialData: [],
  })

  return (
    <div>
      <ul>
        {data.map((person) => (
          <li key={person.name}>{person.name}</li>
        ))}
      </ul>
    </div>
  )
}

export default App
```

You can find out everything you need to know on how to use React-Query in the [React-Query documentation](https://tanstack.com/query/latest/docs/framework/react/overview).

## State Management

Another common requirement for React applications is state management. There are many options for state management in React. TanStack Store provides a great starting point for your project.

First you need to add TanStack Store as a dependency:

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

Now let's create a simple counter in the `src/App.tsx` file as a demonstration.

```tsx
import { useStore } from '@tanstack/react-store'
import { Store } from '@tanstack/store'
import './App.css'

const countStore = new Store(0)

function App() {
  const count = useStore(countStore)
  return (
    <div>
      <button onClick={() => countStore.setState((n) => n + 1)}>
        Increment - {count}
      </button>
    </div>
  )
}

export default App
```

One of the many nice features of TanStack Store is the ability to derive state from other state. That derived state will update when the base state updates.

Let's check this out by doubling the count using derived state.

```tsx
import { useStore } from '@tanstack/react-store'
import { Store, Derived } from '@tanstack/store'
import './App.css'

const countStore = new Store(0)

const doubledStore = new Derived({
  fn: () => countStore.state * 2,
  deps: [countStore],
})
doubledStore.mount()

function App() {
  const count = useStore(countStore)
  const doubledCount = useStore(doubledStore)

  return (
    <div>
      <button onClick={() => countStore.setState((n) => n + 1)}>
        Increment - {count}
      </button>
      <div>Doubled - {doubledCount}</div>
    </div>
  )
}

export default App
```

We use the `Derived` class to create a new store that is derived from another store. The `Derived` class has a `mount` method that will start the derived store updating.

Once we've created the derived store we can use it in the `App` component just like we would any other store using the `useStore` hook.

You can find out everything you need to know on how to use TanStack Store in the [TanStack Store documentation](https://tanstack.com/store/latest).

# Demo files

Files prefixed with `demo` can be safely deleted. They are there to provide a starting point for you to play around with the features you've installed.

# Learn More

You can learn more about all of the offerings from TanStack in the [TanStack documentation](https://tanstack.com).


## Links discovered
- [Vitest](https://vitest.dev/)
- [Tailwind CSS](https://tailwindcss.com/)
- [TanStack Router](https://tanstack.com/router)
- [Link documentation](https://tanstack.com/router/v1/docs/framework/react/api/router/linkComponent)
- [Layouts documentation](https://tanstack.com/router/latest/docs/framework/react/guide/routing-concepts#layouts)
- [Loader documentation](https://tanstack.com/router/latest/docs/framework/react/guide/data-loading#loader-parameters)
- [React-Query documentation](https://tanstack.com/query/latest/docs/framework/react/overview)
- [TanStack Store documentation](https://tanstack.com/store/latest)
- [TanStack documentation](https://tanstack.com)

--- examples/react/time-travel/README.md ---
# Example

To run this example:

- `npm install`
- `npm run dev`


--- examples/solid/basic/README.md ---
# Example

To run this example:

- `npm install`
- `npm run dev`


--- examples/solid/start/README.md ---
# SolidStart

Everything you need to build a Solid project, powered by [`solid-start`](https://start.solidjs.com);

## Creating a project

```bash
# create a new project in the current directory
npm init solid@latest

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

## Developing

Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:

```bash
npm run dev

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

## Building

Solid apps are built with _presets_, which optimise your project for deployment to different environments.

By default, `npm run build` will generate a Node app that you can run with `npm start`. To use a different preset, add it to the `devDependencies` in `package.json` and specify in your `app.config.js`.

## This project was created with the [Solid CLI](https://github.com/solidjs-community/solid-cli)


## Links discovered
- [`solid-start`](https://start.solidjs.com)
- [Solid CLI](https://github.com/solidjs-community/solid-cli)

--- CONTRIBUTING.md ---
---
title: Contributing
id: contributing
---

# Contributing

## Questions

If you have questions about implementation details, help or support, then please use our dedicated community forum at [Github Discussions](https://github.com/tanstack/devtools/discussions) **PLEASE NOTE:** If you choose to instead open an issue for your question, your issue will be immediately closed and redirected to the forum.

## Reporting Issues

If you have found what you think is a bug, please [file an issue](https://github.com/tanstack/devtools/issues/new). **PLEASE NOTE:** Issues that are identified as implementation questions or non-issues will be immediately closed and redirected to [Github Discussions](https://github.com/tanstack/devtools/discussions)

## Suggesting new features

If you are here to suggest a feature, first create an issue if it does not already exist. From there, we will discuss use-cases for the feature and then finally discuss how it could be implemented.

## Development

Before proceeding with development, ensure you match one of the following criteria:

- Fixing a small bug
- Fixing a larger issue that has been previously discussed and agreed-upon by maintainers
- Adding a new feature that has been previously discussed and agreed-upon by maintainers

## Development Workflow

- Fork this repository, we prefer the `feat-*` branch name style
- Ensure you have `pnpm` installed
- Install projects dependencies and linkages by running `pnpm install`
- Auto-build and auto-test files as you edit by running `pnpm dev`
- Implement your changes and tests
- To run examples, follow their individual directions. Usually this includes:
  - cd into the example directory
  - Do NOT install dependencies again or do any linking. Nx already handles this for you. Only run install from the project root.
  - Starting the dev server with `pnpm dev` or `pnpm start` (from the example directory)
- To test in your own projects:
  - Build/watch for changes with `pnpm build`/`pnpm dev`
- Document your changes in the appropriate documentation website markdown pages
- Commit your work and open a pull request
- Submit PR for review

## Adding a new example

- Clone an existing example into the appropriate `examples` directory
- Name it the example name in kebab-case
- Update the new example's package.json to match the new example name and any other details
- Check dependencies for unused packages
- Install any additional packages to the example that you may need
- Update the docs/config.json file to include the new example in the navigation sidebar
- Commit the example eg. `docs: Add example-name`


## Links discovered
- [Github Discussions](https://github.com/tanstack/devtools/discussions)
- [file an issue](https://github.com/tanstack/devtools/issues/new)

--- packages/devtools-client/CHANGELOG.md ---
# @tanstack/devtools-client

## 0.0.5

### Patch Changes

- Updated dependencies [[`369a438`](https://github.com/TanStack/devtools/commit/369a4387763c661fce3639bbcb53e96ca2bb348c)]:
  - @tanstack/devtools-event-client@0.4.0

## 0.0.4

### Patch Changes

- add the ability to open up devtools programatically ([#250](https://github.com/TanStack/devtools/pull/250))

## 0.0.3

### Patch Changes

- Added plugin marketplace functionality into devtools ([#216](https://github.com/TanStack/devtools/pull/216))

## 0.0.2

### Patch Changes

- Number of improvements to various parts of the DevTools: ([#162](https://github.com/TanStack/devtools/pull/162))
  - Update event client to allow users to disable it
  - Allow trigger to be completely hidden
  - Add a new package `@tanstack/devtools-client` to allow users to listen to events we emit from Vite.
  - Fix bugs inside of the DevTools like plugins being nuked on page refresh.

- Updated dependencies [[`5362ab5`](https://github.com/TanStack/devtools/commit/5362ab51b8cb539b15d91435d106fb09703f388f)]:
  - @tanstack/devtools-event-client@0.3.3


## Links discovered
- [[`369a438`](https://github.com/TanStack/devtools/commit/369a4387763c661fce3639bbcb53e96ca2bb348c)
- [#250](https://github.com/TanStack/devtools/pull/250)
- [#216](https://github.com/TanStack/devtools/pull/216)
- [#162](https://github.com/TanStack/devtools/pull/162)
- [[`5362ab5`](https://github.com/TanStack/devtools/commit/5362ab51b8cb539b15d91435d106fb09703f388f)

--- packages/devtools-ui/CHANGELOG.md ---
# @tanstack/devtools-ui

## 0.4.4

### Patch Changes

- Adds optional prop to header for handeling clicks to the logo. ([#237](https://github.com/TanStack/devtools/pull/237))

## 0.4.3

### Patch Changes

- Added plugin marketplace functionality into devtools ([#216](https://github.com/TanStack/devtools/pull/216))

## 0.4.2

### Patch Changes

- update UI appearance ([#211](https://github.com/TanStack/devtools/pull/211))

## 0.4.1

### Patch Changes

- fix responsiveness in jsontree ([#207](https://github.com/TanStack/devtools/pull/207))

## 0.4.0

### Minor Changes

- Adds collapsible path prop to devtools-ui, allowing an array of object paths to collapse by default. ([#196](https://github.com/TanStack/devtools/pull/196))

## 0.3.5

### Patch Changes

- Improvements to the json tree component, now supports expansion length config ([#132](https://github.com/TanStack/devtools/pull/132))

## 0.3.4

### Patch Changes

- added support for dark/light mode ([#96](https://github.com/TanStack/devtools/pull/96))

## 0.3.3

### Patch Changes

- improvements for tree view, added icons to devtools-ui, extracted components out of devtools core into ui, panel header ([#94](https://github.com/TanStack/devtools/pull/94))

## 0.3.2

### Patch Changes

- consolidate styles into devtools-ui ([#83](https://github.com/TanStack/devtools/pull/83))

## 0.3.1

### Patch Changes

- new ui components and enhancements for json tree ([#47](https://github.com/TanStack/devtools/pull/47))

## 0.3.0

### Minor Changes

- Added json tree to devtools-ui and adjusted the width for the plugin renderers ([#29](https://github.com/TanStack/devtools/pull/29))

## 0.2.2

### Patch Changes

- extracted common UI components into a separate package ([#23](https://github.com/TanStack/devtools/pull/23))


## Links discovered
- [#237](https://github.com/TanStack/devtools/pull/237)
- [#216](https://github.com/TanStack/devtools/pull/216)
- [#211](https://github.com/TanStack/devtools/pull/211)
- [#207](https://github.com/TanStack/devtools/pull/207)
- [#196](https://github.com/TanStack/devtools/pull/196)
- [#132](https://github.com/TanStack/devtools/pull/132)
- [#96](https://github.com/TanStack/devtools/pull/96)
- [#94](https://github.com/TanStack/devtools/pull/94)
- [#83](https://github.com/TanStack/devtools/pull/83)
- [#47](https://github.com/TanStack/devtools/pull/47)
- [#29](https://github.com/TanStack/devtools/pull/29)
- [#23](https://github.com/TanStack/devtools/pull/23)

--- packages/devtools-utils/CHANGELOG.md ---
# @tanstack/devtools-utils

## 0.1.0

### Minor Changes

- feat: add preact adapter for devtools. Add preact to devtool-utils ([#283](https://github.com/TanStack/devtools/pull/283))

## 0.0.9

### Patch Changes

- Lower peer dep range to support React 17 ([#278](https://github.com/TanStack/devtools/pull/278))

## 0.0.8

### Patch Changes

- add vue utils ([#274](https://github.com/TanStack/devtools/pull/274))

## 0.0.7

### Patch Changes

- fix issue with client connectivity by not calling the connect method multiple times ([#261](https://github.com/TanStack/devtools/pull/261))

## 0.0.6

### Patch Changes

- fix config issue ([#259](https://github.com/TanStack/devtools/pull/259))

## 0.0.5

### Patch Changes

- extend the plugins to accept config ([#245](https://github.com/TanStack/devtools/pull/245))

## 0.0.4

### Patch Changes

- Updated dependencies [[`d409810`](https://github.com/TanStack/devtools/commit/d40981035da7f7be1dceef3770aafad243921b46)]:
  - @tanstack/devtools-ui@0.4.0

## 0.0.3

### Patch Changes

- fix issues with mounting ([#171](https://github.com/TanStack/devtools/pull/171))

## 0.0.2

### Patch Changes

- fix issue with solid bundling ([#169](https://github.com/TanStack/devtools/pull/169))

## 0.0.1

### Patch Changes

- initial release of utils ([#166](https://github.com/TanStack/devtools/pull/166))


## Links discovered
- [#283](https://github.com/TanStack/devtools/pull/283)
- [#278](https://github.com/TanStack/devtools/pull/278)
- [#274](https://github.com/TanStack/devtools/pull/274)
- [#261](https://github.com/TanStack/devtools/pull/261)
- [#259](https://github.com/TanStack/devtools/pull/259)
- [#245](https://github.com/TanStack/devtools/pull/245)
- [[`d409810`](https://github.com/TanStack/devtools/commit/d40981035da7f7be1dceef3770aafad243921b46)
- [#171](https://github.com/TanStack/devtools/pull/171)
- [#169](https://github.com/TanStack/devtools/pull/169)
- [#166](https://github.com/TanStack/devtools/pull/166)

--- packages/devtools-vite/CHANGELOG.md ---
# @tanstack/devtools-event-client

## 0.3.12

### Patch Changes

- Updated dependencies []:
  - @tanstack/devtools-client@0.0.5

## 0.3.11

### Patch Changes

- Updated dependencies [[`f02a894`](https://github.com/TanStack/devtools/commit/f02a8941e7f0f0cfe44ffb370391267261f31f4e)]:
  - @tanstack/devtools-client@0.0.4

## 0.3.10

### Patch Changes

- Updated dependencies [[`d0567fc`](https://github.com/TanStack/devtools/commit/d0567fc9b710bec50bce1457e195091ddbe65cac)]:
  - @tanstack/devtools-event-bus@0.3.3

## 0.3.9

### Patch Changes

- add ignore to inject source for granular manipulation ([#223](https://github.com/TanStack/devtools/pull/223))

## 0.3.8

### Patch Changes

- fix issue where hosting providers would include devtools in production ([#220](https://github.com/TanStack/devtools/pull/220))

## 0.3.7

### Patch Changes

- Added plugin marketplace functionality into devtools ([#216](https://github.com/TanStack/devtools/pull/216))

- Updated dependencies [[`0b4a4a9`](https://github.com/TanStack/devtools/commit/0b4a4a9e57f3be7079166198f3e69fedd15c5b5d)]:
  - @tanstack/devtools-client@0.0.3

## 0.3.6

### Patch Changes

- Number of improvements to various parts of the DevTools: ([#162](https://github.com/TanStack/devtools/pull/162))
  - Update event client to allow users to disable it
  - Allow trigger to be completely hidden
  - Add a new package `@tanstack/devtools-client` to allow users to listen to events we emit from Vite.
  - Fix bugs inside of the DevTools like plugins being nuked on page refresh.

- Updated dependencies [[`5362ab5`](https://github.com/TanStack/devtools/commit/5362ab51b8cb539b15d91435d106fb09703f388f)]:
  - @tanstack/devtools-client@0.0.2

## 0.3.5

### Patch Changes

- revert fix for solid deduping ([#205](https://github.com/TanStack/devtools/pull/205))

## 0.3.4

### Patch Changes

- dedupe solid deps for no issues in the console ([#200](https://github.com/TanStack/devtools/pull/200))

## 0.3.3

### Patch Changes

- fix issue with sourcemaps and vite plugin ([#151](https://github.com/TanStack/devtools/pull/151))

## 0.3.2

### Patch Changes

- improve devtools removal and fix issues with css ([#148](https://github.com/TanStack/devtools/pull/148))

## 0.3.1

### Patch Changes

- improved accuracy of go to source to go to exact column and also improved accuracy of enhanced console logs to go to exact console log location ([#139](https://github.com/TanStack/devtools/pull/139))

## 0.3.0

### Minor Changes

- Allow the vite plugin to remove the devtools completely from the build output bundle for 0 production footprint ([#136](https://github.com/TanStack/devtools/pull/136))

### Patch Changes

- downgrade vite peer dep to support v6 ([#138](https://github.com/TanStack/devtools/pull/138))

## 0.2.14

### Patch Changes

- improve open-source by using location origin ([#132](https://github.com/TanStack/devtools/pull/132))

## 0.2.13

### Patch Changes

- improve open-source by using a 3rd party package ([#121](https://github.com/TanStack/devtools/pull/121))

## 0.2.12

### Patch Changes

- Updated dependencies [[`82a7617`](https://github.com/TanStack/devtools/commit/82a7617559777940cc6c96363112fd8c3d5d7dd5)]:
  - @tanstack/devtools-event-bus@0.3.2

## 0.2.11

### Patch Changes

- fix bug with https server ([#100](https://github.com/TanStack/devtools/pull/100))

## 0.2.10

### Patch Changes

- fix a bug for server event bus not connecting with clients properly ([#88](https://github.com/TanStack/devtools/pull/88))

- Updated dependencies [[`f85fcf5`](https://github.com/TanStack/devtools/commit/f85fcf5f73fdca80297707b8eb4211a7a1308aa1)]:
  - @tanstack/devtools-event-bus@0.3.1

## 0.2.9

### Patch Changes

- fix issue with ast transform ([#73](https://github.com/TanStack/devtools/pull/73))

## 0.2.8

### Patch Changes

- Updated dependencies [[`9feb9c3`](https://github.com/TanStack/devtools/commit/9feb9c33517bda2e515b00d423bedab2502c9981)]:
  - @tanstack/devtools-event-bus@0.3.0

## 0.2.7

### Patch Changes

- fix the config for inject config to be optional ([#68](https://github.com/TanStack/devtools/pull/68))

## 0.2.6

### Patch Changes

- fix bugs with go to source not passing in column line properly to config ([#66](https://github.com/TanStack/devtools/pull/66))

## 0.2.5

### Patch Changes

- add better handling for open source to respect parent info ([#61](https://github.com/TanStack/devtools/pull/61))

## 0.2.4

### Patch Changes

- Add go to source functionality to devtools ([#56](https://github.com/TanStack/devtools/pull/56))

## 0.2.3

### Patch Changes

- Add devtools vite plugin for enhanced functionalities ([#53](https://github.com/TanStack/devtools/pull/53))

- Updated dependencies [[`a7c5601`](https://github.com/TanStack/devtools/commit/a7c5601607a8f2ee293f23f10f434c623f0b7761)]:
  - @tanstack/devtools-event-bus@0.2.2

## 0.2.2

### Patch Changes

- exclude from production by default ([#45](https://github.com/TanStack/devtools/pull/45))

## 0.2.1

### Patch Changes

- add queued events to event bus ([#18](https://github.com/TanStack/devtools/pull/18))

## 0.2.0

### Minor Changes

- Added event bus functionality into @tanstack/devtools ([#11](https://github.com/TanStack/devtools/pull/11))
  - @tanstack/devtools now comes with an integrated Event Bus on the Client.
  - The Event Bus allows for seamless communication between different parts of your running application
    without tight coupling.
  - Exposed APIs for publishing and subscribing to events.
  - Added config for the client event bus


## Links discovered
- [[`f02a894`](https://github.com/TanStack/devtools/commit/f02a8941e7f0f0cfe44ffb370391267261f31f4e)
- [[`d0567fc`](https://github.com/TanStack/devtools/commit/d0567fc9b710bec50bce1457e195091ddbe65cac)
- [#223](https://github.com/TanStack/devtools/pull/223)
- [#220](https://github.com/TanStack/devtools/pull/220)
- [#216](https://github.com/TanStack/devtools/pull/216)
- [[`0b4a4a9`](https://github.com/TanStack/devtools/commit/0b4a4a9e57f3be7079166198f3e69fedd15c5b5d)
- [#162](https://github.com/TanStack/devtools/pull/162)
- [[`5362ab5`](https://github.com/TanStack/devtools/commit/5362ab51b8cb539b15d91435d106fb09703f388f)
- [#205](https://github.com/TanStack/devtools/pull/205)
- [#200](https://github.com/TanStack/devtools/pull/200)
- [#151](https://github.com/TanStack/devtools/pull/151)
- [#148](https://github.com/TanStack/devtools/pull/148)
- [#139](https://github.com/TanStack/devtools/pull/139)
- [#136](https://github.com/TanStack/devtools/pull/136)
- [#138](https://github.com/TanStack/devtools/pull/138)
- [#132](https://github.com/TanStack/devtools/pull/132)
- [#121](https://github.com/TanStack/devtools/pull/121)
- [[`82a7617`](https://github.com/TanStack/devtools/commit/82a7617559777940cc6c96363112fd8c3d5d7dd5)
- [#100](https://github.com/TanStack/devtools/pull/100)
- [#88](https://github.com/TanStack/devtools/pull/88)
- [[`f85fcf5`](https://github.com/TanStack/devtools/commit/f85fcf5f73fdca80297707b8eb4211a7a1308aa1)
- [#73](https://github.com/TanStack/devtools/pull/73)
- [[`9feb9c3`](https://github.com/TanStack/devtools/commit/9feb9c33517bda2e515b00d423bedab2502c9981)
- [#68](https://github.com/TanStack/devtools/pull/68)
- [#66](https://github.com/TanStack/devtools/pull/66)
- [#61](https://github.com/TanStack/devtools/pull/61)
- [#56](https://github.com/TanStack/devtools/pull/56)
- [#53](https://github.com/TanStack/devtools/pull/53)
- [[`a7c5601`](https://github.com/TanStack/devtools/commit/a7c5601607a8f2ee293f23f10f434c623f0b7761)
- [#45](https://github.com/TanStack/devtools/pull/45)
- [#18](https://github.com/TanStack/devtools/pull/18)
- [#11](https://github.com/TanStack/devtools/pull/11)

--- packages/devtools/CHANGELOG.md ---
# @tanstack/devtools

## 0.9.1

### Patch Changes

- Updated dependencies []:
  - @tanstack/devtools-client@0.0.5

## 0.9.0

### Minor Changes

- add inspectHotkey to devtools configuration ([#275](https://github.com/TanStack/devtools/pull/275))

## 0.8.2

### Patch Changes

- feat: vue devtools ([#226](https://github.com/TanStack/devtools/pull/226))

## 0.8.1

### Patch Changes

- fixed an issue where SourceInspector was not working when the app is served to a subpath ([#249](https://github.com/TanStack/devtools/pull/249))

## 0.8.0

### Minor Changes

- added optional trigger component in config ([#228](https://github.com/TanStack/devtools/pull/228))

  removed trigger image setting completely

### Patch Changes

- add the ability to open up devtools programatically ([#250](https://github.com/TanStack/devtools/pull/250))

- Updated dependencies [[`f02a894`](https://github.com/TanStack/devtools/commit/f02a8941e7f0f0cfe44ffb370391267261f31f4e)]:
  - @tanstack/devtools-client@0.0.4

## 0.7.0

### Minor Changes

- add defaultOpen to plugins ([#245](https://github.com/TanStack/devtools/pull/245))

## 0.6.24

### Patch Changes

- Add featured section to marketplace ([#238](https://github.com/TanStack/devtools/pull/238))
  Add third-party Prefetch Heatmap plugin to marketplace registry(metadata-only)

## 0.6.23

### Patch Changes

- Updated dependencies [[`1db2215`](https://github.com/TanStack/devtools/commit/1db22151ac1738f7dc3b6c3eaa4b4bf58aabc331)]:
  - @tanstack/devtools-ui@0.4.4

## 0.6.22

### Patch Changes

- Updated dependencies [[`d0567fc`](https://github.com/TanStack/devtools/commit/d0567fc9b710bec50bce1457e195091ddbe65cac)]:
  - @tanstack/devtools-event-bus@0.3.3

## 0.6.21

### Patch Changes

- Added plugin marketplace functionality into devtools ([#216](https://github.com/TanStack/devtools/pull/216))

- Updated dependencies [[`0b4a4a9`](https://github.com/TanStack/devtools/commit/0b4a4a9e57f3be7079166198f3e69fedd15c5b5d)]:
  - @tanstack/devtools-client@0.0.3
  - @tanstack/devtools-ui@0.4.3

## 0.6.20

### Patch Changes

- update UI appearance ([#211](https://github.com/TanStack/devtools/pull/211))

- Updated dependencies [[`b2f8944`](https://github.com/TanStack/devtools/commit/b2f8944ebf3597179d60ce11fb0ef71b4858dc34)]:
  - @tanstack/devtools-ui@0.4.2

## 0.6.19

### Patch Changes

- Number of improvements to various parts of the DevTools: ([#162](https://github.com/TanStack/devtools/pull/162))
  - Update event client to allow users to disable it
  - Allow trigger to be completely hidden
  - Add a new package `@tanstack/devtools-client` to allow users to listen to events we emit from Vite.
  - Fix bugs inside of the DevTools like plugins being nuked on page refresh.

## 0.6.18

### Patch Changes

- Updated dependencies [[`d0ecf3e`](https://github.com/TanStack/devtools/commit/d0ecf3ec5b58b94d20d2a9131e0ffaff2ac72f7a)]:
  - @tanstack/devtools-ui@0.4.1

## 0.6.17

### Patch Changes

- fix import.meta usage in rsbuild ([#203](https://github.com/TanStack/devtools/pull/203))

## 0.6.16

### Patch Changes

- Updated dependencies [[`d409810`](https://github.com/TanStack/devtools/commit/d40981035da7f7be1dceef3770aafad243921b46)]:
  - @tanstack/devtools-ui@0.4.0

## 0.6.15

### Patch Changes

- add `workerd` export condition ([#193](https://github.com/TanStack/devtools/pull/193))

## 0.6.14

### Patch Changes

- improve devtools removal and fix issues with css ([#148](https://github.com/TanStack/devtools/pull/148))

## 0.6.13

### Patch Changes

- add option to change trigger image ([#138](https://github.com/TanStack/devtools/pull/138))

## 0.6.12

### Patch Changes

- improve open-source by using location origin ([#132](https://github.com/TanStack/devtools/pull/132))

- Updated dependencies [[`c463e10`](https://github.com/TanStack/devtools/commit/c463e1083771b8fce2ea30aa999aa36ea4040f7f)]:
  - @tanstack/devtools-ui@0.3.5

## 0.6.11

### Patch Changes

- Adds split panel functionality to the devtools panel, allowing multiple instances of devtools to be shown. ([#90](https://github.com/TanStack/devtools/pull/90))

## 0.6.10

### Patch Changes

- remove peer dep on devtools-ui ([#119](https://github.com/TanStack/devtools/pull/119))

## 0.6.9

### Patch Changes

- add new tantack logo ([#113](https://github.com/TanStack/devtools/pull/113))

## 0.6.8

### Patch Changes

- Changed package.json exports to allow safe usage in ssr environments ([#109](https://github.com/TanStack/devtools/pull/109))

## 0.6.7

### Patch Changes

- Updated dependencies [[`82a7617`](https://github.com/TanStack/devtools/commit/82a7617559777940cc6c96363112fd8c3d5d7dd5)]:
  - @tanstack/devtools-event-bus@0.3.2

## 0.6.6

### Patch Changes

- add peer dep to devtools ([#103](https://github.com/TanStack/devtools/pull/103))

- fix issue with window not defined ([#103](https://github.com/TanStack/devtools/pull/103))

## 0.6.5

### Patch Changes

- fix bug with https server ([#100](https://github.com/TanStack/devtools/pull/100))

## 0.6.4

### Patch Changes

- added support for dark/light mode ([#96](https://github.com/TanStack/devtools/pull/96))

- Updated dependencies [[`59ecdb6`](https://github.com/TanStack/devtools/commit/59ecdb663cb9410fabf507df684d767c1d4edf11)]:
  - @tanstack/devtools-ui@0.3.4

## 0.6.3

### Patch Changes

- improvements for tree view, added icons to devtools-ui, extracted components out of devtools core into ui, panel header ([#94](https://github.com/TanStack/devtools/pull/94))

- Updated dependencies [[`442d2ce`](https://github.com/TanStack/devtools/commit/442d2ce1883b4517398e2890f4180b622765148d)]:
  - @tanstack/devtools-ui@0.3.3

## 0.6.2

### Patch Changes

- Updated dependencies [[`f85fcf5`](https://github.com/TanStack/devtools/commit/f85fcf5f73fdca80297707b8eb4211a7a1308aa1)]:
  - @tanstack/devtools-event-bus@0.3.1

## 0.6.1

### Patch Changes

- consolidate styles into devtools-ui ([#83](https://github.com/TanStack/devtools/pull/83))

- Updated dependencies [[`fc02e84`](https://github.com/TanStack/devtools/commit/fc02e849dd4a00e2e96d867d4c78dabac9989610)]:
  - @tanstack/devtools-ui@0.3.2

## 0.6.0

### Minor Changes

- add seo tab and improve UX of plugins tab ([#80](https://github.com/TanStack/devtools/pull/80))

## 0.5.1

### Patch Changes

- fix issue with react-router and delegated events ([#75](https://github.com/TanStack/devtools/pull/75))

## 0.5.0

### Minor Changes

- removed CJS support, added detached mode to devtools ([#70](https://github.com/TanStack/devtools/pull/70))

### Patch Changes

- Updated dependencies [[`9feb9c3`](https://github.com/TanStack/devtools/commit/9feb9c33517bda2e515b00d423bedab2502c9981)]:
  - @tanstack/devtools-event-bus@0.3.0

## 0.4.5

### Patch Changes

- fix console log ([#58](https://github.com/TanStack/devtools/pull/58))

## 0.4.4

### Patch Changes

- Add go to source functionality to devtools ([#56](https://github.com/TanStack/devtools/pull/56))

## 0.4.3

### Patch Changes

- improve devtools shortcut handling ([#49](https://github.com/TanStack/devtools/pull/49))

## 0.4.2

### Patch Changes

- Updated dependencies [[`a7c5601`](https://github.com/TanStack/devtools/commit/a7c5601607a8f2ee293f23f10f434c623f0b7761)]:
  - @tanstack/devtools-event-bus@0.2.2

## 0.4.1

### Patch Changes

- Updated dependencies [[`adad021`](https://github.com/TanStack/devtools/commit/adad0217e25044993bc24f19cd06ce546433b5ba)]:
  - @tanstack/devtools-ui@0.3.1

## 0.4.0

### Minor Changes

- Change the TanStackDevtools export ([#40](https://github.com/TanStack/devtools/pull/40))

## 0.3.2

### Patch Changes

- fix the height of the mounted container ([#38](https://github.com/TanStack/devtools/pull/38))

## 0.3.1

### Patch Changes

- Updated dependencies [[`5372697`](https://github.com/TanStack/devtools/commit/5372697a58bfd60f4c25f0d3f7291c2d1b473b09)]:
  - @tanstack/devtools-ui@0.3.0

## 0.3.0

### Minor Changes

- extracted common UI components into a separate package ([#23](https://github.com/TanStack/devtools/pull/23))

### Patch Changes

- Updated dependencies [[`f9b97df`](https://github.com/TanStack/devtools/commit/f9b97dfbfdb3b6eccf51cba2655b8bd542f21bfa)]:
  - @tanstack/devtools-ui@0.2.2

## 0.2.1

### Patch Changes

- Updated dependencies [[`f62bdf9`](https://github.com/TanStack/devtools/commit/f62bdf903591fad15cccab93290a95c194c99b51)]:
  - @tanstack/devtools-event-bus@0.2.1

## 0.2.0

### Minor Changes

- Added event bus functionality into @tanstack/devtools ([#11](https://github.com/TanStack/devtools/pull/11))
  - @tanstack/devtools now comes with an integrated Event Bus on the Client.
  - The Event Bus allows for seamless communication between different parts of your running application
    without tight coupling.
  - Exposed APIs for publishing and subscribing to events.
  - Added config for the client event bus

### Patch Changes

- Updated dependencies [[`77e2f6e`](https://github.com/TanStack/devtools/commit/77e2f6e8d3d5cc82b8d37fcc00c01078e9960003)]:
  - @tanstack/devtools-event-bus@0.2.0

## 0.1.1

### Patch Changes

- Updated the JSdoc descriptions for easier usage ([#8](https://github.com/TanStack/devtools/pull/8))

## 0.1.0

### Minor Changes

- Initial alpha release of @tanstack/devtools ([#6](https://github.com/TanStack/devtools/pull/6))


## Links discovered
- [#275](https://github.com/TanStack/devtools/pull/275)
- [#226](https://github.com/TanStack/devtools/pull/226)
- [#249](https://github.com/TanStack/devtools/pull/249)
- [#228](https://github.com/TanStack/devtools/pull/228)
- [#250](https://github.com/TanStack/devtools/pull/250)
- [[`f02a894`](https://github.com/TanStack/devtools/commit/f02a8941e7f0f0cfe44ffb370391267261f31f4e)
- [#245](https://github.com/TanStack/devtools/pull/245)
- [#238](https://github.com/TanStack/devtools/pull/238)
- [[`1db2215`](https://github.com/TanStack/devtools/commit/1db22151ac1738f7dc3b6c3eaa4b4bf58aabc331)
- [[`d0567fc`](https://github.com/TanStack/devtools/commit/d0567fc9b710bec50bce1457e195091ddbe65cac)
- [#216](https://github.com/TanStack/devtools/pull/216)
- [[`0b4a4a9`](https://github.com/TanStack/devtools/commit/0b4a4a9e57f3be7079166198f3e69fedd15c5b5d)
- [#211](https://github.com/TanStack/devtools/pull/211)
- [[`b2f8944`](https://github.com/TanStack/devtools/commit/b2f8944ebf3597179d60ce11fb0ef71b4858dc34)
- [#162](https://github.com/TanStack/devtools/pull/162)
- [[`d0ecf3e`](https://github.com/TanStack/devtools/commit/d0ecf3ec5b58b94d20d2a9131e0ffaff2ac72f7a)
- [#203](https://github.com/TanStack/devtools/pull/203)
- [[`d409810`](https://github.com/TanStack/devtools/commit/d40981035da7f7be1dceef3770aafad243921b46)
- [#193](https://github.com/TanStack/devtools/pull/193)
- [#148](https://github.com/TanStack/devtools/pull/148)
- [#138](https://github.com/TanStack/devtools/pull/138)
- [#132](https://github.com/TanStack/devtools/pull/132)
- [[`c463e10`](https://github.com/TanStack/devtools/commit/c463e1083771b8fce2ea30aa999aa36ea4040f7f)
- [#90](https://github.com/TanStack/devtools/pull/90)
- [#119](https://github.com/TanStack/devtools/pull/119)
- [#113](https://github.com/TanStack/devtools/pull/113)
- [#109](https://github.com/TanStack/devtools/pull/109)
- [[`82a7617`](https://github.com/TanStack/devtools/commit/82a7617559777940cc6c96363112fd8c3d5d7dd5)
- [#103](https://github.com/TanStack/devtools/pull/103)
- [#100](https://github.com/TanStack/devtools/pull/100)
- [#96](https://github.com/TanStack/devtools/pull/96)
- [[`59ecdb6`](https://github.com/TanStack/devtools/commit/59ecdb663cb9410fabf507df684d767c1d4edf11)
- [#94](https://github.com/TanStack/devtools/pull/94)
- [[`442d2ce`](https://github.com/TanStack/devtools/commit/442d2ce1883b4517398e2890f4180b622765148d)
- [[`f85fcf5`](https://github.com/TanStack/devtools/commit/f85fcf5f73fdca80297707b8eb4211a7a1308aa1)
- [#83](https://github.com/TanStack/devtools/pull/83)
- [[`fc02e84`](https://github.com/TanStack/devtools/commit/fc02e849dd4a00e2e96d867d4c78dabac9989610)
- [#80](https://github.com/TanStack/devtools/pull/80)
- [#75](https://github.com/TanStack/devtools/pull/75)
- [#70](https://github.com/TanStack/devtools/pull/70)
- [[`9feb9c3`](https://github.com/TanStack/devtools/commit/9feb9c33517bda2e515b00d423bedab2502c9981)
- [#58](https://github.com/TanStack/devtools/pull/58)
- [#56](https://github.com/TanStack/devtools/pull/56)
- [#49](https://github.com/TanStack/devtools/pull/49)
- [[`a7c5601`](https://github.com/TanStack/devtools/commit/a7c5601607a8f2ee293f23f10f434c623f0b7761)
- [[`adad021`](https://github.com/TanStack/devtools/commit/adad0217e25044993bc24f19cd06ce546433b5ba)
- [#40](https://github.com/TanStack/devtools/pull/40)
- [#38](https://github.com/TanStack/devtools/pull/38)
- [[`5372697`](https://github.com/TanStack/devtools/commit/5372697a58bfd60f4c25f0d3f7291c2d1b473b09)
- [#23](https://github.com/TanStack/devtools/pull/23)
- [[`f9b97df`](https://github.com/TanStack/devtools/commit/f9b97dfbfdb3b6eccf51cba2655b8bd542f21bfa)
- [[`f62bdf9`](https://github.com/TanStack/devtools/commit/f62bdf903591fad15cccab93290a95c194c99b51)
- [#11](https://github.com/TanStack/devtools/pull/11)
- [[`77e2f6e`](https://github.com/TanStack/devtools/commit/77e2f6e8d3d5cc82b8d37fcc00c01078e9960003)
- [#8](https://github.com/TanStack/devtools/pull/8)
- [#6](https://github.com/TanStack/devtools/pull/6)

--- packages/event-bus-client/CHANGELOG.md ---
# @tanstack/devtools-event-client

## 0.4.0

### Minor Changes

- fix memory leak and add internal event emission ([#286](https://github.com/TanStack/devtools/pull/286))

## 0.3.5

### Patch Changes

- fixed connectivity issues ([#263](https://github.com/TanStack/devtools/pull/263))

## 0.3.4

### Patch Changes

- increase minimum reconnection time and allow it to be configurable on event bus client ([#235](https://github.com/TanStack/devtools/pull/235))

## 0.3.3

### Patch Changes

- Number of improvements to various parts of the DevTools: ([#162](https://github.com/TanStack/devtools/pull/162))
  - Update event client to allow users to disable it
  - Allow trigger to be completely hidden
  - Add a new package `@tanstack/devtools-client` to allow users to listen to events we emit from Vite.
  - Fix bugs inside of the DevTools like plugins being nuked on page refresh.

## 0.3.2

### Patch Changes

- fix issue with constructor causing side-effects ([#178](https://github.com/TanStack/devtools/pull/178))

## 0.3.1

### Patch Changes

- fixed an issue where custom events were not working in angular ([#174](https://github.com/TanStack/devtools/pull/174))

## 0.3.0

### Minor Changes

- remove the production subexport in favor of always exporting the exports ([#150](https://github.com/TanStack/devtools/pull/150))

## 0.2.5

### Patch Changes

- fix issue with the client not working in react native ([#139](https://github.com/TanStack/devtools/pull/139))

## 0.2.4

### Patch Changes

- fix issue for react-native and non-web native environments for event-client ([#117](https://github.com/TanStack/devtools/pull/117))

## 0.2.3

### Patch Changes

- fix a bug for server event bus not connecting with clients properly ([#88](https://github.com/TanStack/devtools/pull/88))

## 0.2.2

### Patch Changes

- exclude from production by default ([#45](https://github.com/TanStack/devtools/pull/45))

## 0.2.1

### Patch Changes

- add queued events to event bus ([#18](https://github.com/TanStack/devtools/pull/18))

## 0.2.0

### Minor Changes

- Added event bus functionality into @tanstack/devtools ([#11](https://github.com/TanStack/devtools/pull/11))
  - @tanstack/devtools now comes with an integrated Event Bus on the Client.
  - The Event Bus allows for seamless communication between different parts of your running application
    without tight coupling.
  - Exposed APIs for publishing and subscribing to events.
  - Added config for the client event bus


## Links discovered
- [#286](https://github.com/TanStack/devtools/pull/286)
- [#263](https://github.com/TanStack/devtools/pull/263)
- [#235](https://github.com/TanStack/devtools/pull/235)
- [#162](https://github.com/TanStack/devtools/pull/162)
- [#178](https://github.com/TanStack/devtools/pull/178)
- [#174](https://github.com/TanStack/devtools/pull/174)
- [#150](https://github.com/TanStack/devtools/pull/150)
- [#139](https://github.com/TanStack/devtools/pull/139)
- [#117](https://github.com/TanStack/devtools/pull/117)
- [#88](https://github.com/TanStack/devtools/pull/88)
- [#45](https://github.com/TanStack/devtools/pull/45)
- [#18](https://github.com/TanStack/devtools/pull/18)
- [#11](https://github.com/TanStack/devtools/pull/11)

--- packages/event-bus/CHANGELOG.md ---
# @tanstack/devtools-event-bus

## 0.3.3

### Patch Changes

- fixed an issue where bigInt was not parsed properly ([#231](https://github.com/TanStack/devtools/pull/231))

## 0.3.2

### Patch Changes

- fix issue with broadcast channel not emitting functions properly and failing ([#106](https://github.com/TanStack/devtools/pull/106))

## 0.3.1

### Patch Changes

- fix a bug for server event bus not connecting with clients properly ([#88](https://github.com/TanStack/devtools/pull/88))

## 0.3.0

### Minor Changes

- removed CJS support, added detached mode to devtools ([#70](https://github.com/TanStack/devtools/pull/70))

## 0.2.2

### Patch Changes

- Add devtools vite plugin for enhanced functionalities ([#53](https://github.com/TanStack/devtools/pull/53))

## 0.2.1

### Patch Changes

- add queued events to event bus ([#18](https://github.com/TanStack/devtools/pull/18))

## 0.2.0

### Minor Changes

- Added event bus functionality into @tanstack/devtools ([#11](https://github.com/TanStack/devtools/pull/11))
  - @tanstack/devtools now comes with an integrated Event Bus on the Client.
  - The Event Bus allows for seamless communication between different parts of your running application
    without tight coupling.
  - Exposed APIs for publishing and subscribing to events.
  - Added config for the client event bus


## Links discovered
- [#231](https://github.com/TanStack/devtools/pull/231)
- [#106](https://github.com/TanStack/devtools/pull/106)
- [#88](https://github.com/TanStack/devtools/pull/88)
- [#70](https://github.com/TanStack/devtools/pull/70)
- [#53](https://github.com/TanStack/devtools/pull/53)
- [#18](https://github.com/TanStack/devtools/pull/18)
- [#11](https://github.com/TanStack/devtools/pull/11)

--- packages/preact-devtools/CHANGELOG.md ---
# @tanstack/preact-devtools

## 0.9.2

### Patch Changes

- Updated dependencies []:
  - @tanstack/devtools@0.9.1

## 0.9.1

### Patch Changes

- Updated dependencies [[`6d3bdc0`](https://github.com/TanStack/devtools/commit/6d3bdc045637503e7ddfe5253ad5f2dbaa27f593)]:
  - @tanstack/devtools@0.9.0

## 0.9.0

### Minor Changes

- feat: add preact adapter for devtools. Add preact to devtool-utils ([#283](https://github.com/TanStack/devtools/pull/283))

## 0.8.2

### Patch Changes

- Initial release of Preact devtools adapter


## Links discovered
- [[`6d3bdc0`](https://github.com/TanStack/devtools/commit/6d3bdc045637503e7ddfe5253ad5f2dbaa27f593)
- [#283](https://github.com/TanStack/devtools/pull/283)

--- packages/react-devtools/CHANGELOG.md ---
# @tanstack/react-devtools

## 0.8.4

### Patch Changes

- Updated dependencies []:
  - @tanstack/devtools@0.9.1

## 0.8.3

### Patch Changes

- Updated dependencies [[`6d3bdc0`](https://github.com/TanStack/devtools/commit/6d3bdc045637503e7ddfe5253ad5f2dbaa27f593)]:
  - @tanstack/devtools@0.9.0

## 0.8.2

### Patch Changes

- Updated dependencies [[`d781f4f`](https://github.com/TanStack/devtools/commit/d781f4f7588619bd042ba647a6cfa139b1430f46)]:
  - @tanstack/devtools@0.8.2

## 0.8.1

### Patch Changes

- Updated dependencies [[`096744e`](https://github.com/TanStack/devtools/commit/096744e918a8c76d656f3abb1728ad7390fe8b4b)]:
  - @tanstack/devtools@0.8.1

## 0.8.0

### Minor Changes

- added optional trigger component in config ([#228](https://github.com/TanStack/devtools/pull/228))

  removed trigger image setting completely

### Patch Changes

- Updated dependencies [[`f02a894`](https://github.com/TanStack/devtools/commit/f02a8941e7f0f0cfe44ffb370391267261f31f4e), [`d524864`](https://github.com/TanStack/devtools/commit/d524864ce64f3fa0409f9f05e212b3ad07c661ee)]:
  - @tanstack/devtools@0.8.0

## 0.7.11

### Patch Changes

- Updated dependencies [[`aa32c02`](https://github.com/TanStack/devtools/commit/aa32c0219a90abf350bd287f2ef0321b3a5012e8)]:
  - @tanstack/devtools@0.7.0

## 0.7.10

### Patch Changes

- Updated dependencies [[`93ec7e9`](https://github.com/TanStack/devtools/commit/93ec7e91854d8e39e3f148f8d1ab966f464d2706)]:
  - @tanstack/devtools@0.6.24

## 0.7.9

### Patch Changes

- Updated dependencies []:
  - @tanstack/devtools@0.6.23

## 0.7.8

### Patch Changes

- Updated dependencies []:
  - @tanstack/devtools@0.6.22

## 0.7.7

### Patch Changes

- Added plugin marketplace functionality into devtools ([#216](https://github.com/TanStack/devtools/pull/216))

- Updated dependencies [[`0b4a4a9`](https://github.com/TanStack/devtools/commit/0b4a4a9e57f3be7079166198f3e69fedd15c5b5d)]:
  - @tanstack/devtools@0.6.21

## 0.7.6

### Patch Changes

- Updated dependencies [[`b2f8944`](https://github.com/TanStack/devtools/commit/b2f8944ebf3597179d60ce11fb0ef71b4858dc34)]:
  - @tanstack/devtools@0.6.20

## 0.7.5

### Patch Changes

- Updated dependencies [[`5362ab5`](https://github.com/TanStack/devtools/commit/5362ab51b8cb539b15d91435d106fb09703f388f)]:
  - @tanstack/devtools@0.6.19

## 0.7.4

### Patch Changes

- Updated dependencies []:
  - @tanstack/devtools@0.6.18

## 0.7.3

### Patch Changes

- Updated dependencies [[`748d2e9`](https://github.com/TanStack/devtools/commit/748d2e9cdbbc079442bab7bf6da85ed2767a833d)]:
  - @tanstack/devtools@0.6.17

## 0.7.2

### Patch Changes

- Updated dependencies []:
  - @tanstack/devtools@0.6.16

## 0.7.1

### Patch Changes

- Updated dependencies [[`a97ed26`](https://github.com/TanStack/devtools/commit/a97ed2685b43c25d34e5e30cc5f07254b3e810bf)]:
  - @tanstack/devtools@0.6.15

## 0.7.0

### Minor Changes

- remove the production subexport in favor of always exporting the exports ([#150](https://github.com/TanStack/devtools/pull/150))

## 0.6.10

### Patch Changes

- Updated dependencies [[`6b6aa45`](https://github.com/TanStack/devtools/commit/6b6aa45e10ba08cc9465d3c73c9b1454a9966170)]:
  - @tanstack/devtools@0.6.14

## 0.6.9

### Patch Changes

- Updated dependencies [[`a18b77e`](https://github.com/TanStack/devtools/commit/a18b77e1017e814cc0393d2e4f44acd80abf99a6)]:
  - @tanstack/devtools@0.6.13

## 0.6.8

### Patch Changes

- Updated dependencies [[`c463e10`](https://github.com/TanStack/devtools/commit/c463e1083771b8fce2ea30aa999aa36ea4040f7f)]:
  - @tanstack/devtools@0.6.12

## 0.6.7

### Patch Changes

- Adds split panel functionality to the devtools panel, allowing multiple instances of devtools to be shown. ([#90](https://github.com/TanStack/devtools/pull/90))

- Updated dependencies [[`c591da3`](https://github.com/TanStack/devtools/commit/c591da3a6e258d943f4c0d1b5b3f5cdd1111f37c)]:
  - @tanstack/devtools@0.6.11

## 0.6.6

### Patch Changes

- Updated dependencies [[`784313b`](https://github.com/TanStack/devtools/commit/784313b8953184dcd65c008b0efabc2f5a532b27)]:
  - @tanstack/devtools@0.6.10

## 0.6.5

### Patch Changes

- Updated dependencies [[`42d883d`](https://github.com/TanStack/devtools/commit/42d883dff07e622c4f1c16e9559bf00fcdd27572)]:
  - @tanstack/devtools@0.6.9

## 0.6.4

### Patch Changes

- Updated dependencies [[`6447ab2`](https://github.com/TanStack/devtools/commit/6447ab20d6f479b9a71be2c727d70a441d09222b)]:
  - @tanstack/devtools@0.6.8

## 0.6.3

### Patch Changes

- Updated dependencies []:
  - @tanstack/devtools@0.6.7

## 0.6.2

### Patch Changes

- Updated dependencies [[`2fe02f9`](https://github.com/TanStack/devtools/commit/2fe02f906e6e9118c87efbb95508c8f030abfd5d), [`2fe02f9`](https://github.com/TanStack/devtools/commit/2fe02f906e6e9118c87efbb95508c8f030abfd5d)]:
  - @tanstack/devtools@0.6.6

## 0.6.1

### Patch Changes

- Updated dependencies [[`4119f73`](https://github.com/TanStack/devtools/commit/4119f73caa27dcaae1fe7cbca20a11f18b4d99b8)]:
  - @tanstack/devtools@0.6.5

## 0.6.0

### Minor Changes

- added support for dark/light mode ([#96](https://github.com/TanStack/devtools/pull/96))

### Patch Changes

- Updated dependencies [[`59ecdb6`](https://github.com/TanStack/devtools/commit/59ecdb663cb9410fabf507df684d767c1d4edf11)]:
  - @tanstack/devtools@0.6.4

## 0.5.5

### Patch Changes

- Updated dependencies [[`442d2ce`](https://github.com/TanStack/devtools/commit/442d2ce1883b4517398e2890f4180b622765148d)]:
  - @tanstack/devtools@0.6.3

## 0.5.4

### Patch Changes

- Updated dependencies []:
  - @tanstack/devtools@0.6.2

## 0.5.3

### Patch Changes

- Updated dependencies [[`fc02e84`](https://github.com/TanStack/devtools/commit/fc02e849dd4a00e2e96d867d4c78dabac9989610)]:
  - @tanstack/devtools@0.6.1

## 0.5.2

### Patch Changes

- Updated dependencies [[`a7c95fa`](https://github.com/TanStack/devtools/commit/a7c95fab9bea2371f77a0c47fc4d0dc2908a6c37)]:
  - @tanstack/devtools@0.6.0

## 0.5.1

### Patch Changes

- Updated dependencies [[`544d7af`](https://github.com/TanStack/devtools/commit/544d7af30b163b52923dc678602645bb098b3009)]:
  - @tanstack/devtools@0.5.1

## 0.5.0

### Minor Changes

- removed CJS support, added detached mode to devtools ([#70](https://github.com/TanStack/devtools/pull/70))

### Patch Changes

- Updated dependencies [[`9feb9c3`](https://github.com/TanStack/devtools/commit/9feb9c33517bda2e515b00d423bedab2502c9981)]:
  - @tanstack/devtools@0.5.0

## 0.4.6

### Patch Changes

- Updated dependencies [[`206252b`](https://github.com/TanStack/devtools/commit/206252ba47ba8f9ad173bc7a2088bb96bfff0334)]:
  - @tanstack/devtools@0.4.5

## 0.4.5

### Patch Changes

- Updated dependencies [[`2efe23f`](https://github.com/TanStack/devtools/commit/2efe23f05f4b2be651de03d29f474be6ebfb0dc7)]:
  - @tanstack/devtools@0.4.4

## 0.4.4

### Patch Changes

- Updated dependencies [[`1ff5f18`](https://github.com/TanStack/devtools/commit/1ff5f18a49afb190b1457c938faeee71b078ddb6)]:
  - @tanstack/devtools@0.4.3

## 0.4.3

### Patch Changes

- Updated dependencies []:
  - @tanstack/devtools@0.4.2

## 0.4.2

### Patch Changes

- Updated dependencies []:
  - @tanstack/devtools@0.4.1

## 0.4.1

### Patch Changes

- exclude from production by default ([#45](https://github.com/TanStack/devtools/pull/45))

## 0.4.0

### Minor Changes

- Change the TanStackDevtools export ([#40](https://github.com/TanStack/devtools/pull/40))

### Patch Changes

- Updated dependencies [[`94731d3`](https://github.com/TanStack/devtools/commit/94731d397436d10d43d874f3aff5bf549db32e06)]:
  - @tanstack/devtools@0.4.0

## 0.3.1

### Patch Changes

- fix the height of the mounted container ([#38](https://github.com/TanStack/devtools/pull/38))

- Updated dependencies [[`4bbb4b8`](https://github.com/TanStack/devtools/commit/4bbb4b8715b89f7ad84fb137fdeebdf5a02569a3)]:
  - @tanstack/devtools@0.3.2

## 0.3.0

### Minor Changes

- Added json tree to devtools-ui and adjusted the width for the plugin renderers ([#29](https://github.com/TanStack/devtools/pull/29))

### Patch Changes

- Updated dependencies []:
  - @tanstack/devtools@0.3.1

## 0.2.2

### Patch Changes

- Updated dependencies [[`f9b97df`](https://github.com/TanStack/devtools/commit/f9b97dfbfdb3b6eccf51cba2655b8bd542f21bfa)]:
  - @tanstack/devtools@0.3.0

## 0.2.1

### Patch Changes

- Updated dependencies []:
  - @tanstack/devtools@0.2.1

## 0.2.0

### Minor Changes

- Added event bus functionality into @tanstack/devtools ([#11](https://github.com/TanStack/devtools/pull/11))
  - @tanstack/devtools now comes with an integrated Event Bus on the Client.
  - The Event Bus allows for seamless communication between different parts of your running application
    without tight coupling.
  - Exposed APIs for publishing and subscribing to events.
  - Added config for the client event bus

### Patch Changes

- Updated dependencies [[`77e2f6e`](https://github.com/TanStack/devtools/commit/77e2f6e8d3d5cc82b8d37fcc00c01078e9960003)]:
  - @tanstack/devtools@0.2.0

## 0.1.1

### Patch Changes

- Updated the JSdoc descriptions for easier usage ([#8](https://github.com/TanStack/devtools/pull/8))

- Updated dependencies [[`d7dc082`](https://github.com/TanStack/devtools/commit/d7dc08211dcaba9d226ad1963e812430530e6d35)]:
  - @tanstack/devtools@0.1.1

## 0.1.0

### Minor Changes

- Initial alpha release of @tanstack/devtools ([#6](https://github.com/TanStack/devtools/pull/6))

### Patch Changes

- Updated dependencies [[`d579c1b`](https://github.com/TanStack/devtools/commit/d579c1b01cdf9a9eac9bccb55e8e5ba7f6839485)]:
  - @tanstack/devtools@0.1.0


## Links discovered
- [[`6d3bdc0`](https://github.com/TanStack/devtools/commit/6d3bdc045637503e7ddfe5253ad5f2dbaa27f593)
- [[`d781f4f`](https://github.com/TanStack/devtools/commit/d781f4f7588619bd042ba647a6cfa139b1430f46)
- [[`096744e`](https://github.com/TanStack/devtools/commit/096744e918a8c76d656f3abb1728ad7390fe8b4b)
- [#228](https://github.com/TanStack/devtools/pull/228)
- [[`f02a894`](https://github.com/TanStack/devtools/commit/f02a8941e7f0f0cfe44ffb370391267261f31f4e)
- [`d524864`](https://github.com/TanStack/devtools/commit/d524864ce64f3fa0409f9f05e212b3ad07c661ee)
- [[`aa32c02`](https://github.com/TanStack/devtools/commit/aa32c0219a90abf350bd287f2ef0321b3a5012e8)
- [[`93ec7e9`](https://github.com/TanStack/devtools/commit/93ec7e91854d8e39e3f148f8d1ab966f464d2706)
- [#216](https://github.com/TanStack/devtools/pull/216)
- [[`0b4a4a9`](https://github.com/TanStack/devtools/commit/0b4a4a9e57f3be7079166198f3e69fedd15c5b5d)
- [[`b2f8944`](https://github.com/TanStack/devtools/commit/b2f8944ebf3597179d60ce11fb0ef71b4858dc34)
- [[`5362ab5`](https://github.com/TanStack/devtools/commit/5362ab51b8cb539b15d91435d106fb09703f388f)
- [[`748d2e9`](https://github.com/TanStack/devtools/commit/748d2e9cdbbc079442bab7bf6da85ed2767a833d)
- [[`a97ed26`](https://github.com/TanStack/devtools/commit/a97ed2685b43c25d34e5e30cc5f07254b3e810bf)
- [#150](https://github.com/TanStack/devtools/pull/150)
- [[`6b6aa45`](https://github.com/TanStack/devtools/commit/6b6aa45e10ba08cc9465d3c73c9b1454a9966170)
- [[`a18b77e`](https://github.com/TanStack/devtools/commit/a18b77e1017e814cc0393d2e4f44acd80abf99a6)
- [[`c463e10`](https://github.com/TanStack/devtools/commit/c463e1083771b8fce2ea30aa999aa36ea4040f7f)
- [#90](https://github.com/TanStack/devtools/pull/90)
- [[`c591da3`](https://github.com/TanStack/devtools/commit/c591da3a6e258d943f4c0d1b5b3f5cdd1111f37c)
- [[`784313b`](https://github.com/TanStack/devtools/commit/784313b8953184dcd65c008b0efabc2f5a532b27)
- [[`42d883d`](https://github.com/TanStack/devtools/commit/42d883dff07e622c4f1c16e9559bf00fcdd27572)
- [[`6447ab2`](https://github.com/TanStack/devtools/commit/6447ab20d6f479b9a71be2c727d70a441d09222b)
- [[`2fe02f9`](https://github.com/TanStack/devtools/commit/2fe02f906e6e9118c87efbb95508c8f030abfd5d)
- [`2fe02f9`](https://github.com/TanStack/devtools/commit/2fe02f906e6e9118c87efbb95508c8f030abfd5d)
- [[`4119f73`](https://github.com/TanStack/devtools/commit/4119f73caa27dcaae1fe7cbca20a11f18b4d99b8)
- [#96](https://github.com/TanStack/devtools/pull/96)
- [[`59ecdb6`](https://github.com/TanStack/devtools/commit/59ecdb663cb9410fabf507df684d767c1d4edf11)
- [[`442d2ce`](https://github.com/TanStack/devtools/commit/442d2ce1883b4517398e2890f4180b622765148d)
- [[`fc02e84`](https://github.com/TanStack/devtools/commit/fc02e849dd4a00e2e96d867d4c78dabac9989610)
- [[`a7c95fa`](https://github.com/TanStack/devtools/commit/a7c95fab9bea2371f77a0c47fc4d0dc2908a6c37)
- [[`544d7af`](https://github.com/TanStack/devtools/commit/544d7af30b163b52923dc678602645bb098b3009)
- [#70](https://github.com/TanStack/devtools/pull/70)
- [[`9feb9c3`](https://github.com/TanStack/devtools/commit/9feb9c33517bda2e515b00d423bedab2502c9981)
- [[`206252b`](https://github.com/TanStack/devtools/commit/206252ba47ba8f9ad173bc7a2088bb96bfff0334)
- [[`2efe23f`](https://github.com/TanStack/devtools/commit/2efe23f05f4b2be651de03d29f474be6ebfb0dc7)
- [[`1ff5f18`](https://github.com/TanStack/devtools/commit/1ff5f18a49afb190b1457c938faeee71b078ddb6)
- [#45](https://github.com/TanStack/devtools/pull/45)
- [#40](https://github.com/TanStack/devtools/pull/40)
- [[`94731d3`](https://github.com/TanStack/devtools/commit/94731d397436d10d43d874f3aff5bf549db32e06)
- [#38](https://github.com/TanStack/devtools/pull/38)
- [[`4bbb4b8`](https://github.com/TanStack/devtools/commit/4bbb4b8715b89f7ad84fb137fdeebdf5a02569a3)
- [#29](https://github.com/TanStack/devtools/pull/29)
- [[`f9b97df`](https://github.com/TanStack/devtools/commit/f9b97dfbfdb3b6eccf51cba2655b8bd542f21bfa)
- [#11](https://github.com/TanStack/devtools/pull/11)
- [[`77e2f6e`](https://github.com/TanStack/devtools/commit/77e2f6e8d3d5cc82b8d37fcc00c01078e9960003)
- [#8](https://github.com/TanStack/devtools/pull/8)
- [[`d7dc082`](https://github.com/TanStack/devtools/commit/d7dc08211dcaba9d226ad1963e812430530e6d35)
- [#6](https://github.com/TanStack/devtools/pull/6)
- [[`d579c1b`](https://github.com/TanStack/devtools/commit/d579c1b01cdf9a9eac9bccb55e8e5ba7f6839485)

--- .github/pull_request_template.md ---
## 🎯 Changes

<!-- What changes are made in this PR? Describe the change and its motivation. -->

## ✅ Checklist

- [ ] I have followed the steps in the [Contributing guide](https://github.com/TanStack/devtools/blob/main/CONTRIBUTING.md).
- [ ] I have tested this code locally with `pnpm test:pr`.

## 🚀 Release Impact

- [ ] This change affects published code, and I have generated a [changeset](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md).
- [ ] This change is docs/CI/dev-only (no release).


## Links discovered
- [Contributing guide](https://github.com/TanStack/devtools/blob/main/CONTRIBUTING.md)
- [changeset](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md)

--- CODE_OF_CONDUCT.md ---
---
title: Code of Conduct
id: code-of-conduct
---

# Contributor Covenant Code of Conduct

## Our Pledge

In the interest of fostering an open and welcoming environment, we as
contributors and maintainers pledge to making participation in our project and
our community a harassment-free experience for everyone, regardless of age, body
size, disability, ethnicity, sex characteristics, gender identity and expression,
level of experience, education, socio-economic status, nationality, personal
appearance, race, religion, or sexual identity and orientation.

## Our Standards

Examples of behavior that contributes to creating a positive environment
include:

- Using welcoming and inclusive language
- Being respectful of differing viewpoints and experiences
- Gracefully accepting constructive criticism
- Focusing on what is best for the community
- Showing empathy towards other community members

Examples of unacceptable behavior by participants include:

- The use of sexualized language or imagery and unwelcome sexual attention or
  advances
- Trolling, insulting/derogatory comments, and personal or political attacks
- Public or private harassment
- Publishing others' private information, such as a physical or electronic
  address, without explicit permission
- Other conduct which could reasonably be considered inappropriate in a
  professional setting

## Our Responsibilities

Project maintainers are responsible for clarifying the standards of acceptable
behavior and are expected to take appropriate and fair corrective action in
response to any instances of unacceptable behavior.

Project maintainers have the right and responsibility to remove, edit, or
reject comments, commits, code, wiki edits, issues, and other contributions
that are not aligned to this Code of Conduct, or to ban temporarily or
permanently any contributor for other behaviors that they deem inappropriate,
threatening, offensive, or harmful.

## Scope

This Code of Conduct applies both within project spaces and in public spaces
when an individual is representing the project or its community. Examples of
representing a project or community include using an official project e-mail
address, posting via an official social media account, or acting as an appointed
representative at an online or offline event. Representation of a project may be
further defined and clarified by project maintainers.

## Enforcement

Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported by contacting the project team at TANNERLINSLEY@GMAIL.COM. All
complaints will be reviewed and investigated and will result in a response that
is deemed necessary and appropriate to the circumstances. The project team is
obligated to maintain confidentiality with regard to the reporter of an incident.
Further details of specific enforcement policies may be posted separately.

Project maintainers who do not follow or enforce the Code of Conduct in good
faith may face temporary or permanent repercussions as determined by other
members of the project's leadership.

## Attribution

This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html

[homepage]: https://www.contributor-covenant.org

For answers to common questions about this code of conduct, see
https://www.contributor-covenant.org/faq


--- README.md ---
<div align="center">
  <img src="./media/header_devtools.png" >
</div>

<br />

<div align="center">
<a href="https://npmjs.com/package/@tanstack/devtools" target="\_parent">
  <img alt="" src="https://img.shields.io/npm/dm/@tanstack/react-devtools.svg" />
</a>
<a href="https://github.com/TanStack/devtools" target="\_parent">
	  <img alt="" src="https://img.shields.io/github/stars/TanStack/devtools.svg?style=social&label=Star" alt="GitHub stars" />
</a>
<a href="https://bundlephobia.com/result?p=@tanstack/react-devtools@latest" target="\_parent">
  <img alt="" src="https://badgen.net/bundlephobia/minzip/@tanstack/react-devtools@latest" />
</a>
</div>

<div align="center">
<a href="#badge">
  <img alt="semantic-release" src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg">
</a>
	<a href="#badge">
		<img src="https://img.shields.io/github/v/release/tanstack/devtools" alt="Release"/>
	</a>
<a href="https://twitter.com/tan_stack">
  <img src="https://img.shields.io/twitter/follow/tan_stack.svg?style=social" alt="Follow @TanStack"/>
</a>
</div>

<div align="center">
  
### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)
</div>

# TanStack Devtools

A debugging toolkit that provides a unified interface for inspecting, monitoring, and extending your applications.

- Inspect and debug state and behavior in real time
- Works with React, Solid, Vanilla JS, and more
- Extensible plugin architecture with customizable UI
- Seamless integration with TanStack Query, Router, and other libraries

### <a href="https://tanstack.com/devtools">Read the docs →</b></a>

## Get Involved

- We welcome issues and pull requests!
- Participate in [GitHub discussions](https://github.com/TanStack/devtools/discussions)
- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ)
- See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup instructions

## Partners

<table align="center">
  <tr>
    <td>
      <a href="https://www.coderabbit.ai/?via=tanstack&dub_id=aCcEEdAOqqutX6OS" >
        <picture>
          <source media="(prefers-color-scheme: dark)" srcset="https://tanstack.com/assets/coderabbit-dark-CMcuvjEy.svg" height="40" />
          <source media="(prefers-color-scheme: light)" srcset="https://tanstack.com/assets/coderabbit-light-DVMJ2jHi.svg" height="40" />
          <img src="https://tanstack.com/assets/coderabbit-light-DVMJ2jHi.svg" height="40" alt="CodeRabbit" />
        </picture>
      </a>
    </td>
    <td>
      <a href="https://www.cloudflare.com?utm_source=tanstack">
        <picture>
          <source media="(prefers-color-scheme: dark)" srcset="https://tanstack.com/assets/cloudflare-white-DQDB7UaL.svg" height="60" />
          <source media="(prefers-color-scheme: light)" srcset="https://tanstack.com/assets/cloudflare-black-CPufaW0B.svg" height="60" />
          <img src="https://tanstack.com/assets/cloudflare-black-CPufaW0B.svg" height="60" alt="Cloudflare" />
        </picture>
      </a>
    </td>
  </tr>
</table>

<div align="center">
<img src="./media/partner_logo.svg" alt="Devtools & you?" height="65">
<p>
We're looking for TanStack Devtools Partners to join our mission! Partner with us to push the boundaries of TanStack Devtools and build amazing things together.
</p>
<a href="mailto:partners@tanstack.com?subject=TanStack Devtools Partnership"><b>LET'S CHAT</b></a>
</div>

## Explore the TanStack Ecosystem

- <a href="https://github.com/tanstack/config"><b>TanStack Config</b></a> – Tooling for JS/TS packages
- <a href="https://github.com/tanstack/db"><b>TanStack DB</b></a> – Reactive sync client store
- <a href="https://github.com/tanstack/form"><b>TanStack Form</b></a> – Type‑safe form state
- <a href="https://github.com/tanstack/pacer"><b>TanStack Pacer</b></a> – Debouncing, throttling, batching
- <a href="https://github.com/tanstack/query"><b>TanStack Query</b></a> – Async state & caching
- <a href="https://github.com/tanstack/ranger"><b>TanStack Ranger</b></a> – Range & slider primitives
- <a href="https://github.com/tanstack/router"><b>TanStack Router</b></a> – Type‑safe routing, caching & URL state
- <a href="https://github.com/tanstack/router"><b>TanStack Start</b></a> – Full‑stack SSR & streaming
- <a href="https://github.com/tanstack/store"><b>TanStack Store</b></a> – Reactive data store
- <a href="https://github.com/tanstack/table"><b>TanStack Table</b></a> – Headless datagrids
- <a href="https://github.com/tanstack/virtual"><b>TanStack Virtual</b></a> – Virtualized rendering

… and more at <a href="https://tanstack.com"><b>TanStack.com »</b></a>

<!-- USE THE FORCE LUKE -->


## Links discovered
- [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)
- [GitHub discussions](https://github.com/TanStack/devtools/discussions)
- [Discord](https://discord.com/invite/WrRKjPJ)
- [CONTRIBUTING.md](https://github.com/tanstack/devtools/blob/main/CONTRIBUTING.md)
- [<img alt="" src="https://img.shields.io/npm/dm/@tanstack/react-devtools.svg" />](https://npmjs.com/package/@tanstack/devtools)
- [<img alt="" src="https://img.shields.io/github/stars/TanStack/devtools.svg?style=social&label=Star" alt="GitHub stars" />](https://github.com/TanStack/devtools)
- [<img alt="" src="https://badgen.net/bundlephobia/minzip/@tanstack/react-devtools@latest" />](https://bundlephobia.com/result?p=@tanstack/react-devtools@latest)
- [<img src="https://img.shields.io/twitter/follow/tan_stack.svg?style=social" alt="Follow @TanStack"/>](https://twitter.com/tan_stack)
- [Read the docs →</b>](https://tanstack.com/devtools)
- [<picture> <source media="(prefers-color-scheme: dark)" srcset="https://tanstack.com/assets/coderabbit-dark-CMcuvjEy.svg" height="40" /> <source media="(prefers-color-scheme: light)" srcset="https://tanstack.com/assets/coderabbit-light-DVMJ2jHi.svg" height="40" /> <img src="https://tanstack.com/assets/coderabbit-light-DVMJ2jHi.svg" height="40" alt="CodeRabbit" /> </picture>](https://www.coderabbit.ai/?via=tanstack&dub_id=aCcEEdAOqqutX6OS)
- [<picture> <source media="(prefers-color-scheme: dark)" srcset="https://tanstack.com/assets/cloudflare-white-DQDB7UaL.svg" height="60" /> <source media="(prefers-color-scheme: light)" srcset="https://tanstack.com/assets/cloudflare-black-CPufaW0B.svg" height="60" /> <img src="https://tanstack.com/assets/cloudflare-black-CPufaW0B.svg" height="60" alt="Cloudflare" /> </picture>](https://www.cloudflare.com?utm_source=tanstack)
- [<b>TanStack Config</b>](https://github.com/tanstack/config)
- [<b>TanStack DB</b>](https://github.com/tanstack/db)
- [<b>TanStack Form</b>](https://github.com/tanstack/form)
- [<b>TanStack Pacer</b>](https://github.com/tanstack/pacer)
- [<b>TanStack Query</b>](https://github.com/tanstack/query)
- [<b>TanStack Ranger</b>](https://github.com/tanstack/ranger)
- [<b>TanStack Router</b>](https://github.com/tanstack/router)
- [<b>TanStack Start</b>](https://github.com/tanstack/router)
- [<b>TanStack Store</b>](https://github.com/tanstack/store)
- [<b>TanStack Table</b>](https://github.com/tanstack/table)
- [<b>TanStack Virtual</b>](https://github.com/tanstack/virtual)
- [<b>TanStack.com »</b>](https://tanstack.com)

--- eslint.config.js ---
// @ts-check

// @ts-ignore Needed due to moduleResolution Node vs Bundler
import { tanstackConfig } from '@tanstack/eslint-config'
import unusedImports from 'eslint-plugin-unused-imports'

export default [
  ...tanstackConfig,
  {
    name: 'tanstack/temp',
    plugins: {
      'unused-imports': unusedImports,
    },
    rules: {
      'no-case-declarations': 'off',
      'no-shadow': 'off',
      'unused-imports/no-unused-imports': 'warn',
      'pnpm/enforce-catalog': 'off',
      'pnpm/json-enforce-catalog': 'off',
    },
  },
]


--- prettier.config.js ---
// @ts-check

/** @type {import('prettier').Config} */
const config = {
  semi: false,
  singleQuote: true,
  trailingComma: 'all',
  plugins: ['prettier-plugin-svelte'],
  overrides: [{ files: '*.svelte', options: { parser: 'svelte' } }],
}

export default config


--- scripts/verify-links.ts ---
import { existsSync, readFileSync, statSync } from 'node:fs'
import { extname, resolve } from 'node:path'
import { glob } from 'tinyglobby'
// @ts-ignore Could not find a declaration file for module 'markdown-link-extractor'.
import markdownLinkExtractor from 'markdown-link-extractor'

const errors: Array<{
  file: string
  link: string
  resolvedPath: string
  reason: string
}> = []

function isRelativeLink(link: string) {
  return (
    !link.startsWith('/') &&
    !link.startsWith('http://') &&
    !link.startsWith('https://') &&
    !link.startsWith('//') &&
    !link.startsWith('#') &&
    !link.startsWith('mailto:')
  )
}

/** Remove any trailing .md */
function stripExtension(p: string): string {
  return p.replace(`${extname(p)}`, '')
}

function relativeLinkExists(link: string, file: string): boolean {
  // Remove hash if present
  const linkWithoutHash = link.split('#')[0]
  // If the link is empty after removing hash, it's not a file
  if (!linkWithoutHash) return false

  // Strip the file/link extensions
  const filePath = stripExtension(file)
  const linkPath = stripExtension(linkWithoutHash)

  // Resolve the path relative to the markdown file's directory
  // Nav up a level to simulate how links are resolved on the web
  let absPath = resolve(filePath, '..', linkPath)

  // Ensure the resolved path is within /docs
  const docsRoot = resolve('docs')
  if (!absPath.startsWith(docsRoot)) {
    errors.push({
      link,
      file,
      resolvedPath: absPath,
      reason: 'Path outside /docs',
    })
    return false
  }

  // Check if this is an example path
  const isExample = absPath.includes('/examples/')

  let exists = false

  if (isExample) {
    // Transform /docs/framework/{framework}/examples/ to /examples/{framework}/
    absPath = absPath.replace(
      /\/docs\/framework\/([^/]+)\/examples\//,
      '/examples/$1/',
    )
    // For examples, we want to check if the directory exists
    exists = existsSync(absPath) && statSync(absPath).isDirectory()
  } else {
    // For non-examples, we want to check if the .md file exists
    if (!absPath.endsWith('.md')) {
      absPath = `${absPath}.md`
    }
    exists = existsSync(absPath)
  }

  if (!exists) {
    errors.push({
      link,
      file,
      resolvedPath: absPath,
      reason: 'Not found',
    })
  }
  return exists
}

async function verifyMarkdownLinks() {
  // Find all markdown files in docs directory
  const markdownFiles = await glob('docs/**/*.md', {
    ignore: ['**/node_modules/**'],
  })

  console.log(`Found ${markdownFiles.length} markdown files\n`)

  // Process each file
  for (const file of markdownFiles) {
    const content = readFileSync(file, 'utf-8')
    const links: Array<string> = markdownLinkExtractor(content)

    const relativeLinks = links.filter((link: string) => {
      return isRelativeLink(link)
    })

    if (relativeLinks.length > 0) {
      relativeLinks.forEach((link) => {
        relativeLinkExists(link, file)
      })
    }
  }

  if (errors.length > 0) {
    console.log(`\n❌ Found ${errors.length} broken links:`)
    errors.forEach((err) => {
      console.log(
        `${err.file}\n  link:      ${err.link}\n  resolved:  ${err.resolvedPath}\n  why:       ${err.reason}\n`,
      )
    })
    process.exit(1)
  } else {
    console.log('\n✅ No broken links found!')
  }
}

verifyMarkdownLinks().catch(console.error)


--- vitest.workspace.js ---
import { defineWorkspace } from 'vitest/config'

export default defineWorkspace([
  './packages/devtools/vite.config.ts',
  './packages/react-devtools/vite.config.ts',
  './packages/preact-devtools/vite.config.ts',
  './packages/solid-devtools/vite.config.ts',
])


--- packages/devtools-client/README.md ---
# @tanstack/devtools-utils

This package is still under active development and might have breaking changes in the future. Please use it with caution.


--- packages/devtools-ui/README.md ---
# @tanstack/devtools-ui

Set of Solid.js UI components for TanStack Devtools.

These are used across the TanStack ecosystem to provide a consistent and customizable user interface for your devtools.


--- packages/devtools-utils/README.md ---
# @tanstack/devtools-utils

This package is still under active development and might have breaking changes in the future. Please use it with caution.


--- packages/devtools-vite/README.md ---
# @tanstack/devtools-vite

This package is still under active development and might have breaking changes in the future. Please use it with caution.

## General Usage

The `@tanstack/devtools-vite` package is designed to work with Vite projects.
Plug it into your plugins array:

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

export default {
  plugins: [
    // Important to include it first!
    devtools(),
    ... //rest of the plugins
  ],
}
```


--- packages/devtools/README.md ---
# @tanstack/devtools

This package is still under active development and might have breaking changes in the future. Please use it with caution.

## General Usage

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

const devtools = new TanStackDevtoolsCore({
  options: {
    // your options here
  },
  plugins: [
    // your plugins here
  ],
})

devtools.mount(document.getElementById('your-devtools-container')!)
```

## Creating plugins

In order to create a plugin for TanStack Devtools, you can use the `plugins` arg of the `TanStackDevtoolsCore` class. Here's an example of how to create a simple plugin:

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

const devtools = new TanStackDevtoolsCore({
  config: {
    // your config here
  },
  plugins: [
    {
      id: 'my-plugin',
      name: 'My Plugin',
      render: (el) => (el.innerHTML = '<div>My Plugin Content</div>'),
    },
  ],
})
```


--- packages/event-bus-client/README.md ---
# @tanstack/devtools-event-client

This package is still under active development and might have breaking changes in the future. Please use it with caution.

## General Usage

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

interface EventMap {
  'query-devtools:a': { foo: string }
  'query-devtools:b': { foo: number }
}

class QueryDevtoolsPlugin extends EventClient<EventMap> {
  constructor() {
    super({
      pluginId: 'query-devtools',
    })
  }
}

export const queryPlugin = new QueryDevtoolsPlugin()

// I'm fully typed here
plugin.emit('a', {
  foo: 'bar',
})
plugin.on('b', (e) => {
  // I'm fully typed here
  e.payload.foo
})
```

## Understanding the implementation

The `EventClient` class is a base class for creating plugins that can subscribe to events in the TanStack Devtools event bus. It allows you to define a set of events and their corresponding data schemas using a standard-schema based schemas.

It will work on both the client/server side and all you have to worry about is emitting/listening to events.


--- packages/event-bus/README.md ---
# @tanstack/devtools-event-bus

This package is still under active development and might have breaking changes in the future. Please use it with caution.

## General Usage

### Server Event Bus

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

devtoolsServer.start()

export { devtoolsServer }
```

### Client Event Bus

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

devtoolsClient.start()

export { devtoolsClient }
```

## Plugins

Check out @tanstack/devtools-event-client for more information on how to create plugins for the event bus.


--- packages/preact-devtools/README.md ---
# @tanstack/preact-devtools

This package is still under active development and might have breaking changes in the future. Please use it with caution.

## Usage

```tsx
import { TanStackDevtools } from '@tanstack/preact-devtools'
import { PreactQueryDevtoolsPanel } from '@tanstack/preact-query-devtools'
import { TanStackRouterDevtoolsPanel } from '@tanstack/preact-router-devtools'
import { QueryClient, QueryClientProvider } from '@tanstack/preact-query'
const queryClient = new QueryClient()
function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <h1>My App</h1>
      <TanStackDevtools
        plugins={[
          {
            name: 'TanStack Query',
            render: <PreactQueryDevtoolsPanel />,
          },
          {
            name: 'TanStack Router',
            render: <TanStackRouterDevtoolsPanel router={router} />,
          },
        ]}
      />
    </QueryClientProvider>
  )
}
```

## Creating plugins

In order to create a plugin for TanStack Devtools, you can use the `plugins` prop of the `TanStackDevtools` component. Here's an example of how to create a simple plugin:

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

function App() {
  return (
    <div>
      <h1>My App</h1>
      <TanStackDevtools
        plugins={[
          {
            id: 'your-plugin-id',
            name: 'Your Plugin',
            render: <CustomPluginComponent />,
          },
        ]}
      />
    </div>
  )
}
```


--- packages/react-devtools/README.md ---
# @tanstack/react-devtools

This package is still under active development and might have breaking changes in the future. Please use it with caution.

## Usage

```tsx
import { TanStackDevtools } from '@tanstack/react-devtools'
import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
const queryClient = new QueryClient()
function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <h1>My App</h1>
      <TanStackDevtools
        plugins={[
          {
            name: 'TanStack Query',
            render: <ReactQueryDevtoolsPanel />,
          },
          {
            name: 'TanStack Router',
            render: <TanStackRouterDevtoolsPanel router={router} />,
          },
        ]}
      />
    </QueryClientProvider>
  )
}
```

## Creating plugins

In order to create a plugin for TanStack Devtools, you can use the `plugins` prop of the `TanStackDevtools` component. Here's an example of how to create a simple plugin:

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

function App() {
  return (
    <div>
      <h1>My App</h1>
      <TanStackDevtools
        plugins={[
          {
            id: 'your-plugin-id',
            name: 'Your Plugin',
            render: <CustomPluginComponent />,
          },
        ]}
      />
    </div>
  )
}
```


--- packages/solid-devtools/README.md ---
# @tanstack/solid-devtools

This package is still under active development and might have breaking changes in the future. Please use it with caution.

## Usage

```tsx
import { TanStackDevtools } from '@tanstack/solid-devtools'
import { TanStackRouterDevtoolsPanel } from '@tanstack/solid-router-devtools'

function App() {
  return (
    <div>
      <h1>My App</h1>
      <TanStackDevtools
        plugins={[
          {
            name: 'TanStack Router',
            render: <TanStackRouterDevtoolsPanel router={router} />,
          },
        ]}
      />
    </div>
  )
}
```

## Creating plugins

In order to create a plugin for TanStack Devtools, you can use the `plugins` prop of the `TanStackDevtools` component. Here's an example of how to create a simple plugin:

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

function App() {
  return (
    <div>
      <h1>My App</h1>
      <TanStackDevtools
        plugins={[
          {
            id: 'your-plugin-id',
            name: 'Your Plugin',
            render: <CustomPluginComponent />,
          },
        ]}
      />
    </div>
  )
}
```
