Chapter 24: Devtools

Core Idea

Form devtools are a TanStack Devtools plugin, not a standalone panel — install the shared @tanstack/react-devtools shell plus the @tanstack/react-form-devtools plugin, then mount <TanStackDevtools plugins={[formDevtoolsPlugin()]} /> once at the app root.

Key Concepts

• Two packages required: the generic @tanstack/react-devtools host, and @tanstack/react-form-devtools supplying formDevtoolsPlugin.
• Single mount point: <TanStackDevtools> is rendered once, typically alongside the root <App />, with a plugins array — this is the same pattern other TanStack libraries in this devtools family use (e.g. a query devtools plugin could be added to the same array).
• Solid has the equivalent pairing (@tanstack/solid-devtools + @tanstack/solid-form-devtools); other frameworks weren't documented with first-party devtools at time of writing.

Code Examples

import { TanStackDevtools } from '@tanstack/react-devtools'
import { formDevtoolsPlugin } from '@tanstack/react-form-devtools'
import App from './App'

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

• What it demonstrates: the minimal root-level mount — no per-form setup is needed once this is in place.

Key Takeaways

1. Install both packages (react-devtools shell + react-form-devtools plugin) — the plugin alone doesn't render anything without the host.
2. Mount <TanStackDevtools> once at the app root, not per-form — it introspects every form instance in the tree automatically via the plugin.
3. This first-party devtools story is newer/thinner than React Hook Form's mature browser extension (ch004 Comparison) — don't expect full feature parity yet.

Connects To

• Ch002 Installation: the exact package names.
• Ch004 Comparison: devtools maturity as a documented gap versus React Hook Form.