Devtools

TanStack Form integrates with the TanStack Devtools shell through a form plugin.

Install

shell

npm install @tanstack/react-devtools @tanstack/react-form-devtools

Add the plugin

Render one TanStackDevtools instance near the root of the application and pass it formDevtoolsPlugin().

tsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
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>,
)

The plugin discovers mounted forms through the adapter's devtools bridge. Use it to inspect current values, validation state, field metadata, and registered fields while developing.

The shell also accepts configuration such as hideUntilHover:

tsx

<TanStackDevtools
  plugins={[formDevtoolsPlugin()]}
  config={{ hideUntilHover: false }}
/>

See the TanStack Devtools documentation for shell placement and configuration.

Install#

Add the plugin#

Install

Add the plugin