Chrome Extensions for CodePen Keyboard Shortcuts

Codopen

The Codopen extension allows for quick switching to Debug View. It adds a button, but also a keyboard command (Command/Control+Shift+I) that pops open a new tab with the current Pen in Debug View.

codeTabber

The codeTabber extension provides keyboard commands for switching between the editor panels. Control+> moves to the next editor (e.g. HTML to CSS), Control+< moves to the previous editor (e.g. JavaScript to CSS).

It just changes focus, so your cursor position is maintained (niiiice).

Why doesn't CodePen itself offer these?!

We'd like to! But we gotta tell ya, keyboard commands on the web are tricky stuff, particularly on CodePen. That's why extensions like this are kinda awesome - they are opt-in so you know exactly what you are getting into.

To illustrate why keyboard commands are tricky - there are operating system level keyboard commands which of course differ from user to user. Different browsers have different commands. Both of those have some you can override, and some you cannot. On CodePen, we use CodeMirror, which has a robust set of keyboard commands of it's own. Also we use Emmet, which has still more.

Then, users install things on their machines. Some people use spaces on macOS, and some don't. Some people have color pickers and Twitter clients and screen capture things and all sorts of stuff that have keyboard shortcuts people rely on.

Ugh I know that sounds like a bunch of whining. But never fear! Our current discussions around this revolve around customizability. We can try to pick smart defaults, but then allow you to turn them on or off or change the command. That would go a long way in helping everybody have working commands to their liking. No promises though, we're just talking 😉

If you really really need a particular command, one way to do it is to build an extension!