TanStack
Hotkeys v0v0
Docs
CodeRabbit
Cloudflare
AG Grid
SerpAPI
Netlify
OpenRouter
Neon
WorkOS
Clerk
Electric
PowerSync
Sentry
Railway
Prisma
Strapi
Unkey
CodeRabbit
Cloudflare
AG Grid
SerpAPI
Netlify
OpenRouter
Neon
WorkOS
Clerk
Electric
PowerSync
Sentry
Railway
Prisma
Strapi
Unkey
Menu
Getting Started
Guides
API Reference
Hotkeys API Reference
Hotkey Sequence API Reference
Key hold & held keys API Reference
Hotkey Recorder API Reference
Hotkey Sequence Recorder API Reference
Normalization & format API Reference
Examples
Hotkey Sequence Recorder API Reference

HotkeySequenceRecorderController

Class: HotkeySequenceRecorderController

Defined in: controllers/hotkey-sequence-recorder.ts:45

A Lit ReactiveController that records multi-chord sequences (Vim-style shortcuts).

Wraps the framework-agnostic HotkeySequenceRecorder class, managing store subscriptions and host update lifecycle automatically.

Example

ts
class ShortcutSettings extends LitElement {
  private recorder = new HotkeySequenceRecorderController(this, {
    onRecord: (sequence) => {
      this.sequence = sequence
      this.requestUpdate()
    },
    onCancel: () => {
      console.log('Recording cancelled')
    },
  })

  private sequence: HotkeySequence | null = null

  render() {
    return html`
      <button @click=${() => this.recorder.startRecording()}>
        ${this.recorder.isRecording ? 'Recording...' : 'Edit Sequence'}
      </button>
      ${this.recorder.steps.length
        ? html`<div>Steps: ${this.recorder.steps.join(' → ')}</div>`
        : nothing}
      ${this.recorder.recordedSequence
        ? html`<div>Recorded: ${this.recorder.recordedSequence.join(' → ')}</div>`
        : nothing}
    `
  }
}
class ShortcutSettings extends LitElement {
  private recorder = new HotkeySequenceRecorderController(this, {
    onRecord: (sequence) => {
      this.sequence = sequence
      this.requestUpdate()
    },
    onCancel: () => {
      console.log('Recording cancelled')
    },
  })

  private sequence: HotkeySequence | null = null

  render() {
    return html`
      <button @click=${() => this.recorder.startRecording()}>
        ${this.recorder.isRecording ? 'Recording...' : 'Edit Sequence'}
      </button>
      ${this.recorder.steps.length
        ? html`<div>Steps: ${this.recorder.steps.join(' → ')}</div>`
        : nothing}
      ${this.recorder.recordedSequence
        ? html`<div>Recorded: ${this.recorder.recordedSequence.join(' → ')}</div>`
        : nothing}
    `
  }
}

Implements

  • ReactiveController

Constructors

Constructor

ts
new HotkeySequenceRecorderController(_host, _options): HotkeySequenceRecorderController;
new HotkeySequenceRecorderController(_host, _options): HotkeySequenceRecorderController;

Defined in: controllers/hotkey-sequence-recorder.ts:76

Parameters

_host

ReactiveControllerHost

The Lit component that owns this controller.

_options

HotkeySequenceRecorderOptions

Configuration options for the sequence recorder.

Returns

HotkeySequenceRecorderController

Accessors

isRecording

Get Signature

ts
get isRecording(): boolean;
get isRecording(): boolean;

Defined in: controllers/hotkey-sequence-recorder.ts:58

Whether recording is currently active.

Returns

boolean

recordedSequence

Get Signature

ts
get recordedSequence(): HotkeySequence | null;
get recordedSequence(): HotkeySequence | null;

Defined in: controllers/hotkey-sequence-recorder.ts:68

Last committed sequence, or null if none.

Returns

HotkeySequence | null

steps

Get Signature

ts
get steps(): HotkeySequence;
get steps(): HotkeySequence;

Defined in: controllers/hotkey-sequence-recorder.ts:63

Chords captured in the current session.

Returns

HotkeySequence

Methods

cancelRecording()

ts
cancelRecording(): void;
cancelRecording(): void;

Defined in: controllers/hotkey-sequence-recorder.ts:133

Cancel recording without saving.

Returns

void

commitRecording()

ts
commitRecording(): void;
commitRecording(): void;

Defined in: controllers/hotkey-sequence-recorder.ts:138

Commit current steps as a sequence (no-op if empty).

Returns

void

hostConnected()

ts
hostConnected(): void;
hostConnected(): void;

Defined in: controllers/hotkey-sequence-recorder.ts:85

Subscribes to the recorder store and updates internal state when changes occur.

Returns

void

Implementation of

ts
ReactiveController.hostConnected
ReactiveController.hostConnected

hostDisconnected()

ts
hostDisconnected(): void;
hostDisconnected(): void;

Defined in: controllers/hotkey-sequence-recorder.ts:107

Unsubscribes from the recorder store and destroys the recorder instance to prevent memory leaks.

Returns

void

Implementation of

ts
ReactiveController.hostDisconnected
ReactiveController.hostDisconnected

setOptions()

ts
setOptions(options): void;
setOptions(options): void;

Defined in: controllers/hotkey-sequence-recorder.ts:117

Updates the recorder options.

Parameters

options

Partial<HotkeySequenceRecorderOptions>

Returns

void

startRecording()

ts
startRecording(): void;
startRecording(): void;

Defined in: controllers/hotkey-sequence-recorder.ts:123

Start recording a new sequence.

Returns

void

stopRecording()

ts
stopRecording(): void;
stopRecording(): void;

Defined in: controllers/hotkey-sequence-recorder.ts:128

Stop recording (same as cancel but without calling onCancel).

Returns

void

Edit on GitHub
Home
© 2026 TanStack LLC