Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

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:

vim-setting

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.