They are quite a few key commands you can use in CodePen within the editor. Things like Command-A (Mac) or Control-A (PC) “select all” the text within an editor, like you would expect. Many of the key bindings come directly from CodeMirror, the software we use to power the text editor on CodePen.

Opening the Shortcuts Menu

You can see the shortcuts available for your computer’s operating system by clicking “⌘ Keys” (on Mac) or “Shortcuts” (on Windows and other PCs) at the bottom left of the editor view.

Changing Your Key Bindings

CodeMirror offers some alternative key bindings that we, in turn, make available to you. The default key bindings are plenty powerful, but if you prefer, they can be mapped to more closely emulate the bindings in Sublime Text or Vim.

To change them (for yourself, as a logged in user), follow these steps:

• Visit your Editor Settings
• Under “Keybindings”, select your favorite option

We don’t currently offer any way to customize specific key bindings or offer any more fine-grained control.

Command Conflicts

Even with the editor open, CodePen isn’t the only thing with key commands on your computer. In fact, CodePen is pretty low down the totem pole of control hierarchy.

• Your operating system has key bindings that generally “win” no matter what. For instance, Command-Tab on a Mac brings up the application switcher.
• Other applications you run can have key bindings that can “win”. For instance, the window manager SizeUp allows you to bind commands for moving windows around the screen. If you bind Command-RightArrow to one of those commands, that will override CodeMirror’s default Command-Right, which moves the cursor to the end of the line.
• Your browser has key bindings. Some of them cannot be overridden, like Command-Q for quitting the browser. Some of them can be overridden and it makes sense to do so. For instance, Command-S does save your Pen while in the editor. Some of them can be overridden and it would be obnoxious for us to do so, like changing what Command-Number does (backstory).
• CodeMirror has its own key bindings.
• Your personal settings can override some of those key bindings to another style.
• We make Emmet available which has its own collection of key bindings.
• We have some special CodePen key bindings.

Known Conflicts

• Shift+Tab in the default bindings does indentation cleanup, but if you change to Sublime Text, that command becomes “indent less” and there is no alternative for the cleanup. You can trigger the cleanup directly from the console though. e.g. select code in HTML editor and do CP.htmlEditor.editor.indentSelection("smart");

Normal Key Bindings

The default key bindings in the editor come from CodeMirror. Since we try and keep up to date on versions of CodeMirror it makes the most sense to reference that documentation directly rather than us trying to keep this page in sync.

Sublime Text Key Bindings

Here is the CodeMirror documentation for the Sublime Text key bindings.

Vim Key Bindings

Here is the CodeMirror documentation for the Vim key bindings.

Key Bindings Outside the Editor

You can press the left and right arrow keys to paginate forward and backward on pages that display a grid of Pens.