# Devtools

TanStack Hotkeys ships devtools for debugging and monitoring your registered hotkeys in real time, as a panel inside the [TanStack Devtools](https://tanstack.com/devtools) multi-panel UI.

> [!NOTE]
> The Hotkeys devtools exports are no-ops outside development mode. See [Production builds](#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](./overview#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.

The adapters need a current TanStack Devtools host, such as `@tanstack/react-devtools` 0.10.14 or newer. Older hosts pass the plugin a theme string instead of props, so the panel ignores the theme and TypeScript rejects the plugin. Both libraries are in beta, so upgrade them together.

Requires Solid 1.9.15 or newer within version 1.

```sh
npm install @tanstack/solid-devtools @tanstack/solid-hotkeys-devtools
```

## Setup

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

export function App() {
  return <TanStackDevtools plugins={[hotkeysDevtoolsPlugin()]} />
}
```

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/solid-hotkeys-devtools'

export 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/solid-hotkeys-devtools/production'
```

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