Official & Unofficial STUDIO Keyboard Shortcuts List
Tags: studio
Published: 2022-08-14 06:16:00

You can use some keyboard shortcuts on the [STUDIO](https://studio.design/), 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)](https://help.studio.design/ja/articles/4062139-%E3%82%B7%E3%83%A7%E3%83%BC%E3%83%88%E3%82%AB%E3%83%83%E3%83%88%E4%B8%80%E8%A6%A7) 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5o20yrqav76vfpsgn2yc.gif)

#### Duplicate by drag&drop
![Duplicate by D&D](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lc3281w3r0qcaqiaf94u.gif) 


### 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wp5qgn9dcuszc0szmz6a.gif)
 

### 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7flzqf2lifephdjekys1.gif)

### 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)](https://zenn.dev/lima/articles/studio-keyboard-shortcuts)