DEV Community

Ayumi Sato
Ayumi Sato

Posted on • Updated on

Official & Unofficial STUDIO Keyboard Shortcuts List

You can use some keyboard shortcuts on the STUDIO, the online website builder. Keyboard shortcuts reduce mouse and trackpad operations, and you can build pages faster. This article introduces official shortcuts and also unofficial ones, which I have found.

For Windows, replace ⌘ with Ctrl.

Officially announced shortcuts

The shortcuts listed in the STUDIO U (Japanese article) are as follows.

Box editing actions

It works on the editor canvas or layer panel.

Action Keys
Copy ⌘ + C
Cut ⌘ + X
Paste ⌘ + V
Delete delete
Group ⌘ + G
Ungroup ⌘ + shift + G
Create list ⌘ + L
Create symbol ⌘ + J

Box selection actions

It works when selecting some element on the editor canvas or layer panel.

Action Keys
Select multiple items shift + click
Select child box return (enter)
Select parent box esc
Select next box tab
Select previous box shift + tab

By mastering selections, you can increase your work efficiency by applying the same state to multiple elements in a single operation. Also, selecting parent and child boxes from the keyboard allows you to go to the desired layer without opening and closing layers.

Editor action

Action Keys
Undo ⌘ + Z
Redo ⌘ + shift + Z
Zoom in/Out + / -
View in 100% ⌘ + 0
Enable / Disable content editing mode ⌘ + 0

Undo shortcuts will let you return to the previous state instantly. In 100% view, the canvas will be displayed the same size as the actual website, reducing impression differences.

Unofficial shortcuts

The following shortcuts are not on the official shortcut list above, but I have confirmed that they work. I discovered these shortcuts by pressing keys that I thought might work.

Box editing actions

Action Keys
Duplicate ⌘ + D
Duplicate by D&D option (alt) + D&D

Duplicate

Duplicate

Duplicate by drag&drop

Duplicate by D&D

Panel actions

Opens/closes each panel.

Action Keys
Open the Pages Panel ⌘ + 1
Open the Layers Panel ⌘ + 2
Open the Add Panel ⌘ + 3
Open the Styles Panel ⌘ + 4
Open the Box Settings Panel ⌘ + 5

Panel actions

Layer actions

By clicking the layer toggle > with holding down the option key, it will open and close all the layers under it. Knowing this shortcut made all the difference in my working speed!

Action Keys
Open/close all Layers option (alt) + click

Open/close all Layers

Page actions

Go back to the page that was opened before the page you are currently opening. These might be Google Chrome's shortcuts.

Action Keys
Previous Page ⌘ + ←
Next Page ⌘ + →

Richtext editing

You can use these shortcuts in CMS article bodies and rich text boxes. In addition to the shortcuts below, you can use markdown as well.

Action Keys
Make the selection bold ⌘ + B
Italicize the selection ⌘ + I
Underline the selection ⌘ + U
Make the selection strikethrough ⌘ + shift + S
Add the link to the selection ⌘ + K

If you know any other shortcuts, please let me know!

Original Post: STUDIOの公式&非公式キーボードショートカット一覧 (Japanese article)

Top comments (0)