Debugging with DevTools

Forms are stateful and complex. When something goes wrong — validation not firing, a field not updating, a submit button staying disabled — you need visibility into what's actually happening inside the form. That's where TanStack Form DevTools comes in.

Installation

TanStack Form DevTools requires two packages — the core devtools UI and the form-specific plugin:

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

Setup

Import TanStackDevtools from the core package and formDevtoolsPlugin from the form plugin. Render TanStackDevtools at the root of your app (or alongside your form) and pass it the form plugin:

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

function MyForm() {
  const form = useForm({
    defaultValues: { name: '', email: '' },
    onSubmit: async ({ value }) => console.log(value),
  })

  return (
    <div>
      <form onSubmit={(e) => { e.preventDefault(); form.handleSubmit() }}>
        {/* fields */}
      </form>
      <TanStackDevtools
        config={{ hideUntilHover: true }}
        plugins={[formDevtoolsPlugin()]}
      />
    </div>
  )
}

The DevTools panel renders on the page (hidden until you hover over it) and gives you a live view of everything happening in your form. The plugin architecture means you can combine TanStack Form DevTools with TanStack Query DevTools and others in a single panel.

What You Can Inspect

• All field values — see exactly what each field holds as you type
• Field metadata — whether a field is touched, dirty, or has errors
• Form-level state — isSubmitting, canSubmit, and any form-level errors
• Validation status per field — see which fields are valid and which aren't

Common Debugging Scenarios

"Why won't my form submit?" Open DevTools and look at canSubmit. If it's false, you have validation errors somewhere. The panel will show you exactly which fields are failing.

"Why isn't my validation running?" Check whether your validator is attached to the right event. onChange, onBlur, and onSubmit validators all fire at different times. If you expected validation on blur but wired it to submit, it won't run when you expect it to.

"Why is my field not updating?" This is usually a wiring issue. Check that handleChange is receiving e.target.value and not the event object itself. Forgetting .value is one of the most common mistakes and DevTools will surface it immediately since the field value just won't change.

Production

DevTools are for development only. Don't ship them to production. The simplest way to exclude them:

{process.env.NODE_ENV === 'development' && (
  <TanStackDevtools plugins={[formDevtoolsPlugin()]} />
)}

You can also use dynamic imports to keep the DevTools bundle out of your production build entirely. Either way, make sure you're not exposing internal form state to end users.