TanStack · abedshaaban · Mar 31, 2026 · Mar 31, 2026 · Mar 31, 2026 · Apr 1, 2026
diff --git a/.changeset/puny-games-bow.md b/.changeset/puny-games-bow.md
@@ -0,0 +1,5 @@
+---
+'@tanstack/devtools-seo': patch
+---
+
+Add the first SEO devtools plugin release with React support, live SERP and social previews, JSON-LD inspection, heading and link analysis, and an overview score. The plugin now ignores devtools-owned DOM, refreshes key sections on route changes, and uses a more balanced overall health weighting.
diff --git a/examples/react/basic/index.html b/examples/react/basic/index.html
@@ -33,11 +33,23 @@
       content="A basic example of using TanStack Devtools with React."
     />
 
+    <meta name="robots" content="index, follow" />
+    <link rel="canonical" href="http://localhost:3005" />
+
     <description
       >A basic example of using TanStack Devtools with React.</description
     >
   </head>
   <body>
+    <script type="application/ld+json">
+      {
+        "@context": "https://schema.org",
+        "@type": "Organization",
+        "name": "TanStack Devtools",
+        "url": "https://tanstack.com/devtools",
+        "logo": "https://tanstack.com/devtools/logo.png"
+      }
+    </script>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <script type="module" src="/src/index.tsx"></script>

diff --git a/examples/react/basic/src/setup.tsx b/examples/react/basic/src/setup.tsx
@@ -1,6 +1,4 @@
-import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
-import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
-
+import { TanStackDevtools } from '@tanstack/react-devtools'
 import {
   Link,
   Outlet,
@@ -9,7 +7,8 @@ import {
   createRoute,
   createRouter,
 } from '@tanstack/react-router'
-import { TanStackDevtools } from '@tanstack/react-devtools'
+import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
+import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
 import { PackageJsonPanel } from './package-json-panel'
 
 const rootRoute = createRootRoute({
@@ -28,6 +27,7 @@ const rootRoute = createRootRoute({
     </>
   ),
 })
+
 const indexRoute = createRoute({
   getParentRoute: () => rootRoute,
   path: '/',
@@ -39,22 +39,26 @@ const indexRoute = createRoute({
     )
   },
 })
+
 function About() {
   return (
     <div className="p-2">
       <h3>Hello from About!</h3>
     </div>
   )
 }
+
 const aboutRoute = createRoute({
   getParentRoute: () => rootRoute,
   path: '/about',
   component: About,
 })
+
 const routeTree = rootRoute.addChildren([indexRoute, aboutRoute])
 const router = createRouter({
   routeTree,
 })
+
 export default function DevtoolsExample() {
   return (
     <>
@@ -79,11 +83,6 @@ export default function DevtoolsExample() {
             name: 'Package.json',
             render: () => <PackageJsonPanel />,
           },
-
-          /* {
-      name: "The actual app",
-      render: <iframe style={{ width: '100%', height: '100%' }} src="http://localhost:3005" />,
-    } */
         ]}
       />
       <RouterProvider router={router} />

diff --git a/examples/react/seo/index.html b/examples/react/seo/index.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/svg+xml" href="/emblem-light.svg" />
+    <link rel="shortcut icon" href="/emblem-light.svg" />
+    <link rel="apple-touch-icon" href="/emblem-light.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+
+    <title>SEO Devtools Example - TanStack Devtools</title>
+    <meta
+      name="description"
+      content="A React example for the TanStack SEO devtools plugin."
+    />
+    <meta property="og:title" content="SEO Devtools Example" />
+    <meta
+      property="og:description"
+      content="Inspect page metadata, headings, links, and structured data."
+    />
+    <meta property="og:url" content="https://example.com/seo" />
+    <meta
+      property="og:image"
+      content="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=800"
+    />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="SEO Devtools Example" />
+    <meta
+      name="twitter:description"
+      content="Inspect page metadata, headings, links, and structured data."
+    />
+    <link rel="canonical" href="https://example.com/seo" />
+  </head>
+  <body>
+    <script id="seo-json-ld" type="application/ld+json">
+      {
+        "@context": "https://schema.org",
+        "@type": "WebSite",
+        "name": "TanStack Devtools SEO Example",
+        "url": "https://example.com/seo"
+      }
+    </script>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/examples/react/seo/package.json b/examples/react/seo/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "@tanstack/react-devtools-seo-example",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port=3006",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test:types": "tsc"
+  },
+  "dependencies": {
+    "@tanstack/devtools-seo": "workspace:^",
+    "@tanstack/react-devtools": "^0.10.2",
+    "@tanstack/react-router": "^1.132.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@tanstack/devtools-vite": "0.6.0",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "@vitejs/plugin-react": "^6.0.1",
+    "vite": "^8.0.0"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/examples/react/seo/public/emblem-light.svg b/examples/react/seo/public/emblem-light.svg
diff --git a/examples/react/seo/src/App.tsx b/examples/react/seo/src/App.tsx
@@ -0,0 +1,56 @@
+import {
+  Link,
+  Outlet,
+  RouterProvider,
+  createRootRoute,
+  createRoute,
+  createRouter,
+} from '@tanstack/react-router'
+
+function AppShell() {
+  return (
+    <div>
+      <nav
+        style={{
+          display: 'flex',
+          gap: 12,
+          padding: '16px 24px 0',
+        }}
+      >
+        <Link to="/">Home</Link>
+        <Link to="/about">About</Link>
+      </nav>
+      <Outlet />
+    </div>
+  )
+}
+
+const rootRoute = createRootRoute({
+  component: AppShell,
+})
+
+const indexRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/',
+  component: () => {
+    return <h1>Home</h1>
+  },
+})
+
+const aboutRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/about',
+  component: () => {
+    return <h1>About</h1>
+  },
+})
+
+const routeTree = rootRoute.addChildren([indexRoute, aboutRoute])
+
+const router = createRouter({
+  routeTree,
+})
+
+export default function App() {
+  return <RouterProvider router={router} />
+}
diff --git a/examples/react/seo/src/index.tsx b/examples/react/seo/src/index.tsx
@@ -0,0 +1,12 @@
+import { createRoot } from 'react-dom/client'
+import { seoDevtoolsPlugin } from '@tanstack/devtools-seo/react'
+import { TanStackDevtools } from '@tanstack/react-devtools'
+
+import App from './App'
+
+createRoot(document.getElementById('root')!).render(
+  <>
+    <App />
+    <TanStackDevtools plugins={[seoDevtoolsPlugin()]} />
+  </>,
+)
diff --git a/examples/react/seo/tsconfig.json b/examples/react/seo/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src", "vite.config.ts"]
+}
diff --git a/examples/react/seo/vite.config.ts b/examples/react/seo/vite.config.ts
@@ -0,0 +1,7 @@
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
+import { devtools } from '@tanstack/devtools-vite'
+
+export default defineConfig({
+  plugins: [devtools(), react()],
+})
diff --git a/package.json b/package.json
@@ -31,11 +31,11 @@
     "test:eslint": "nx affected --target=test:eslint --exclude=examples/**",
     "test:knip": "knip",
     "test:lib": "nx affected --targets=test:lib --exclude=examples/**",
