TanStack
Hotkeys
Getting Started

Devtools

TanStack Hotkeys ships devtools for debugging and monitoring your registered hotkeys in real time, as a panel inside the TanStack Devtools multi-panel UI.

Note

The Hotkeys devtools exports are no-ops outside development mode. See Production builds if you need them in production.

Features

The Hotkeys devtools panel lets you:

  • View all currently registered hotkeys, chords and sequences in one list, with their options and status
  • Follow sequence progress as steps are pressed
  • See declared app hotkeys that nothing has registered yet, with their custom hotkeys
  • See which keys are held down in real time
  • Trigger hotkey callbacks for testing, without pressing the keys
  • Inspect individual registrations, including their target, event type, and conflict behavior

Installation

Install the TanStack Devtools host package and the Hotkeys devtools adapter for your framework.

shell
npm install @tanstack/react-devtools @tanstack/react-hotkeys-devtools

Setup

tsx
import { TanStackDevtools } from '@tanstack/react-devtools'
import { hotkeysDevtoolsPlugin } from '@tanstack/react-hotkeys-devtools'

const devtoolsPlugins = [hotkeysDevtoolsPlugin()]

function App() {
  return <TanStackDevtools plugins={devtoolsPlugins} />
}

Create the plugins array outside your component. A new array on every render makes the devtools remount the panel, which clears its search box. Hotkeys state such as useHeldKeys re-renders a component on every key press, so this shows up quickly.

The Hotkeys panel appears alongside any other TanStack devtools plugins you have installed.

Standalone panel

HotkeysDevtoolsPanel renders the panel without the TanStack Devtools dock:

tsx
import { HotkeysDevtoolsPanel } from '@tanstack/react-hotkeys-devtools'

function DebugPanel() {
  return <HotkeysDevtoolsPanel />
}

Both props are optional: theme defaults to 'dark' and devtoolsOpen defaults to true. Pass theme="light" to select the light theme. When using hotkeysDevtoolsPlugin(), the dock supplies these props and its values take precedence over the standalone defaults.

Production builds

In production builds, the framework devtools adapters return no-op implementations, so they don't affect your bundle's behavior.

To include the devtools in a production build, import from the production entry point:

tsx
import { hotkeysDevtoolsPlugin } from '@tanstack/react-hotkeys-devtools/production'

This entry point also exports the active HotkeysDevtoolsPanel for standalone use.

Edit on GitHub
Installation
Quick Start