devtools-app-setup

Install and configure TanStack Devtools for React, Vue, Solid, and Preact.

485|92|Updated Jul 25, 2025
One-click install
npx skills add https://github.com/TanStack/devtools --skill devtools-app-setup
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: devtools-app-setup
Source: https://github.com/TanStack/devtools/tree/main/packages/devtools/skills/devtools-app-setup
Command: npx skills add https://github.com/TanStack/devtools --skill devtools-app-setup

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill simplifies the integration of TanStack Devtools into your application, providing a unified debugging experience across different frameworks.

Core Features & Use Cases

  • Framework Agnostic Setup: Easily install and configure Devtools for React, Vue, Solid, and Preact.
  • Plugin Integration: Register custom plugins to extend Devtools functionality with framework-specific panels.
  • Shell Configuration: Customize the Devtools UI and behavior, including position, hotkeys, and theming.
  • Use Case: Quickly add TanStack Devtools to your React application to inspect and debug your application's state in real-time, alongside your query and router data.

Quick Start

Install the TanStack Devtools for React and mount the TanStackDevtools component at the root of your application.

Frequently Asked Questions about devtools-app-setup

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up TanStack Devtools in my React application?

To set up TanStack Devtools in React, install the framework-specific devtools package and mount the TanStackDevtools component at the root of your application to enable real-time debugging.

Does TanStack Devtools work with Vue, Solid, and Preact?

Yes, TanStack Devtools is framework agnostic and supports Vue, Solid, and Preact. You must install the corresponding framework-specific devtools packages and configure them for your environment.

Can I customize the Devtools shell configuration and UI behavior?

Yes, you can customize the Devtools shell configuration to adjust the UI position, set custom hotkeys, and apply theming, creating a personalized debugging experience for your application.

Do I need the optional Vite plugin for TanStack Devtools?

The optional Vite plugin provides enhanced features for TanStack Devtools. While not strictly required for basic state inspection, integrating it unlocks advanced plugin functionality and improved debugging capabilities.

How do I register custom plugins to extend Devtools functionality?

You can register custom plugins during Devtools configuration to extend functionality, allowing you to add framework-specific panels and communicate through the event bus for specialized debugging.

What is the best way to inspect application state in real-time across different frameworks?

The best way to inspect state in real-time is integrating TanStack Devtools, which offers a unified debugging experience across React, Vue, Solid, and Preact through customizable shell configurations.