From ea1bd5c7e26dc2510bccb0157253859fdb7fa8ca Mon Sep 17 00:00:00 2001
From: Alem Tuzlak <t.zlak@hotmail.com>
Date: Thu, 18 Sep 2025 11:15:22 +0200
Subject: [PATCH 1/5] feat: remove devtools from build bundles

---
 .changeset/nice-loops-decide.md               |   5 +
 examples/react/basic/vite.config.ts           |   4 +-
 .../{tests => src}/inject-source.test.ts      |   2 +-
 packages/devtools-vite/src/plugin.ts          |  25 ++
 .../devtools-vite/src/remove-devtools.test.ts | 230 ++++++++++++++++++
 packages/devtools-vite/src/remove-devtools.ts |  70 ++++++
 6 files changed, 334 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/nice-loops-decide.md
 rename packages/devtools-vite/{tests => src}/inject-source.test.ts (99%)
 create mode 100644 packages/devtools-vite/src/remove-devtools.test.ts
 create mode 100644 packages/devtools-vite/src/remove-devtools.ts

diff --git a/.changeset/nice-loops-decide.md b/.changeset/nice-loops-decide.md
new file mode 100644
index 00000000..5881d9fa
--- /dev/null
+++ b/.changeset/nice-loops-decide.md
@@ -0,0 +1,5 @@
+---
+'@tanstack/devtools-vite': minor
+---
+
+Allow the vite plugin to remove the devtools completely from the build output bundle for 0 production footprint
diff --git a/examples/react/basic/vite.config.ts b/examples/react/basic/vite.config.ts
index ff6cabe2..9eb5bf61 100644
--- a/examples/react/basic/vite.config.ts
+++ b/examples/react/basic/vite.config.ts
@@ -6,7 +6,9 @@ import Inspect from 'vite-plugin-inspect'
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [
-    devtools(),
+    devtools({
+      removeDevtoolsOnBuild: true
+    }),
     Inspect(),
     react({
       // babel: {
diff --git a/packages/devtools-vite/tests/inject-source.test.ts b/packages/devtools-vite/src/inject-source.test.ts
similarity index 99%
rename from packages/devtools-vite/tests/inject-source.test.ts
rename to packages/devtools-vite/src/inject-source.test.ts
index edc0fb52..b145f799 100644
--- a/packages/devtools-vite/tests/inject-source.test.ts
+++ b/packages/devtools-vite/src/inject-source.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { addSourceToJsx } from '../src/inject-source'
+import { addSourceToJsx } from './inject-source'
 
 const removeEmptySpace = (str: string) => {
   return str.replace(/\s/g, '').trim()
diff --git a/packages/devtools-vite/src/plugin.ts b/packages/devtools-vite/src/plugin.ts
index dfe2669a..976305c7 100644
--- a/packages/devtools-vite/src/plugin.ts
+++ b/packages/devtools-vite/src/plugin.ts
@@ -3,6 +3,7 @@ import chalk from 'chalk'
 import { ServerEventBus } from '@tanstack/devtools-event-bus/server'
 import { handleDevToolsViteRequest } from './utils'
 import { DEFAULT_EDITOR_CONFIG, handleOpenSource } from './editor'
+import { removeDevtools } from './remove-devtools'
 import { addSourceToJsx } from './inject-source'
 import type { EditorConfig } from './editor'
 import type { ServerEventBusConfig } from '@tanstack/devtools-event-bus/server'
@@ -27,6 +28,11 @@ export type TanStackDevtoolsViteConfig = {
      */
     enabled: boolean
   }
+  /**
+   * Whether to remove devtools from the production build.
+   * @default true
+   */
+  removeDevtoolsOnBuild?: boolean
   /**
    * Configuration for source injection.
    */
@@ -46,6 +52,7 @@ export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
   let port = 5173
   const enhancedLogsConfig = args?.enhancedLogs ?? { enabled: true }
   const injectSourceConfig = args?.injectSource ?? { enabled: true }
+  const removeDevtoolsOnBuild = args?.removeDevtoolsOnBuild ?? true
   const bus = new ServerEventBus(args?.eventBusConfig)
 
   return [
@@ -116,6 +123,24 @@ export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
         )
       },
     },
+    {
+      name: '@tanstack/devtools:remove-devtools-on-build',
+      apply(_, { command }) {
+        return command === 'build' && removeDevtoolsOnBuild
+      },
+      enforce: "pre",
+      transform(code, id) {
+        if (
+          id.includes('node_modules') ||
+          id.includes('?raw') ||
+          id.includes('dist') ||
+          id.includes('build')
+        )
+          return code
+
+        return removeDevtools(code, id)
+      },
+    },
     {
       name: '@tanstack/devtools:better-console-logs',
       enforce: 'pre',
diff --git a/packages/devtools-vite/src/remove-devtools.test.ts b/packages/devtools-vite/src/remove-devtools.test.ts
new file mode 100644
index 00000000..cfb7cd92
--- /dev/null
+++ b/packages/devtools-vite/src/remove-devtools.test.ts
@@ -0,0 +1,230 @@
+import { describe, expect, test } from "vitest";
+import { removeDevtools } from "./remove-devtools";
+
+const removeEmptySpace = (str: string) => {
+  return str.replace(/\s/g, '').trim()
+}
+
+describe("remove-devtools", () => {
+  test("it removes devtools if Imported directly", () => {
+    const output = removeEmptySpace(
+      removeDevtools(
+        `
+      import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
+import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
+import {
+  Link,
+  Outlet,
+  RouterProvider,
+  createRootRoute,
+  createRoute,
+  createRouter,
+} from '@tanstack/react-router'
+import { TanStackDevtools } from '@tanstack/react-devtools'
+ 
+
+ 
+export default function DevtoolsExample() {
+  return (
+    <>
+      <TanStackDevtools
+        eventBusConfig={{
+          connectToServerBus: true,
+        }}
+        plugins={[
+          {
+            name: 'TanStack Query',
+            render: <ReactQueryDevtoolsPanel />,
+          },
+          {
+            name: 'TanStack Router',
+            render: <TanStackRouterDevtoolsPanel router={router} />,
+          },
+          /* {
+            name: "The actual app",
+            render: <iframe style={{ width: '100%', height: '100%' }} src="http://localhost:3005" />,
+          } */
+        ]}
+      />
+      <RouterProvider router={router} />
+    </>
+  )
+}
+
+        `,
+        'test.jsx',
+      ).code,
+    )
+    expect(output).toBe(
+      removeEmptySpace(`
+           import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools';
+           import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools';
+           import {
+            Link,
+            Outlet,
+            RouterProvider,
+            createRootRoute,
+            createRoute,
+            createRouter
+          } from '@tanstack/react-router';  
+
+          
+          export default function DevtoolsExample() {
+            return  <> 
+                <RouterProvider router={router} />
+              </>;
+            
+          }
+
+        `),
+    )
+  });
+
+  test("it removes devtools if Imported and renamed with 'as' ", () => {
+    const output = removeEmptySpace(
+      removeDevtools(
+        `
+      import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
+import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
+import {
+  Link,
+  Outlet,
+  RouterProvider,
+  createRootRoute,
+  createRoute,
+  createRouter,
+} from '@tanstack/react-router'
+import { TanStackDevtools as Devtools } from '@tanstack/react-devtools'
+ 
+
+ 
+export default function DevtoolsExample() {
+  return (
+    <>
+      <Devtools
+        eventBusConfig={{
+          connectToServerBus: true,
+        }}
+        plugins={[
+          {
+            name: 'TanStack Query',
+            render: <ReactQueryDevtoolsPanel />,
+          },
+          {
+            name: 'TanStack Router',
+            render: <TanStackRouterDevtoolsPanel router={router} />,
+          },
+          /* {
+            name: "The actual app",
+            render: <iframe style={{ width: '100%', height: '100%' }} src="http://localhost:3005" />,
+          } */
+        ]}
+      />
+      <RouterProvider router={router} />
+    </>
+  )
+}
+
+        `,
+        'test.jsx',
+      ).code,
+    )
+    expect(output).toBe(
+      removeEmptySpace(`
+           import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools';
+           import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools';
+           import {
+            Link,
+            Outlet,
+            RouterProvider,
+            createRootRoute,
+            createRoute,
+            createRouter
+          } from '@tanstack/react-router';  
+
+          
+          export default function DevtoolsExample() {
+            return  <> 
+                <RouterProvider router={router} />
+              </>;
+            
+          }
+
+        `),
+    )
+  });
+
+  test("it removes devtools if Imported as * then used as a subcomponent ", () => {
+    const output = removeEmptySpace(
+      removeDevtools(
+        `
+      import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
+import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
+import {
+  Link,
+  Outlet,
+  RouterProvider,
+  createRootRoute,
+  createRoute,
+  createRouter,
+} from '@tanstack/react-router'
+import * as Tools from '@tanstack/react-devtools'
+ 
+
+ 
+export default function DevtoolsExample() {
+  return (
+    <>
+      <Tools.TanStackDevtools
+        eventBusConfig={{
+          connectToServerBus: true,
+        }}
+        plugins={[
+          {
+            name: 'TanStack Query',
+            render: <ReactQueryDevtoolsPanel />,
+          },
+          {
+            name: 'TanStack Router',
+            render: <TanStackRouterDevtoolsPanel router={router} />,
+          },
+          /* {
+            name: "The actual app",
+            render: <iframe style={{ width: '100%', height: '100%' }} src="http://localhost:3005" />,
+          } */
+        ]}
+      />
+      <RouterProvider router={router} />
+    </>
+  )
+}
+
+        `,
+        'test.jsx',
+      ).code,
+    )
+    expect(output).toBe(
+      removeEmptySpace(`
+           import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools';
+           import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools';
+           import {
+            Link,
+            Outlet,
+            RouterProvider,
+            createRootRoute,
+            createRoute,
+            createRouter
+          } from '@tanstack/react-router';  
+
+          
+          export default function DevtoolsExample() {
+            return  <> 
+                <RouterProvider router={router} />
+              </>;
+            
+          }
+
+        `),
+    )
+  });
+})
\ No newline at end of file
diff --git a/packages/devtools-vite/src/remove-devtools.ts b/packages/devtools-vite/src/remove-devtools.ts
new file mode 100644
index 00000000..49266156
--- /dev/null
+++ b/packages/devtools-vite/src/remove-devtools.ts
@@ -0,0 +1,70 @@
+
+import { gen, parse, trav } from './babel'
+import type { t } from './babel';
+import type { types as Babel, } from '@babel/core'
+import type { ParseResult } from '@babel/parser'
+
+const isTanStackDevtoolsImport = (source: string) =>
+  source === '@tanstack/react-devtools' || source === "@tanstack/devtools" || source === "@tanstack/solid-devtools"
+
+const getImportedNames = (importDecl: t.ImportDeclaration) => {
+  return importDecl.specifiers.map((spec) => spec.local.name)
+}
+
+const transform = (ast: ParseResult<Babel.File>,) => {
+  let didTransform = false
+  const devtoolsComponentNames = new Set()
+
+  trav(ast, {
+    ImportDeclaration(path) {
+      const importSource = path.node.source.value
+      if (isTanStackDevtoolsImport(importSource)) {
+        getImportedNames(path.node).forEach((name) => devtoolsComponentNames.add(name))
+        path.remove()
+        didTransform = true
+      }
+    },
+    JSXElement(path) {
+      const opening = path.node.openingElement
+      if (
+        opening.name.type === 'JSXIdentifier' &&
+        devtoolsComponentNames.has(opening.name.name)
+      ) {
+        path.remove()
+        didTransform = true
+      }
+
+      if (opening.name.type === 'JSXMemberExpression' &&
+        opening.name.object.type === 'JSXIdentifier' &&
+        devtoolsComponentNames.has(opening.name.object.name)
+      ) {
+        path.remove()
+        didTransform = true
+      }
+    }
+  })
+
+  return didTransform
+}
+
+export function removeDevtools(code: string, id: string) {
+  const [filePath] = id.split('?')
+
+  try {
+    const ast = parse(code, {
+      sourceType: 'module',
+      plugins: ['jsx', 'typescript'],
+    })
+    const didTransform = transform(ast,)
+    if (!didTransform) {
+      return { code }
+    }
+    return gen(ast, {
+      sourceMaps: true,
+      filename: id,
+      sourceFileName: filePath,
+    })
+  } catch (e) {
+    return { code }
+  }
+}

From 9c396eea0bb69b56a63575c0cdfe1b6e541d1503 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Thu, 18 Sep 2025 09:17:09 +0000
Subject: [PATCH 2/5] ci: apply automated fixes

---
 examples/react/basic/vite.config.ts           |  2 +-
 packages/devtools-vite/src/plugin.ts          |  2 +-
 .../devtools-vite/src/remove-devtools.test.ts | 18 +++++++--------
 packages/devtools-vite/src/remove-devtools.ts | 22 +++++++++++--------
 4 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/examples/react/basic/vite.config.ts b/examples/react/basic/vite.config.ts
index 9eb5bf61..5ea9c49a 100644
--- a/examples/react/basic/vite.config.ts
+++ b/examples/react/basic/vite.config.ts
@@ -7,7 +7,7 @@ import Inspect from 'vite-plugin-inspect'
 export default defineConfig({
   plugins: [
     devtools({
-      removeDevtoolsOnBuild: true
+      removeDevtoolsOnBuild: true,
     }),
     Inspect(),
     react({
diff --git a/packages/devtools-vite/src/plugin.ts b/packages/devtools-vite/src/plugin.ts
index 976305c7..7f08110d 100644
--- a/packages/devtools-vite/src/plugin.ts
+++ b/packages/devtools-vite/src/plugin.ts
@@ -128,7 +128,7 @@ export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
       apply(_, { command }) {
         return command === 'build' && removeDevtoolsOnBuild
       },
-      enforce: "pre",
+      enforce: 'pre',
       transform(code, id) {
         if (
           id.includes('node_modules') ||
diff --git a/packages/devtools-vite/src/remove-devtools.test.ts b/packages/devtools-vite/src/remove-devtools.test.ts
index cfb7cd92..474b3698 100644
--- a/packages/devtools-vite/src/remove-devtools.test.ts
+++ b/packages/devtools-vite/src/remove-devtools.test.ts
@@ -1,12 +1,12 @@
-import { describe, expect, test } from "vitest";
-import { removeDevtools } from "./remove-devtools";
+import { describe, expect, test } from 'vitest'
+import { removeDevtools } from './remove-devtools'
 
 const removeEmptySpace = (str: string) => {
   return str.replace(/\s/g, '').trim()
 }
 
-describe("remove-devtools", () => {
-  test("it removes devtools if Imported directly", () => {
+describe('remove-devtools', () => {
+  test('it removes devtools if Imported directly', () => {
     const output = removeEmptySpace(
       removeDevtools(
         `
@@ -78,7 +78,7 @@ export default function DevtoolsExample() {
 
         `),
     )
-  });
+  })
 
   test("it removes devtools if Imported and renamed with 'as' ", () => {
     const output = removeEmptySpace(
@@ -152,9 +152,9 @@ export default function DevtoolsExample() {
 
         `),
     )
-  });
+  })
 
-  test("it removes devtools if Imported as * then used as a subcomponent ", () => {
+  test('it removes devtools if Imported as * then used as a subcomponent ', () => {
     const output = removeEmptySpace(
       removeDevtools(
         `
@@ -226,5 +226,5 @@ export default function DevtoolsExample() {
 
         `),
     )
-  });
-})
\ No newline at end of file
+  })
+})
diff --git a/packages/devtools-vite/src/remove-devtools.ts b/packages/devtools-vite/src/remove-devtools.ts
index 49266156..4efae6da 100644
--- a/packages/devtools-vite/src/remove-devtools.ts
+++ b/packages/devtools-vite/src/remove-devtools.ts
@@ -1,17 +1,18 @@
-
 import { gen, parse, trav } from './babel'
-import type { t } from './babel';
-import type { types as Babel, } from '@babel/core'
+import type { t } from './babel'
+import type { types as Babel } from '@babel/core'
 import type { ParseResult } from '@babel/parser'
 
 const isTanStackDevtoolsImport = (source: string) =>
-  source === '@tanstack/react-devtools' || source === "@tanstack/devtools" || source === "@tanstack/solid-devtools"
+  source === '@tanstack/react-devtools' ||
+  source === '@tanstack/devtools' ||
+  source === '@tanstack/solid-devtools'
 
 const getImportedNames = (importDecl: t.ImportDeclaration) => {
   return importDecl.specifiers.map((spec) => spec.local.name)
 }
 
-const transform = (ast: ParseResult<Babel.File>,) => {
+const transform = (ast: ParseResult<Babel.File>) => {
   let didTransform = false
   const devtoolsComponentNames = new Set()
 
@@ -19,7 +20,9 @@ const transform = (ast: ParseResult<Babel.File>,) => {
     ImportDeclaration(path) {
       const importSource = path.node.source.value
       if (isTanStackDevtoolsImport(importSource)) {
-        getImportedNames(path.node).forEach((name) => devtoolsComponentNames.add(name))
+        getImportedNames(path.node).forEach((name) =>
+          devtoolsComponentNames.add(name),
+        )
         path.remove()
         didTransform = true
       }
@@ -34,14 +37,15 @@ const transform = (ast: ParseResult<Babel.File>,) => {
         didTransform = true
       }
 
-      if (opening.name.type === 'JSXMemberExpression' &&
+      if (
+        opening.name.type === 'JSXMemberExpression' &&
         opening.name.object.type === 'JSXIdentifier' &&
         devtoolsComponentNames.has(opening.name.object.name)
       ) {
         path.remove()
         didTransform = true
       }
-    }
+    },
   })
 
   return didTransform
@@ -55,7 +59,7 @@ export function removeDevtools(code: string, id: string) {
       sourceType: 'module',
       plugins: ['jsx', 'typescript'],
     })
-    const didTransform = transform(ast,)
+    const didTransform = transform(ast)
     if (!didTransform) {
       return { code }
     }

From 5e4968eff564c5e70991c5fdf485c5d3a334a416 Mon Sep 17 00:00:00 2001
From: Alem Tuzlak <t.zlak@hotmail.com>
Date: Thu, 18 Sep 2025 11:30:32 +0200
Subject: [PATCH 3/5] update docs

---
 docs/config.json     |  6 ++++-
 docs/installation.md | 24 +++++++++++++++++---
 docs/production.md   | 53 ++++++++++++++++++++++++++++++++++++++++++++
 docs/vite-plugin.md  | 16 +++++++++++++
 4 files changed, 95 insertions(+), 4 deletions(-)
 create mode 100644 docs/production.md

diff --git a/docs/config.json b/docs/config.json
index cba5cea6..0933140e 100644
--- a/docs/config.json
+++ b/docs/config.json
@@ -28,6 +28,10 @@
         {
           "label": "Vite plugin",
           "to": "vite-plugin"
+        },
+        {
+          "label": "Production",
+          "to": "production"
         }
       ],
       "frameworks": [
@@ -140,4 +144,4 @@
       ]
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/docs/installation.md b/docs/installation.md
index 19ff5b44..154c6597 100644
--- a/docs/installation.md
+++ b/docs/installation.md
@@ -10,7 +10,7 @@ Only install one of the following packages depending on your use case:
 ## React
 
 ```sh
-npm install @tanstack/react-devtools
+npm install -D @tanstack/react-devtools
 npm install -D @tanstack/devtools-vite
 ```
 
@@ -19,7 +19,7 @@ TanStack Devtools is compatible with React v16.8+
 ## Solid
 
 ```sh
-npm install @tanstack/solid-devtools
+npm install -D @tanstack/solid-devtools
 npm install -D @tanstack/devtools-vite
 ```
 
@@ -28,7 +28,25 @@ TanStack Devtools is compatible with Solid v1.9.5+
 ## Vanilla JS
 
 ```sh
-npm install @tanstack/devtools
+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
+```
+
+And then import from the `/production` subpath:
+
+```ts
+import { TanStackDevtools } from '@tanstack/devtools/production'
+```
+
+Read more about using the devtools in production in our [Production docs](https://tanstack.com/devtools/latest/docs/production).
\ No newline at end of file
diff --git a/docs/production.md b/docs/production.md
new file mode 100644
index 00000000..aa0ca1d4
--- /dev/null
+++ b/docs/production.md
@@ -0,0 +1,53 @@
+---
+title: Production
+id: production
+---
+
+> [!IMPORTANT] This document and the underlying implementation is actively being worked on internally and may be incomplete or inaccurate and is highly likely to change! 
+
+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.
+
+## Production Exports
+
+Every package under the `devtools` umbrella should provide a `/production` sub-export that will
+allow you to use the devtools in production builds. The normal root export will always be stripped out of production builds by default.
+
+```ts
+// This will be included in production builds
+import { TanStackDevtools } from '@tanstack/react-devtools/production'
+// This will be replaced by a function that returns null in production builds 
+import { TanStackDevtools } from '@tanstack/react-devtools'
+```
+
+This is subject to change and might be offloaded to the Vite plugin in the future as we continue to build out the production story and close in on the best DX and the v1 release.
+
+## 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 in your production build, but keep in mind, you still need the `/production` sub-export to actually get the production version of the 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.
+
+## 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.
\ No newline at end of file
diff --git a/docs/vite-plugin.md b/docs/vite-plugin.md
index cc248e27..75d22bd2 100644
--- a/docs/vite-plugin.md
+++ b/docs/vite-plugin.md
@@ -118,6 +118,22 @@ export default {
 }
 ```
 
+### 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
+  ],
+}
+```
+
 ### injectSource 
 
 Configuration for source injection. Defaults to enabled.

From 686aa5b2c755e543cd1919eb4639e6d1f9d6c55e Mon Sep 17 00:00:00 2001
From: Alem Tuzlak <t.zlak@hotmail.com>
Date: Thu, 18 Sep 2025 11:41:24 +0200
Subject: [PATCH 4/5] update readme

---
 README.md | 23 +++++++++++++++++------
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index b9d15c4e..b27a7a3f 100644
--- a/README.md
+++ b/README.md
@@ -7,10 +7,10 @@ Coming soon...
 <a href="https://twitter.com/intent/tweet?button_hashtag=TanStack" target="\_parent">
   <img alt="#TanStack" src="https://img.shields.io/twitter/url?color=%2308a0e9&label=%23TanStack&style=social&url=https%3A%2F%2Ftwitter.com%2Fintent%2Ftweet%3Fbutton_hashtag%3DTanStack" />
 </a>
-<a href="https://github.com/tanstack/devtools/actions?devtools=workflow%3A%22react-devtools+tests%22">
+<!-- <a href="https://github.com/tanstack/devtools/actions?devtools=workflow%3A%22react-devtools+tests%22">
   <img src="https://github.com/tanstack/devtools/workflows/react-devtools%20tests/badge.svg" />
-</a>
-<a href="https://npmjs.com/package/@tanstack/react-devtools" target="\_parent">
+</a> -->
+<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://bundlephobia.com/result?p=@tanstack/react-devtools@latest" target="\_parent">
@@ -48,15 +48,26 @@ Try other [TanStack](https://tanstack.com) libraries:
 
 You may know **TanSack Devtools** by our adapter names, too!
 
-- [**React Devtools**](https://tanstack.com/devtools/latest/docs/framework/react/react-devtools)
+- [**React Devtools**](https://tanstack.com/devtools/latest/docs/framework/react/basic-setup)
+- [**Solid Devtools**](https://tanstack.com/devtools/latest/docs/framework/solid/basic-setup)
 
 ## Summary
 
-Coming soon...
+TanStack Devtools is a powerful set of tools designed to help developers inspect and debug applications built with various frameworks, including React, Solid, and Vanilla JS. It provides a unified interface to monitor application state, track changes, and identify issues in real-time.
+
+It is built with a plugin architecture, allowing for easy extension and customization. The devtools vite plugin can be integrated into your application, which enhances the development experience by providing better console logs, a server event bus, and improved debugging capabilities.
 
 ## Quick Features
 
-Coming soon...
+- Inspect and debug your application's state and behavior in real-time
+- Support for multiple frameworks (React, Solid, Vanilla JS, etc.)
+- Plugin architecture to extend functionality
+- Production mode support with tree-shaking to remove devtools code
+- Customizable UI
+- Event bus for communication between the devtools and your application
+- Go-to-source functionality for easy debugging
+- Works seamlessly with TanStack Query, Router, and other TanStack libraries
+
 
 ## Installation
 

From 4cb1040635d1cb9e0b74d6b22db62032e733534a Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Thu, 18 Sep 2025 09:41:42 +0000
Subject: [PATCH 5/5] ci: apply automated fixes

---
 README.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/README.md b/README.md
index b27a7a3f..55eead88 100644
--- a/README.md
+++ b/README.md
@@ -68,7 +68,6 @@ It is built with a plugin architecture, allowing for easy extension and customiz
 - Go-to-source functionality for easy debugging
 - Works seamlessly with TanStack Query, Router, and other TanStack libraries
 
-
 ## Installation
 
 Install one of the following packages based on your framework of choice: