📄 tanstack/form/latest/docs/framework/react/guides/devtools

Install the TanStack Devtools library and the TanStack Form plugin , from the framework adapter that your working in (in this case @tanstack/react-devtools, and @tanstack/react-form-devtools).

bash

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


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

Next in the root of your application import the TanStackDevtools.

tsx

import { TanStackDevtools } from '@tanstack/react-devtools'

import App from './App'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />

    <TanStackDevtools />
  </StrictMode>,
)


import { TanStackDevtools } from '@tanstack/react-devtools'

import App from './App'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />

    <TanStackDevtools />
  </StrictMode>,
)

Import the formDevtoolsPlugin from TanStack Form and provide it to the TanStackDevtools component.

tsx

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>,
)


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>,
)

Finally add any additional configuration you desire to the TanStackDevtools component, more information can be found under the TanStack Devtools Configuration section.

A complete working example can be found in our examples section .

Edit on GitHub

Debugging

JavaScript Reference

Partners Become a Partner

scarf analytics