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
API Reference
Hotkeys API Reference
Hotkey Sequence API Reference
Key Hold API Reference
Held Keys API Reference
Hotkey Recorder API Reference
Hotkey Sequence Recorder API Reference
Format for Display API Reference
Format for Display API Reference

formatKeyForDebuggingDisplay

Function: formatKeyForDebuggingDisplay()

ts
function formatKeyForDebuggingDisplay(key, options): string;

Defined in: format.ts:243

Formats a single key name for debugging/devtools display.

Unlike formatForDisplay which formats full hotkey strings for end-user UIs, this function formats individual key names (from event.key) with rich platform-aware labels suitable for debugging tools and developer-facing displays.

Features:

  • Modifier keys show their platform role (e.g., "Mod (Cmd)" for Meta on Mac)
  • On macOS, modifier keys are prefixed with their symbol (e.g., "⌘ Mod (Cmd)")
  • Special keys use display symbols (ArrowUp -> "↑", Escape -> "Esc")
  • Regular keys pass through unchanged

Parameters

key

string

A single key name (e.g., "Meta", "Shift", "ArrowUp", "A")

options

FormatKeyDebuggingOptions = {}

Formatting options

Returns

string

A formatted label suitable for debugging display

Example

ts
// On macOS:
formatKeyForDebuggingDisplay('Meta')    // '⌘ Mod (Cmd)'
formatKeyForDebuggingDisplay('Control') // '⌃ Ctrl'
formatKeyForDebuggingDisplay('Alt')     // '⌥ Opt'
formatKeyForDebuggingDisplay('Shift')   // '⇧ Shift'

// On Windows:
formatKeyForDebuggingDisplay('Control') // 'Mod (Ctrl)'
formatKeyForDebuggingDisplay('Meta')    // 'Win'

// Special keys (all platforms):
formatKeyForDebuggingDisplay('ArrowUp') // '↑'
formatKeyForDebuggingDisplay('Escape')  // 'Esc'
formatKeyForDebuggingDisplay('Space')   // '␣'

// Regular keys pass through:
formatKeyForDebuggingDisplay('A')       // 'A'

// With source: 'code', values pass through unchanged:
formatKeyForDebuggingDisplay('MetaLeft', { source: 'code' })  // 'MetaLeft'
formatKeyForDebuggingDisplay('KeyA', { source: 'code' })      // 'KeyA'