How to add keyboard shortcuts to your Bubble App

Keyboard shortcuts have been a natural part of desktop applications since… well, forever. For web applications it’s really in the last few years that they’ve started to become commonplace enough for users to actually remember to use them. Not to be confused with your browsers built-in shortcut keys of course.

Bubble doesn’t at the time of writing have a built-in support for keyboard shortcuts, but you can get there with a plugin.

The Air Keyboard Shortcuts plugin from the team over at Zeroqode will do the job for you. It’s built on the lightweight Mousetrap Javascript library which adds about 5kb to the first page load.

Setting up the keyboard shortcuts

Install the plugin as usual from Bubble’s plugin store, and then go to the page where you want to use this. This plugin requires that you place an element on the page. You’ll find it under the same name as the plugin:

Place the element anywhere on the page – don’t worry, it won’t be visible to your users. You need to make sure that it’s not invisible on page load, so make sure you don’t place it inside of a hidden group inadvertently as it won’t work.

Open up the element settings to set up the keyboard shortcuts. Note that you’ll need one element per shortcut that you want to set up.

Available keys

The available keys that you can listen to are as follows:

Key typeAvailable keys
Modifier keysShift, ctrl, alt, or meta (use mod to cover both ctrl on PC and cmd on Mac)
Special keysBackspace, tab, enter, return, capslock, esc, escape, space, pageup, pagedown, end, home, left, up, right, down, ins, del, and plus
Regular keysReference their normal buttons, like: a, /, $, *, or =.

Combination vs sequence

You can set up the plugin to both listen to combinations of keys, or keys that are entered in sequence (no less than one second apart), and even combine the two.

  • To set up a combination use the + sign to combine the two keys: mod+enter
  • To set up a sequence use space to combine the two keys: mod enter
  • To use a both, use both signs: mod mod+enter

The allow globally setting

Allow globally means that the keyboard shortcut will trigger even if you are focused on a field where you may not want it to. For example, if you set up a keyboard shortcut for the enter key, you may not want it to run while you are editing multi-line text.

Conflict with browser shortcuts

If you set up a shortcut that is in conflict with already existing browser shortcuts, both will run in most cases. But note that the plugin doesn’t override the browser. Setting up a keyboard shortcut for cmd+q on a Mac is probably not going to give you the result you were hoping for.

Happy clicking!


More Posts

Custom states VS URL parameters for navigation in Bubble

A lot of Bubble tutorials and guides describing page navigation default to using custom states for hiding and showing Groups. While states will work just fine in many cases, it has its limitations and shouldn’t be used simply because it’s

Bubble vs WordPress – what’s the difference?

When people first hear about Bubble, they often quickly draw the comparison to WordPress. It’s not that far-fetched – after all, they’re both platforms that allow non-coders to set up a website, create content and publish it for the world

How to do complex calculations in Bubble

The Bubble expression editor – you know… this one: … is pretty good! But if you’re trying to do more complex mathematical expressions, you’ll find that the built-in editor has its limits. You can easily set up basic arithmetic like

How to run Javascript from an action in Bubble

Javascript is a pretty easy programming language and can greatly extend Bubble’s features, like copying text to the clipboard. If you’re not fluent in computerese, make sure to visit the Bubble forum, where you’ll always find someone happy to help

Leave A Reply

Your email address will not be published. Required fields are marked *


Useful articles and tips

Useful articles and tips

Join the mailing list to get guides, opinions and articles on Bubble, no-code, automation and the tech industry.

You have Successfully Subscribed!

Share This