Skip to main content

​
Constructor options

The HotKeyPad constructor accepts an optional configuration object with the following properties:

​
closeKey

​
closeKey
string
default:"Escape"
The keyboard key used to close the command palette.
const hotkeypad = new HotKeyPad({
  closeKey: 'Escape'
});

​
placeholder

​
placeholder
string
default:"Search command"
Placeholder text displayed in the search input field.
const hotkeypad = new HotKeyPad({
  placeholder: 'Search commands...'
});

​
emptyMessage

​
emptyMessage
string
default:"No commands found"
Message displayed when the search returns no results.
const hotkeypad = new HotKeyPad({
  emptyMessage: 'No matching commands'
});

​
activationLetter

​
activationLetter
string
default:"K"
The letter key combined with Cmd (macOS) or Ctrl (Windows/Linux) to open the palette. For example, "K" creates Cmd+K or Ctrl+K.
const hotkeypad = new HotKeyPad({
  activationLetter: 'P' // Creates Cmd+P or Ctrl+P
});

​
Full example

import HotKeyPad from 'hotkeypad';

const hotkeypad = new HotKeyPad({
  closeKey: 'Escape',
  placeholder: 'Type a command...',
  emptyMessage: 'No results found',
  activationLetter: 'K'
});

​
HTML data attributes

You can also configure HotKeyPad using HTML data attributes on the root element. These attributes take precedence over constructor options.

​
Required element

HotKeyPad requires an element with the id hotkeypad to exist in the DOM: 
<div id="hotkeypad"></div>
If this element is not found, the constructor will throw an error: 
Error: HotKeyPad instance not found in the DOM

​
data-placeholder

​
data-placeholder
string
Sets the placeholder text for the search input. Overrides the placeholder constructor option.
<div id="hotkeypad" data-placeholder="Search documentation..."></div>

​
data-activation-letter

​
data-activation-letter
string
Sets the activation letter key. Overrides the activationLetter constructor option. Value is automatically converted to uppercase.
<div id="hotkeypad" data-activation-letter="P"></div>

​
data-close-key

​
data-close-key
string
Sets the key used to close the palette. Overrides the closeKey constructor option. Value is automatically converted to uppercase.
<div id="hotkeypad" data-close-key="Escape"></div>

​
Example with data attributes

<div 
  id="hotkeypad" 
  data-placeholder="Find a command..."
  data-activation-letter="K"
  data-close-key="Escape"
></div>

// Data attributes take precedence
const hotkeypad = new HotKeyPad({
  placeholder: 'This will be overridden'
});
// Actual placeholder will be "Find a command..."

​
Dark mode support

HotKeyPad automatically detects dark mode by observing the dark class on the root element: 
<!-- Light mode -->
<div id="hotkeypad"></div>

<!-- Dark mode -->
<div id="hotkeypad" class="dark"></div>
When the dark class is present, icon colors are automatically adjusted from black to white. You can provide a custom footer by including a template element with the id hotkeypad-footer: 
<template id="hotkeypad-footer">
  <p>Press <kbd>Enter</kbd> to execute</p>
  <p>Custom footer content</p>
</template>

<div id="hotkeypad"></div>
If no custom footer template is found, HotKeyPad will render the default footer with keyboard navigation hints.

Build docs developers (and LLMs) love

Get started for freeTalk to us