Bubble Hotkeys Cheat Sheet & Other Tips! (Updated on 27/07/2024)

Tips
1

Here’s a cheat sheet of essential Bubble hotkeys that will supercharge your development workflow and save you tons of time. (Few I collected from this forum.)

Bookmark this page as I will update it whenever new items are added.

Bubble Hotkeys Table

S.No Hotkey Description
1 Ctrl+P Automatically load your app preview.
2 Ctrl+T Switch between the Design, Workflow, and Data tabs.
3 CMD + Click Useful for selecting nested elements.
4 CMD + Drag Helps maintain symmetry when resizing.
5 Shift + Drag Ensures proportional resizing of elements.
6 Ctrl+C Standard copy function for elements and actions.
7 Ctrl+V Standard paste function for elements and actions.
8 Ctrl+X Standard cut function for elements and actions.
9 Ctrl+Shift+C Useful for copying styles and formatting to apply elsewhere.
10 Ctrl+Shift+V Applies copied formatting to the selected element.
11 Ctrl+D Rapidly duplicate elements for quick prototyping.
12 Ctrl+K Show/Edit workflow for the current element.
13 Ctrl+A Select all elements on the page.
14 Ctrl+G Group the selected elements and move them in a new group.
15 Ctrl+E Center current element relatively to the parent.
16 Ctrl+B Turn this text element bold.
17 Ctrl+I Turn this text element italic.
18 Ctrl+U Turn this text element underlined.
19 Cmd + Shift + + / Cmd + Shift + - Zoom in and out on the canvas.
20 Tab Move between elements on the canvas and in the elements tree across all layout options.
21 Enter Jump from parent to child in the hierarchy.
22 Shift + Enter Go back to the parent level from the child.
23 Arrow Keys Change order of elements in both the elements tree and canvas (up/down in column, left/right in row). In fixed layouts, nudges the position.
24 Cmd + / (US), Cmd + - (France), Cmd + ö (Germany) Edit dynamic data quickly with this shortcut.
25 Tab (during creation) Quickly tab through inputs when creating a new field or custom state to insert data more efficiently.

Other Items:-

  • you can start editing with the new framework by adding the parameter &newautorun=true to your Bubble app editor URL. This enables a faster and more efficient app editing experience. Example: https://bubble.io/page?name=index&id=[yourappname]&tab=tabs-1&newautorun=true
4 Likes
2

You can also find some (but not all) by clicking the help icon in the top right, then ‘Shortcuts list’! Thanks for finding the ones that aren’t mentioned in the editor :grin:

CleanShot 2024-07-26 at 13.24.00@2x
CleanShot 2024-07-26 at 13.24.00@2x1196×1036 114 KB

2 Likes
3

@georgecollier Thanks for the tip! I’ll keep an eye out for any additional shortcuts not mentioned there and update here. Appreciate the guidance! :smile:

4

Added this
you can start editing with the new framework by adding the parameter &newautorun=true to your Bubble app editor URL. This enables a faster and more efficient app editing experience.

Example: https://bubble.io/page?name=index&id=[yourappname]&tab=tabs-1&newautorun=true

Note: This improvement is still undergoing testing, so you may experience some bugs. Any visual discrepancies in the editor shouldn’t affect your apps in production.