keyboard-shortcut-manager | Vaadin

A modern library for managing keyboard shortcuts in a Vaadin application.

VCF Keyboard Shortcut Manager

npm version Published on Vaadin Directory

A modern library for managing keyboard shortcuts in a Vaadin application (or any framework).

  • Dispatch custom events from keyboard shortcuts.
  • Bind multiple keyboard commands to a single event listener.
  • Easily create simple keyboard shortcut help dialog/popup.
  • Compatible with web components and Shadow DOM.
  • Implemented in TypeScript.

This is a wrapper for the Tinykeys library.




npm i @vaadin-component-factory/vcf-keyboard-chortcut-manager


Create an array of KeyboardShortcut definitions:

const shortcuts: KeyboardShortcut = [
    keyBinding: 'Control+Shift+?',
    handler: 'help-dialog',
    description: 'Opens the help dialog.'

Then create a KeyboardShortcutManager instance and subscribe your shortcuts to activate them:

const ksm = new KeyboardShortcutManager({ shortcuts, helpDialog: true });


Keybinding Syntax

Refer to the following links for more information on the keybinding syntax:


Apache-2.0 License


Link to this version
ImportedReleased 17 May 2022MIT License
Framework Support
Vaadin platform 10+
Browser Independent
Install with
npm install @vaadin-component-factory/keyboard-shortcut-manager"@23.0.0"
Run the above npm command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 23.0.0


  • @vaadin-component-factory/vcf-enhanced-dialog#23.0.0
  • @vaadin/grid#23.0.10
  • query-selector-shadow-dom#^1.0.0
  • tinykeys#^1.4.0