Webstudio
Log in

Join the Webstudio community

Updated 3 months ago

why is this shortcut missing? (focus Style Sources)

At a glance

The community member notes that while there are shortcuts for adding elements in Webstudio, there is no shortcut for adding style tokens to elements. The community members discuss adding a shortcut for this, with one member suggesting that cmd+k could be used. Another member mentions that a shortcut to focus the "Style Sources" field, similar to Webflow's cmd+enter shortcut, would be helpful. The community members agree that a shortcut for adding style tokens should be added.

The community members also discuss keyboard shortcuts for navigating the element tree in Webstudio, comparing them to the shortcuts in Webflow. One member provides details on how to use the keyboard to focus the Navigator and move elements around.

The summary notes that the community members have not explicitly marked an answer, but have discussed and agreed on adding a shortcut for adding style tokens to elements in Webstudio.

OOviS
There are 2 main things you do while building a website in Webstudio:
  1. add elements ✅ (A & Type or CMD+K & Type)
  2. add style tokens to elements ❌ no shortcut
Seems you have shortcuts for everything else but this. 🤔 Any particular reason for this?
B
O
O
10 comments
BBogdan
We will integrate token search in cmd+k soon
OOleg Isonen
@Bogdan he is talking about adding tokens to an instance after adding instance
BBogdan
cmd+k could add tokens
OOleg Isonen
yeah, I think even when we add it, people will still come from webflow experience and demand this shortcut, we should just add it
BBogdan
Alright, we could add shortcut
OOviS
Sorry I wasn't clearer in my initial message. A shortcut to focus the form field called "Style Sources" is what I was looking for. - Instead of having to click with my mouse inside of the field, have the CMD+Enter shortcut like Webflow (screenshot)
Attachment
CleanShot_2025-03-18_at_10.11.50.jpg
OOviS
And, of course, ESC should de-focus the field and switch back focus tothe Navigator, so I can select other elements using the keyboard, traversing the Element Tree.
Which reminds me, there's no shortcut for focusing the Navigator... You can open it via a shortcut (z) but the focus is not on it when opened.
Webflow, for all its faults, did nail this part. I can scaffold a whole page without touching the mouse, if all I'm doing is adding elements and assigning classes to them.
  1. Add element to page
  2. Focus Class/Token/Style Sources field, start typing to seach existing ones or add new ones
  3. Focus the Navigator, move elements around:
Move element before previous element: [ or Command + Down (Mac) or Control + Down (Windows)
Move element after previous element: ] or Command + Up (Mac) or Control + Up (Windows)
Moves element before sibling element within current parent: Command + [ or Command + Left (Mac) or Control + Left (Windows)
Moves element after sibling element within current parent: Command + ] or Command + Right (Mac) or Control + Right (Windows)
Move element before parent element: Command + Shift + Up (Mac) or Control + Shift + Up (Windows)
Move element after parent element: Command + Shift + Down (Mac) or Ctrl + Shift + Down (Windows)
  1. Select a new element in the navigator and repeat from step 1.
OOleg Isonen
Just tried focusing navigator in webflow and it didn't work, how do you do it?
OOviS
It's always the default focus, unless you press ESC to get out of it:
  • CMD+Enter = focuses class field then ESC back to navigator. ESC again to de-focus navigator.
  • CMD+E = add element / component, which gets immediately focused. ESC to de-focus navigator.
  • Editing a property value like width? ESC brings you back to focused on the element of that property. ESC again to de-focus navigator.
But beware, the shortcuts for navigating are different than in WS, so you might have gotten the wrong idea that the navigator wasn't focused when it actually was:
  • left/right arrows select next/previous sibling.
  • up arrow = focus parent
  • down arrow = focus first child
Hitting right arrow on the last sibling does nothing, as does hitting left on the first sibbling.
Hitting down on an element with no children does nothing.
OOleg Isonen
@OviS cmd+enter shortcut was just released to production 🎉
Add a reply
Sign up and join the conversation on Discord