Formatting & Display Guide

TanStack Hotkeys includes utilities for turning hotkey strings into display-friendly labels. These utilities are framework-agnostic, but they pair naturally with Svelte templates and reactive UI.

formatForDisplay

import { formatForDisplay } from '@tanstack/svelte-hotkeys'

formatForDisplay('Mod+S')
formatForDisplay('Mod+Shift+Z')

import { formatForDisplay } from '@tanstack/svelte-hotkeys'

formatForDisplay('Mod+S')
formatForDisplay('Mod+Shift+Z')

formatWithLabels

import { formatWithLabels } from '@tanstack/svelte-hotkeys'

formatWithLabels('Mod+S')
formatWithLabels('Mod+Shift+Z')

import { formatWithLabels } from '@tanstack/svelte-hotkeys'

formatWithLabels('Mod+S')
formatWithLabels('Mod+Shift+Z')

Using Formatted Hotkeys in Svelte

Keyboard Shortcut Badges

svelte

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

<kbd class="shortcut-badge">{formatForDisplay(hotkey)}</kbd>

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

<kbd class="shortcut-badge">{formatForDisplay(hotkey)}</kbd>

svelte

<script lang="ts">
  import { formatForDisplay, createHotkey } from '@tanstack/svelte-hotkeys'

  let { label, hotkey, onAction } = $props()

  createHotkey(hotkey, () => onAction())
</script>

<div class="menu-item">
  <span>{label}</span>
  <span class="menu-shortcut">{formatForDisplay(hotkey)}</span>
</div>

<script lang="ts">
  import { formatForDisplay, createHotkey } from '@tanstack/svelte-hotkeys'

  let { label, hotkey, onAction } = $props()

  createHotkey(hotkey, () => onAction())
</script>

<div class="menu-item">
  <span>{label}</span>
  <span class="menu-shortcut">{formatForDisplay(hotkey)}</span>
</div>

Validation

import { validateHotkey } from '@tanstack/svelte-hotkeys'

const result = validateHotkey('Alt+A')

import { validateHotkey } from '@tanstack/svelte-hotkeys'

const result = validateHotkey('Alt+A')

formatForDisplay#

formatWithLabels#

Using Formatted Hotkeys in Svelte#

Keyboard Shortcut Badges#

Menu Items with Hotkeys#

Validation#

formatForDisplay

formatWithLabels

Using Formatted Hotkeys in Svelte

Keyboard Shortcut Badges

Menu Items with Hotkeys

Validation