Configure custom keyboard shortcuts for web apps
Learn how to create custom shortcuts for web app users.
In addition to Retool's built-in keyboard shortcuts, you can define custom keyboard shortcuts on a per-app basis. Custom shortcuts can be a single character, combination of keys, or a sequence of key presses. You configure the action to trigger with JavaScript and can use many of the available methods in Retool to control components, queries, and more.
Click the gear icon in the left panel to open the App settings menu and select Custom shortcuts.
Define shortcut keys
To add a shortcut, click + Add new. Specify the shortcut keys to use and the JavaScript to run.
Available shortcut keys
A custom shortcut can include almost any keyboard character or symbol, such as or , and optional modifier keys, such as .
Shortcuts that use a single uppercase letter or secondary character, such as A or @, automatically require —you don't need to include it in the shortcut.
You can include modifier keys in custom shortcuts. Modifier keys are commonly used for keyboard shortcuts but are not required. Modifiers, named keys, and reserved symbols must be explicitly named when used in a shortcut.
| Modifier | Key |
|---|---|
shift | (PC and Mac) |
ctrl | (PC and Mac) |
alt | (PC) or (Mac) |
mod | (PC) or (Mac) |
command | (Mac only) |
super | (PC only) |
backspace | (PC and Mac) |
space | (PC and Mac) |
esc | (PC and Mac) |
plus | (PC and Mac) |
Certain modifiers automatically change based on the user's platform (e.g., mod) or you can explicitly define modifiers be the same (e.g., ctrl).
Key combination or sequence
You can define a combination or sequence of keys to trigger a shortcut.
- Combination: Separate the keys with
+(e.g.,alt+5). You must press the keys simultaneously to trigger the shortcut. Key combinations do not require a modifier key and you could use a combination of character keys. - Sequence: Separate keys with a space (e.g.,
w a s d). You must press the defined keys in sequential order to trigger the shortcut.
Sequence or combination shortcuts that contain or will apply anywhere in an app. Other modifier keys such as , , or will not trigger inside inputs, as they are needed for special characters and capitalization.
Configure JavaScript actions
You can write JavaScript actions for custom shortcuts that interact with almost every aspect of an app. The following examples trigger actions using Retool's built-in JavaScript utility methods.
| Keys | JavaScript | Shortcut |
|---|---|---|
j | utils.confetti() | to show confetti. |
J | utils.showNotification({title: 'Hello, World!'}) | to display a notification. |
ctrl+j | utils.copyToClipboard(moment().format('dddd')) | to copy the current day to the clipboard. |
r e | utils.openUrl('https://retool.com', { newTab: 'true', }) | then to open retool.com in a new tab. |
You can also use write shortcuts with complex logic to conditionally perform actions or chain together multiple actions. For example, you can define a single shortcut to cycle through all views in a Tabbed Container component.
tabbedContainer1.views.length === tabbedContainer1.currentViewIndex + 1
? tabbedContainer1.setCurrentViewIndex(0)
: tabbedContainer1.showNextVisibleView();