# 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 Svelte 5.40 or newer within version 5.

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

## Setup

Add the dock once in your root component. This example uses Vite's `import.meta.env.DEV` flag to keep the dock out of production builds.

```svelte
<script lang="ts">
  import { TanStackDevtools } from '@tanstack/svelte-devtools'
  import { hotkeysDevtoolsPlugin } from '@tanstack/svelte-hotkeys-devtools'
</script>

{#if import.meta.env.DEV}
  <TanStackDevtools plugins={[hotkeysDevtoolsPlugin()]} />
{/if}
```

In SvelteKit, you can use `dev` from `$app/environment` as the condition instead. The Hotkeys panel appears alongside any other TanStack devtools plugins you have installed.

## Standalone panel

`HotkeysDevtoolsPanel` renders the panel without the TanStack Devtools dock:

```svelte
<script lang="ts">
  import { HotkeysDevtoolsPanel } from '@tanstack/svelte-hotkeys-devtools'
</script>

<HotkeysDevtoolsPanel theme="light" />
```

Both props are optional: `theme` defaults to `'dark'` and `devtoolsOpen` defaults to `true`. Values supplied by the dock take precedence over these 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 and remove the `import.meta.env.DEV` guard from the setup example:

```ts
import { hotkeysDevtoolsPlugin } from '@tanstack/svelte-hotkeys-devtools/production'
```

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