chore(examples): show devtools in every React example

Author: dasjideepak

examples/react/compiler/package.json

@@ -9,7 +9,9 @@
     "test:types": "tsc"
   },
   "dependencies": {
+    "@tanstack/react-devtools": "^0.10.5",
     "@tanstack/react-form": "^2.0.0-alpha.2",
+    "@tanstack/react-form-devtools": "^1.0.0-alpha.2",
     "react": "19.2.8",
     "react-dom": "19.2.8"
   },

examples/react/compiler/src/index.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react'
 import { createRoot } from 'react-dom/client'
 
+import { TanStackDevtools } from '@tanstack/react-devtools'
+import { formDevtoolsPlugin } from '@tanstack/react-form-devtools'
 import { useForm } from '@tanstack/react-form'
 
 import type { AnyFieldApi } from '@tanstack/react-form'
@@ -131,5 +133,10 @@ const rootElement = document.getElementById('root')!
 createRoot(rootElement).render(
   <React.StrictMode>
     <App />
+
+    <TanStackDevtools
+      config={{ hideUntilHover: false }}
+      plugins={[formDevtoolsPlugin()]}
+    />
   </React.StrictMode>,
 )

examples/react/large-form/src/index.tsx

@@ -13,7 +13,7 @@ createRoot(rootElement).render(
     <App />
 
     <TanStackDevtools
-      config={{ hideUntilHover: true }}
+      config={{ hideUntilHover: false }}
       plugins={[formDevtoolsPlugin()]}
     />
   </React.StrictMode>,

examples/react/multi-step-wizard/src/index.tsx

@@ -13,7 +13,7 @@ createRoot(rootElement).render(
     <App />
 
     <TanStackDevtools
-      config={{ hideUntilHover: true }}
+      config={{ hideUntilHover: false }}
       plugins={[formDevtoolsPlugin()]}
     />
   </React.StrictMode>,

examples/react/next-server-actions-zod/package.json

@@ -8,7 +8,9 @@
     "_test:types": "tsc"
   },
   "dependencies": {
+    "@tanstack/react-devtools": "^0.10.5",
     "@tanstack/react-form": "^2.0.0-alpha.2",
+    "@tanstack/react-form-devtools": "^1.0.0-alpha.2",
     "@tanstack/react-form-nextjs": "^2.0.0-alpha.2",
     "next": "16.3.0",
     "react": "19.2.8",

examples/react/next-server-actions-zod/src/app/devtools.tsx

@@ -0,0 +1,15 @@
+'use client'
+
+import { TanStackDevtools } from '@tanstack/react-devtools'
+import { formDevtoolsPlugin } from '@tanstack/react-form-devtools'
+
+export function Devtools() {
+  return (
+    <TanStackDevtools
+      plugins={[formDevtoolsPlugin()]}
+      config={{
+        hideUntilHover: false,
+      }}
+    />
+  )
+}

examples/react/next-server-actions-zod/src/app/page.tsx

@@ -1,9 +1,11 @@
 import { ClientComp } from './client-component'
+import { Devtools } from './devtools'
 
 export default function Home() {
   return (
     <>
       <ClientComp />
+      <Devtools />
     </>
   )
 }

examples/react/next-server-actions/package.json

@@ -8,7 +8,9 @@
     "_test:types": "tsc"
   },
   "dependencies": {
+    "@tanstack/react-devtools": "^0.10.5",
     "@tanstack/react-form": "^2.0.0-alpha.2",
+    "@tanstack/react-form-devtools": "^1.0.0-alpha.2",
     "@tanstack/react-form-nextjs": "^2.0.0-alpha.2",
     "next": "16.3.0",
     "react": "19.2.8",

examples/react/next-server-actions/src/app/devtools.tsx

@@ -0,0 +1,15 @@
+'use client'
+
+import { TanStackDevtools } from '@tanstack/react-devtools'
+import { formDevtoolsPlugin } from '@tanstack/react-form-devtools'
+
+export function Devtools() {
+  return (
+    <TanStackDevtools
+      plugins={[formDevtoolsPlugin()]}
+      config={{
+        hideUntilHover: false,
+      }}
+    />
+  )
+}

examples/react/next-server-actions/src/app/page.tsx

@@ -1,9 +1,11 @@
 import { ClientComp } from './client-component'
+import { Devtools } from './devtools'
 
 export default function Home() {
   return (
     <>
       <ClientComp />
+      <Devtools />
     </>
   )
 }