Tanstack Devtools
TanStack DevTools provides debugging panels for inspecting Query cache, Router route trees, and Form field state across React applications. Choose between standalone devtools for individual libraries or a unified panel combining all three with plugin architecture.
TanStack DevTools lets you debug Query cache, Router routes, and Form state in React development.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-03-02
TanStack DevTools lets you debug Query cache, Router routes, and Form state in React development. TanStack DevTools provides debugging panels for inspecting Query cache, Router route trees, and Form field state across React applications. Choose between standalone devtools for individual libraries or a unified panel combining all three with plugin architecture.
Use it when
- Tanstack Devtools lets you debug and inspect TanStack queries and state in development by visualizing your Query cache in real time.
- Tanstack Devtools installation involves adding the devtools package to your project dependencies.
Install
oakoss/agent-skills/tanstack-devtools · repository language: Python
generated, unverified - the skill's exact subdirectory could not be determined; check the repository on GitHub
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What is Tanstack Devtools and what can it debug?
Tanstack Devtools provides debugging panels for inspecting Query cache, Router route trees, and Form field state across React applications. You can choose between standalone devtools for individual libraries or a unified panel combining all three with plugin architecture, making it easier to monitor and troubleshoot your TanStack-powered apps.
How to use tanstack devtools for inspecting queries?
Tanstack Devtools lets you debug and inspect TanStack queries and state in development by visualizing your Query cache in real time. Install the devtools package, add it to your app configuration, and access the debugging panel to see active queries, their status, data, and cache behavior as your application runs.
How do I install and configure Tanstack Devtools locally?
Tanstack Devtools installation involves adding the devtools package to your project dependencies, then initializing it in your application setup. Configuration varies by library—Query, Router, or Form—but typically requires mounting the devtools component or plugin in your app, then accessing the panel through your browser during development.
Can Tanstack Devtools monitor real-time data flow and cache?
Yes, Tanstack Devtools monitors real-time data flow and cache behavior in TanStack apps by displaying live updates to your Query cache, route state, and form fields. Watch requests execute, see cache hits and misses, inspect payload data, and track state changes as they happen during development.
How does Tanstack Devtools help troubleshoot performance issues?
Tanstack Devtools helps troubleshoot TanStack query performance and state issues by exposing cache behavior, query timing, and state mutations in a visual inspector. Identify slow queries, unnecessary refetches, stale data, and state inconsistencies to optimize your application's data flow and responsiveness.
Does Tanstack Devtools work with browser extensions?
Tanstack Devtools offers both browser extension and in-app panel options for debugging. While the primary integration is through the devtools package mounted in your application, browser extensions provide additional convenience for inspecting TanStack state across multiple tabs and sessions during development.
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Debug and inspect tanstack queries and state in development”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
TanStack Hotkeys is a React library for adding keyboard shortcuts with template-string bindings and automatic cross-platform key abstraction. It includes hooks for single hotkeys, multi-key sequences, shortcut recording, and key state tracking, plus utilities for displaying platform-specific shortcut labels.
Tanstack Router delivers file-based routing for React with full type safety, route-level data loading, and search parameter validation. It handles code splitting, preloading strategies, and integrates seamlessly with TanStack Query for efficient data management. Use it to build structured navigation with automatic type inference for params, search values, and loader data.
TanStack Devtools brings together debugging tools for TanStack Query, Router, and AI into a single, unified interface. The framework-agnostic plugin system lets you add built-in panels or create custom ones for your specific needs. Built with Solid.js for lightweight performance, it supports real-time state monitoring and works across development environments.
Tanstack Start combines React with TanStack Router to build full-stack applications featuring type-safe RPC server functions, server-side rendering with streaming, and middleware composition. Deploy to Cloudflare Workers, Vercel, Netlify, AWS Lambda, and other platforms with built-in support for authentication, API routes, and session management.
Learn to implement error boundaries in React using class components or the react-error-boundary library to catch rendering errors and display fallback UIs. This skill covers when to use boundaries, reset mechanisms, error logging, and common pitfalls to avoid.
TanStack Router delivers type-safe, file-based routing for React single-page applications with automatic route generation and TypeScript validation. It includes built-in route loaders for data fetching, seamless TanStack Query integration, and first-class support for Cloudflare Workers deployment.
More skills Tanstack Query (unlicensed) · Zustand (unlicensed) · state-management (MIT) · Tanstack Table (unlicensed) · Tanstack Pacer (unlicensed)