Create FasterCreate Faster
Data Fetching

TanStack Devtools

Pre-configured devtools shell with TanStack Query, Router and Form panels.

Supported frameworks
Next.jsTanStack Start
Dependencies
@tanstack/react-devtoolsdev@tanstack/react-query-devtoolsdev@tanstack/devtools-vitedev@tanstack/react-form-devtoolsdev

→ TanStack Devtools Documentation

What create-faster adds

Next.js

New files:

  • src/components/devtools.tsx - The TanStackDevtools shell and its panels

Modified files:

  • src/app/layout.tsx - Loads the devtools component with a dynamic import in development only, so a production build never bundles it

Configuration:

  • Position: top-left
  • TanStack Query panel with TanStack Query (@tanstack/react-query-devtools is added only then)
  • TanStack Form panel with TanStack Form (@tanstack/react-form-devtools is added only then)
  • No panel without those libraries: the shell opens empty, ready for custom devtools

TanStack Start

Modified files:

  • src/routes/__root.tsx - Replaces the standalone router devtools with the TanStackDevtools shell, rendered inside the document body
  • vite.config.ts - Adds the @tanstack/devtools-vite plugin first in the plugins list, which removes the devtools from production builds

Configuration:

  • Position: bottom-right
  • TanStack Router panel always
  • TanStack Query panel with TanStack Query
  • TanStack Form panel with TanStack Form (@tanstack/react-form-devtools is added only then)

TanStack Query

Pre-configured QueryClient with optimized defaults and provider setup.

React Hook Form

Pre-configured form library with resolver support for schema validation.

On this page

(Top page)What create-faster addsNext.jsTanStack Start