Keyboard shortcuts

[johnsicili]

The two most time-saving shortcuts I use and would love to see in Webstudio are:

1. Open the components panel (Webflow uses A) – this is a minor thing but it really adds up over time
2. Wrap the currently selected item in a box (Webflow uses Command + Option + G) – this has an immediate big advantage because it takes a lot of clicks to add a new box and move the current component in the box.

UPDATE: Here's the official doc for keyboard shortcuts. More will be added over time.

And here's a list of other Webflow keyboard shortcuts that could be added in the future (I personally think most could be added well into the future):

• Show shortcuts
• Show Pages panel
• Show Asset Manager
• Expand/collapse Style panel sections
• Move before previous element
• Move after next element
• Move before sibling element
• Move after sibling element
• Move before parent element
• Move after parent element
• Select parent/child element
• Select sibling element
• Select next/previous element
• Add a token to selected element
• Rename last token on selected element
• Remove last token on selected element
• Expand/collapse panel sections

[kof]

More existing once:

Preview (cmd + shift + p)
Move to element previous/next when navigator is focused (arrows, tab, shift+tab)
Expand navigator item (right arrow)
Expand all navigator item children (option + click), needs to also allow option + arrow right
Collapse navigator item (left arrow)
Breakpoints switch: number, e.g. 1 switches to the first one

[xstortionist]

Move Selected Element Back (cmd + [)
Move Selected Element Forward (cmd + ])

[kof]

why not using arrow keys? cmd+arrow

[kof]

it probably supports both

[kof]

Oh does it support [] as a way to move while staying inside the parent and arrow keys as a way to also go beyond parent?

[kof]

Alright [], left/right as a way to move within a parent
up/down - move beyond parent

[xstortionist]

hotkey could be anything, I'm just suggesting the same ones I'm use to in Photoshop. You should be able to move the element out of the parent and into parent with the hotkey. You should also have ability to select entire parent and move it along with it's children as well. Attached is a video from Adobe Photoshop that shows how the hotkey works in the layers panel.

Move.Recording.mp4

[MilanBgd]

Some other suggestions:

1. To be able to add component thanks to shortcuts => Cmd+K to open the search bar, ability to search an element and add it to the canvas (like Webflow, I find it very useful). I know you will work on this feature.

2. Shortcut : on webflow, you can have a shortcut like Cmd+Entry to add class (you don't need to clic on the input's class). I find it very useful too.

3. Shortcut : it would be nice to have a shortcut to open Expression Editor or HTML Editor to fullscreen (Proposition : Shift+Cmd+F on Mac for example)

[cbemstar]

I came here looking for the shortcut to add components quickly and adding classes, glad that someone's mentioned it. I am currently using divhunt as Webflow alternative and they don't have these either and is very annoying.

[kof]

100% agree, subscribe this issue webstudio-is/webstudio#1696

[kof]

Big news, most of shortcuts are launched https://x.com/getwebstudio/status/1868724527942737992