TanStack
Getting Started

Installation

Install the adapter for your framework with your preferred package manager:

shell
npm i @tanstack/react-hotkeys

Each framework package re-exports everything from the core @tanstack/hotkeys package, so you don't need to install the core package separately.

Note

If you are not using a framework, you can install the core @tanstack/hotkeys package directly for use with vanilla JavaScript.

Alpine

Use Alpine 3.15.12 or newer within version 3. Install the optional hotkeysPlugin before Alpine.start(), or create a scope explicitly.

Start with the Quick Start, then follow the guides. The package includes the hotkeys adapter; a dedicated Alpine devtools adapter is not provided.

Ember

Use Ember 6.8 or newer. Register hotkeys with imported template helpers in strict-mode .gts components. Pass the component as owner to state readers and recorders.

Start with the Quick Start, then follow the guides. The package includes the hotkeys adapter; a dedicated Ember devtools adapter is not provided.

Octane

Use Octane 0.1.36 or newer within version 0.1, with compiler-enabled .tsrx components. The Octane adapter requires Node.js 22.22.2 or newer when used in Node.js.

Start with the Quick Start, then follow the guides. The package includes the hotkeys adapter; a dedicated Octane devtools adapter is not provided.

React

Start with the Quick Start guide. If you want the integrated devtools panel, also install:

Preact

Start with the API reference and guides. If you want the integrated devtools panel, also install:

Solid

Start with the API reference and guides. If you want the integrated devtools panel, also install:

Svelte

Start with the Quick Start guide and the Svelte-specific guides. If you want the integrated devtools panel, also install:

Angular

Start with the Quick Start guide and the Angular-specific guides.

The integrated devtools panel requires Angular 21 or newer. To use it, also install:

Vue

Start with the Quick Start guide and the Vue-specific guides.

If you want the Vue devtools panel component, also install:

Lit

Start with the Quick Start guide and the Lit-specific guides.

Lit currently ships the hotkeys adapter only, so no dedicated Lit devtools package is required.

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

React

See the devtools documentation for setup details.

Preact

See the devtools documentation for setup details.

Solid

See the devtools documentation for setup details.

Vue

See the devtools documentation for setup details.

Angular

See the devtools documentation for setup details.

Svelte

See the devtools documentation for setup details.