-    "test:lib:dev": "pnpm test:lib && nx watch --all -- pnpm test:lib",
+    "test:lib:dev": "pnpm test:lib && node -e \"require('node:fs').rmSync('.nx/workspace-data/d/disabled',{force:true})\" && NX_DAEMON=true nx daemon --start && NX_DAEMON=true nx watch --all -- pnpm test:lib",
     "test:pr": "nx affected --targets=test:eslint,test:sherif,test:knip,test:lib,test:types,test:build,build",
     "test:sherif": "sherif",
     "test:types": "nx affected --targets=test:types --exclude=examples/**",
-    "watch": "pnpm run build:all && nx watch --all -- pnpm run build:all"
+    "watch": "pnpm run build:all && node -e \"require('node:fs').rmSync('.nx/workspace-data/d/disabled',{force:true})\" && NX_DAEMON=true nx daemon --start && NX_DAEMON=true nx watch --all -- pnpm run build:all"
   },
   "nx": {
     "includedScripts": [

diff --git a/packages/devtools-seo/package.json b/packages/devtools-seo/package.json
@@ -0,0 +1,78 @@
+{
+  "name": "@tanstack/devtools-seo",
+  "version": "0.1.0",
+  "description": "SEO overview panel for TanStack Devtools",
+  "author": "TanStack",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TanStack/devtools.git",
+    "directory": "packages/devtools-seo"
+  },
+  "homepage": "https://tanstack.com/devtools",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
+  "keywords": [
+    "devtools",
+    "seo",
+    "solid-js"
+  ],
+  "type": "module",
+  "types": "dist/esm/index.d.ts",
+  "module": "dist/esm/index.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/esm/index.d.ts",
+        "default": "./dist/esm/index.js"
+      }
+    },
+    "./react": {
+      "import": {
+        "types": "./dist/esm/react/index.d.ts",
+        "default": "./dist/esm/react/index.js"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "engines": {
+    "node": ">=18"
+  },
+  "files": [
+    "dist/",
+    "src"
+  ],
+  "scripts": {
+    "clean": "premove ./build ./dist",
+    "lint:fix": "eslint ./src --fix",
+    "test:eslint": "eslint ./src",
+    "test:types": "tsc",
+    "test:build": "publint --strict",
+    "build": "vite build"
+  },
+  "dependencies": {
+    "@tanstack/devtools-ui": "workspace:*",
+    "@tanstack/devtools-utils": "workspace:*",
+    "goober": "^2.1.16",
+    "solid-js": "^1.9.9"
+  },
+  "peerDependencies": {
+    "react": ">=16.8",
+    "solid-js": ">=1.9.7"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@tanstack/vite-config": "0.4.3",
+    "@types/react": "^19.2.0",
+    "react": "^19.2.0",
+    "vite": "^8.0.0",
+    "vite-plugin-solid": "^2.11.11"
+  }
+}
diff --git a/packages/devtools-seo/src/core.tsx b/packages/devtools-seo/src/core.tsx
@@ -0,0 +1,7 @@
+/** @jsxImportSource solid-js */
+
+import { constructCoreClass } from '@tanstack/devtools-utils/solid'
+
+const [SeoDevtoolsCore] = constructCoreClass(() => import('./solid-panel'))
+
+export { SeoDevtoolsCore }
diff --git a/...es/devtools/src/hooks/use-head-changes.ts → ...evtools-seo/src/hooks/use-head-changes.ts b/...es/devtools/src/hooks/use-head-changes.ts → ...evtools-seo/src/hooks/use-head-changes.ts