tanstack-devtools

A unified devtools panel consolidates TanStack Query and Router debugging into a single interface for real-time state inspection. You wrap your application with the provider to inspect queries and routes simultaneously during development.

A framework-agnostic devtools core provides the best way to inspect TanStack queries across different frameworks. Its lightweight implementation unifies debugging without locking you into a specific framework environment.

You can extend React devtools with custom plugins for TanStack state inspection through the built-in plugin architecture. This extensible design allows adding custom panels and rendering devtools inside your application.

The TanStack devtools panel works without additional dependencies, featuring an empty dependency list. Its lightweight implementation ensures a framework-agnostic core that integrates smoothly into existing development workflows.

To add a devtools panel inside your React application, install the package and wrap your app with the TanStackDevtools component. This renders optional built-in panels for real-time state inspection during development.

You should use a unified devtools panel to solve the fragmentation of debugging tools across TanStack libraries. It streamlines dev workflows by providing a single, extensible interface instead of managing multiple separate debugging tools.