Official and Unofficial STUDIO Keyboard Shortcuts List

This article is also available in English (dev.to)

Keyboard shortcuts are enabled in the STUDIO editor.
By utilizing keyboard shortcuts, you can reduce mouse and trackpad operations and build pages efficiently.
In this article, I will introduce official and unofficial shortcuts.

For Windows, please replace ⌘ with Ctrl.

Official Shortcut List

The shortcuts listed in the STUDIO U Shortcut List are as follows:

Box Editing

Works on the editor canvas or layer panel.

Action	Shortcut
Copy	⌘ + C
Cut	⌘ + X
Paste	⌘ + V
Delete	delete
Group	⌘ + G
Ungroup	⌘ + shift + G
Create List	⌘ + L
Create Symbol	⌘ + J

Box Selection

Works when an element is selected on the editor canvas or layer panel.

Action	Shortcut
Multiple selection	shift + click
Select child box	return (enter)
Select parent box	esc
Select next box	tab
Select previous box	shift + tab
Reorder multiple boxes in a group	⌘ + Arrow keys
Set movement distance for fixed/absolute boxes to 10px	Shift + Arrow keys

Mastering multiple selection allows you to apply the same state to multiple elements in a single operation, improving work efficiency.
Also, being able to select parent or child boxes from the keyboard allows you to reach the target layer without opening or closing the layer panel.

Editor Operations

Action	Shortcut
Undo	⌘ + Z
Redo	⌘ + shift + Z
Zoom In/Out	+ / -
100% Display	⌘ + 0
Enter/Exit Content Edit Mode	C

If you perform an unintended operation, you can instantly return to the previous state using the "Undo" shortcut.
In 100% display, the canvas is shown at the same size as the actual website, reducing differences in impression caused by the view.

Unofficial Shortcut List

The following shortcuts are not listed in the official list above, but I have confirmed that they work. I discovered them by trying out keys that seemed likely to be shortcuts based on intuition.

Box Editing

Action	Shortcut
Duplicate	⌘ + D
Duplicate at drag-and-drop destination	option (alt) + drag-and-drop

Duplicate with ⌘ + D

Duplicate with option (alt) + drag-and-drop

Panel Operations

You can open each panel. If the panel is already open, pressing the shortcut will close it.

Action	Shortcut
Open Page Panel	⌘ + 1
Open Layer Panel	⌘ + 2
Open Style Panel	⌘ + 3
Open Add Panel	⌘ + 4
Open Box Settings Panel	⌘ + 5

Note: The shortcuts for the Style Panel and Add Panel were swapped after the video was recorded, so there is a discrepancy in the operation shown.

Layer Operations

Knowing this shortcut will likely make a significant difference in your work efficiency!
If you click a layer toggle (>) while holding the option key, all nested layers will be expanded or collapsed.

Action	Shortcut
Expand/collapse all layers	option (alt) + click

Page Operations

In the editor, you can go back to the page you were viewing just before the current one, or move forward again after going back.

Action	Shortcut
Go back to the previous page	⌘ + ←
Go forward to the next page	⌘ + →

Rich Text Operations

These shortcuts can be used in the CMS article body or within rich text boxes. In addition to the following shortcuts, Markdown syntax is also supported.

Action	Shortcut
Bold selected text	⌘ + B
Italicize selected text	⌘ + I
Underline selected text	⌘ + U
Strikethrough selected text	⌘ + shift + S
Link selected text	⌘ + K

If you have information about any other shortcuts, please let me know!

Special Thanks:
Thank you, Iccha-san, for providing information about the right panel and expanding/collapsing all layers 🙏
Thank you, Otaro-san, for providing information about duplicating with option (alt) + drag-and-drop 🙏