We've just released some key keyboard commands for the Pen Editor that have been highly requested for years: the ability to move from editor to editor.
- Command (Mac) / Control (PC) + Option (Alt) + 1: Move focus to the HTML Editor
- Command (Mac) / Control (PC) + Option (Alt) + 2: Move focus to the CSS Editor
- Command (Mac) / Control (PC) + Option (Alt) + 3: Move focus to the JavaScript Editor
This way if you're the type that really likes to stay on your keyboard at all times, you don't have to lift your hands to move editors.
You can't see my keyboard, but here's a little video showing how I can hop between the editors. Even my cursor position is maintained!
Keyboard commands are tricky on the web because you're balancing multiple operating systems' keyboard commands with multiple browsers keyboard commands. Then at CodePen, we use CodeMirror which has its own set, and Emmet which adds more, and also offer alternate key bindings like Sublime Text and Vim bindings. So we really hope we aren't stomping on someone's very important keyboard command here, but so far so good.
Escape!
Having control over focus is an accessibility consideration too, so I'm also very pleased to say that you can now press the ESC key to move focus out of the editor and onto the settings button for that editor.
Hopefully, this makes the editors a bit more accessible and useful in that you can always get focus out of the editor with the keyboard (rather than being trapped in there with no way to get focus out).
Caveats
Vim key bindings make heavy use of the ESC key already for core functionality, so we skip our focus movement when those are active.