Devtools

TanStack Form comes with a ready-to-go suite of devtools.

Setup

Install the TanStack Devtools library and the TanStack Form plugin, from the framework adapter that you're 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.

Setup

Subscribe to Bytes

Subscribe to Bytes