GeezerVison

The World Wide Web, restored to 800 pixels of glory.

GeezerVison is showing tanstack.com — TanStack Devtools

Devtools

alpha

Build the inspector, not another debugging shell.

Devtools gives TanStack panels and your product-specific runtime state one extensible cockpit, with plugins, typed events, source inspection, and client/server logs already handled.

Docs

unified devtools

your app

src/routes/__root.tsx:42

queries

mutations

stale

project:42

activity-feed

current-user

98.1Mtotal downloads 5,849,806weekly downloads 514GitHub stars

The shell is infrastructure

Stop rebuilding everything around the useful panel.

The trigger, tabs, window management, settings, persistence, hotkeys, source bridge, and transport are shared. Each library or product team can focus on the runtime truth it wants to expose.

Shell

Trigger, panel, tabs, and settings

Plugins

Library and product inspectors

Events

Typed local, WebSocket, and SSE transport

Source

Element and log locations in the editor

Windowing

Docking, persistence, hotkeys, and PiP

Adapters

React, Vue, Solid, and Preact

one cohesive development surface

Custom plugins

Your product gets devtools too.

Register a panel beside TanStack inspectors and communicate through a typed event client. Events can stay local or travel between browser and server over WebSocket or SSE.

custom jobs plugin

type JobEvents = {
  progress: { jobId: string; percent: number }
}
class JobsClient extends EventClient<JobEvents> {
  constructor() { super({ pluginId: 'jobs' }) }
}
const jobs = new JobsClient()

Background Jobs

A product-owned panel registered beside library inspectors.

typed event stream

connected

jobs:progress

sync-catalog · 24%

jobs:started

sync-catalog · 12%

console piping

browser console

[ui] route mounted

[query] cache updated

server terminal

[loader] project:42

[api] 200 /projects/42

Browser output is visible in the terminal.

One debugging conversation

See client and server logs without changing windows.

The Vite integration can pipe browser logs into the terminal and server logs into the browser console, with enhanced source locations attached.

Development only

Click straight to source. Ship none of the shell.

Source injection connects elements and logs to their exact file and line during development. By default, the Vite plugin removes Devtools imports and matching JSX usage from production builds.

development

Project summary

Summary.tsx:14

Hold the inspector hotkey, click an element, and open its exact source location.

production build

Devtools component importsremoved

<TanStackDevtools /> JSXremoved

plugin-only importsremoved

imports + JSX removed

The Vite plugin enables removeDevtoolsOnBuild by default.

Partners

Gold

Silver

Bronze

OSS Sponsors

Sponsors get special perks like private discord channels, priority issue requests, and direct support!

Become a Sponsor

View Previous Partners

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.