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.