Page Editor - Keyboard Shortcuts

Questions
1

Hi all,

Does anyone know if there is a list of keyboard shortcuts (informal or published) for the editor? If not, perhaps others can contribute here. I see lots of examples to incorporate keyboard shortcuts into user apps, but not the editor.

For example, I struggled for years moving multiple elements down the page and keeping their horizontal alignment resorting to absurd techniques like holding the pressing the down arrow for long periods of time. I recently got the bright idea to hold the SHIFT key while dragging multiple elements (as is common in various graphical software tools) and lo and behold the elements snapped to their horizontal alignment. I felt so silly for not doing this earlier, but realized I hadn’t seen any documentation on the matter.

1 Like
2

Hey there, @jon2… here you go…

shortcuts
shortcuts794×569 36.8 KB

Best…
Mike

3 Likes
3
3 Likes
4

Can’t believe I missed this! Thank you.

It is very conveniently located in the editor, and perhapsits because I’m blind, but I did not see it in the learning or reference documentation (or even mentioned there). If so, @bubble this is a shame for anyone learning trying to learn or trying to find out this information because

  • its not indexed in a google search
  • not included part of the ‘curriculum’ when learning about bubble
2 Likes
5

@eve wondering if this info (or at least a reference to its existence) can be added to the learning and support materials. Should be core knowledge for any ‘serious’ bubbler. As an example: Googling ‘bubble.io keyboard shortcuts’ for me returned nothing.

6

Pasting the list of keyboard shortcuts from the bubble editor for better visibility and search engine indexing.

I also wanted to include a handy keyboard shortcut reference app I built for myself. This will create a slim popup that you can ‘dock’ to the right of your editor while learning the keys.

App: Keyboard Shortcut Quick Reference Sheet

These keyboard shortcuts are likely to be a very valuable timesaving tool for people in this forum. :slight_smile:

Ctrl+P
Preview your app, equivalent to clicking on PREVIEW

Ctrl+T
Switch between the Design, Workflow and Data tabs

CMD + Click
Select the element under the current element

CMD + Drag
Resize the current element symetrically

Shift + Drag
Resize and keep proportions constant

Ctrl+C
Copy current element, action or event

Ctrl+V
Paste current element, action or event

Ctrl+X
Cut current element, action or event

Ctrl+Shift+C
Copy current element’s formatting

Ctrl+Shift+V
Paste formatting to current element

Ctrl+D
Duplicate current element

Ctrl+K
Show/Edit workflow for the current element

Ctrl+A
Select all elements on the page

Ctrl+G
Group the selected elements and move them in a new group

Ctrl+E
Center current element relatively to the parent

Ctrl+B
Turn this text element bold

Ctrl+I
Turn this text element italic

Ctrl+U
Turn this text element underlined

2 Likes
7

Hello Jon! Thanks for reaching out. We’re actively working on ways to make our documentation more comprehensive while providing more useful education resources for users. As of right now, we do have a small section in the Bubble manual outlining where these shortcuts are listed. I’ve also noted with the team that we can do a better job explicitly listing these shortcuts. As we are actively updating the documentation, this is definitely useful feedback for us.

We appreciate it!

2 Likes