Vimtutor Online: Practice Vim in Your Browser, No Install

0 / 26 steps

This uses the keyboard, so open it on a computer. You can read every step further down this page.

About this tutorial

A tutorial for practicing Vim basics in a Vim that runs in your browser. Nothing to install and no sign-up. Work through nine lessons one step at a time, and move on as soon as each step is done.

vimtutor is the practice material that ships with Vim. If Vim is installed, typing vimtutor in your terminal opens a copy of a practice file, and you learn by editing it as its instructions say (in Neovim, type :Tutor).

This tutorial covers the same ground as vimtutor (moving, deleting, inserting, undo, put, search and substitute, saving and quitting), split into one action per step. The text was written for this page, and the practice files are code you often fix while developing, such as a stray character, a missing semicolon or a leftover debug line. The editor follows real Vim behavior, and saving (:w) and quitting (:q!) work just as they do in Vim.

Lessons and steps

  1. 1. Moving the cursor

    In Vim you move with h j k l instead of the arrow keys: h is left, j is down, k is up and l is right.

    1. Press j twice to move down to line 3 (the console.log line).
    2. Press l to put the cursor on the c of console.
    3. Press k to move up one line (the const line).
    4. Press h to move back to the start of that line.
  2. 2. Deleting a character (x)

    x deletes the character under the cursor. greeting has one t too many, so fix it.

    1. On line 1, move onto the extra t and press x to make it greeting.
    2. Fix line 2 the same way.
  3. 3. Inserting text (i and A)

    Press i for Insert mode, where what you type goes in before the cursor. Esc takes you back to Normal mode, where keys act as commands.

    1. Put the cursor on the space after a on line 1, press i and type , .
    2. Press Esc to go back to Normal mode.
    3. On line 2, press A to jump to the end of the line, type ; and press Esc.
  4. 4. Deleting (dw, dd, d$)

    d is the delete command. Follow it with how far to delete: dw a word, dd a line, d$ to the end of the line. A number in front repeats it.

    1. At the start of the second const on line 1, press dw to delete the doubled const.
    2. Move down to line 2 and press 2dd to delete both console.log lines.
    3. On the return line, put the cursor on the space after ; and press d$ to delete the comment.
  5. 5. Undo and redo (u and Ctrl+r)

    u undoes your last change. If you undo too much, Ctrl+r redoes it.

    1. Press dd on line 2 to delete it.
    2. Press u to bring the line back.
    3. Press Ctrl+r to redo, and the line is deleted again.
  6. 6. Put, replace and change (p, r, cw)

    A line deleted with dd can be put below the cursor with p. r replaces one character, and cw changes a word.

    1. Press dd on line 1 (3. deploy) to delete it.
    2. Move down to the 2. build line and press p to put the lines in 1, 2, 3 order.
    3. On the if line, move onto the letter O that was meant to be 0 and fix it with r0.
    4. On the next line, press cw at the start of usr, type user and press Esc.
  7. 7. Search and substitute (/, n, :s)

    Type / and a word, then Enter, to jump to it. n goes to the next match. :s/old/new/ substitutes on the current line.

    1. Type /TODO and press Enter to search for TODO.
    2. Press n to move to the next TODO.
    3. Move down to the fetch line, type :s/http/https/ and press Enter.
  8. 8. Opening and copying lines (o and yy)

    o opens a new line below the cursor in Insert mode (O opens one above). yy copies a line, and p puts it.

    1. On line 1, press o, type two spaces and then start();, and press Esc.
    2. On the "apple" line, press yy, then p to put it.
  9. 9. Saving and quitting (:w and :q!)

    Press : to open a command line at the bottom. :w saves, :q! quits without saving, and :wq saves and quits.

    1. Type :w and press Enter to save.
    2. Type :q! and press Enter to quit Vim.

Keys you learn here

KeysWhat they do
h j k lMove left, down, up, right
xDelete the character under the cursor
i / AInsert before the cursor / append at the end of the line
EscBack to Normal mode
dw / d$ / ddDelete a word, to the end of the line, a whole line (a number like 2dd repeats)
u / Ctrl+rUndo / redo
pPut a deleted or copied line below the cursor
rReplace the character under the cursor
cwChange a word
/ n NSearch, next match, previous match
:s/old/new/Substitute on the line (:%s/old/new/g for the whole file)
o / OOpen a line below / above and start typing
yyCopy (yank) a line
:w / :wq / :q!Save / save and quit / quit without saving

FAQ

How do I quit Vim?

Press Esc to get back to Normal mode. To quit without saving, type :q! and press Enter. To save and quit, type :wq and press Enter. If you have not changed anything, :q is enough.

How do I start vimtutor on my own machine?

If Vim is installed, type vimtutor in your terminal. In Neovim, open Neovim and type :Tutor.

Can I use the arrow keys instead?

The arrow keys work too. h j k l let you move without taking your fingers off the home row, which gets faster once you are used to it, so this tutorial practices h j k l.

If I close the page, can I pick up where I left off?

This browser remembers which lesson you reached. Next time, you start at the beginning of that lesson.

Keep practicing

WebTerm Learn’s Vim Introduction course goes on to Visual mode, text objects, repeating with . and macros, moving like a game through slides and exercises one step at a time. The exercises use the same in-browser Vim as this page and check your edits as you go. To start from terminal basics, there is also the Terminal Introduction course.