Devtools

TanStack Form comes with a ready to go suit of devtools.

Setup

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

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.

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.

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