Page Editor - Keyboard Shortcuts

jon2 · 2021-01-16T14:14:22.472Z

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.

mikeloc · 2021-01-16T14:43:44.201Z

Hey there, @jon2… here you go…

shortcuts794×569 36.8 KB

Best…
Mike

twillcs · 2021-01-16T14:46:10.952Z

Bubble hotkeys OMG Tips

Five years. Five years it took me to discover that Bubble has a bunch of hotkeys that I’ve never used [image] Leaving this here as a tip in case anyone’s as slow as me to pick this up efficient Bubbling, here I come!

jon2 · 2021-01-16T14:50:28.769Z

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

jon2 · 2021-01-16T14:54:16.546Z

Bubble hotkeys OMG

Five years. Five years it took me to discover that Bubble has a bunch of hotkeys that I’ve never used

@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.

jon2 · 2021-01-16T15:07:21.853Z

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.

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

malcolm · 2021-01-16T19:41:40.215Z

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!

malcolm · 2021-01-16T19:42:32.890Z