Total surprise to me, but we get asked to support “Vim bindings” all the time here at CodePen. Probably one of our top feature requests. By Vim, I mean literally Vim, the command-line text editor. And by bindings, I mean keyboard commands that do specific things in the editor.

Fortunately for us, CodeMirror, the code editor library we use, has a special add-on for Vim bindings. So we’ve integrated that into the editor. You can turn it on from your settings:

As they say:

Because CodeMirror’s internal API is quite different from Vim, they are only a loose approximation of actual vim bindings, though.

But our own Vim users here on Team CodePen vouch for the fact that it works pretty well.

Here’s a bunch of commands that work:

Key Action Followed by a enter insertion mode after current character text, ESC b back word c change command cursor motion command d delete command cursor motion command e end of word f find character after cursor in current line character to find h move left one character i enter insertion mode before current character text, ESC j move down one line k move up one line l move right one character o open line below and enter insertion mode text, ESC p put buffer after cursor r replace single character at cursor replacement character expected s substitute single character with new text text, ESC u undo w move foreward one word x delete single character y yank command cursor motion command z position current line CR = top; “.” = center; “-“=bottom A enter insertion mode after end of line text, ESC B move back one Word C change to end of line text, ESC D delete to end of line E move to end of Word F backwards version of “f” character to find G goto line number prefixed, or goto end if none H home cursor – goto first line on screen I enter insertion mode before first non-whitespace character text, ESC J join current line with next line L goto last line on screen M goto middle line on screen O open line above and enter insertion mode text, ESC P put buffer before cursor Q leave visual mode (go into “ex” mode) R replace mode – replaces through end of current line, then inserts text, ESC S substitute entire line – deletes line, enters insertion mode text, ESC W forward Word X delete backwards single character 0 move to column zero 1-9 numeric precursor to other commands [additional numbers (0-9)] command (SPACE) move right one character $ move to end of line % match nearest [],(),{} on line, to its match (same line or others) ^ move to first non-whitespace character of line ( move to previous sentence ) move to next sentence | move to column zero – move to first non-whitespace of previous line _ similar to “^” but uses numeric prefix oddly + move to first non-whitespace of next line [ move to previous “{…}” section “[” ] move to next “{…}” section “]” { move to previous blank-line separated section “{” } move to next blank-line separated section “}” ` move to marked line, memorized column character tag (a-z) : ex-submode ex command ” access numbered buffer; load or access lettered buffer 1-9,a-z ~ reverse case of current character and move cursor forward . repeat last text-changing command < unindent command cursor motion command > indent command cursor motion command

That’s not totally complete. You can dig into the code for the super complete list.