Barbarian Meets Codingbarbarianmeetscoding

WebDev, UX & a Pinch of Fantasy

4 minutes readvim

Vim in the Browser

A fancy looking laptop with the lid half-closed

A natural step in the life of any Vim user is the sudden realization that any field of text, any tool or application feels extremely sluggish all of the sudden when you can’t use Vim with it. Well, Vimium is a Chrome extension that will help you get back some of that speed and seamless productivity you experience with Vim right in your browser.

I’m awefully aware that this is hardly news, specially if you’re into the Vim-sphere (I think I just made up a word). But even if you’re aware of it, or you have it installed in your browser there’s a high chance you aren’t taking advantage of it. In fact, you might have installed it, tried it for a couple of minutes and then forgotten all about it. Just. Like. Me.

If any of the above describes you, then block the next 5 minutes for a Vimium crash-course that will change the way you use your browser for ever.

Now go and install Vimium if you haven’t already. I’ll wait for you here.

Start with These 5 bindings

The most important binding is ?. It brings up the help with all available commands. You’ll need this often, specially at the beginning.

Now type /open and search for how to “open” a url. You’ll immediately see how the text becomes highlighted. Awesome! (I have deceivingly taught you how to search for commands and help you help yourself moahaha)

So to open a new url you use o. That opens a new url in the current tab. But we’re reading this article so that may be a bit problematic. We’ll use O instead. O lets us open a URL in a new tab. Type O and you’ll see a giant text field materialize from thin air. You can type URLs in there. Yeah. For real. Let’s go to google.com. Now type your name and press enter.

A page of results. Hopefully you’re there but it’s really OK if you’re not. Let’s open one of those links. Type f (think find link). You’ll see a considerable amount of small yellow boxes with letters appear on every interactive element in the page. Look at the link that seems the most interesting and type those letters. Now you’re in a new page. Wow. This is really smooth. See how easy it was? Type f again and navigate somewhere else. You’re sailing. Venture forth.

When you get tired type T to search between all your tabs and get back to this page by typing “barbarian meets”. Wow. Isn’t this amazing?

So in summary:

  1. ? to get help
  2. / to search for text
  3. o to open a url in the current tab, O to do the same in another tab
  4. f to find an interactive element in a page (oftentimes a link)
  5. T to search amongs your open tabs

With these 5 commands you’ve already transformed how you use the browser. You don’t really need more, you can call it a day, use these bindings above to sail smoothly across the web. When you feel ready to learn more, or wonder how something can be done just remember that help is one key away ?. And if you’re familiar with Vim, you’ll discover that many of the key bindings correlate with what commands do in Vim.

If you want to earn the extra credit try these other super useful bindings:

  • Scroll down with j and up with k (vaguely familiar right?)
  • Scroll left with h and right with l
  • Scroll faster down with d and up with u
  • Copy the current url with yy
  • Go to the first text box in text input in the page with gi
  • Open a link in a new tab with F (the uppercase version of f opens a url in a new tab, makes sense)
  • Open a bookmark with b (and with B in a new tab)
  • After typing /{some text} to find some text, you can press Enter to be sent to the first match. After that type n to jump to the next match and N to go back to the previous match.
  • H goes back in history, L goes forward in history (previous and next)
  • t creates a new tab, yT duplicates the current tab
  • ^ goes to the previously visited tab. Nice to jump back and forth between two tabs.

That’s all! Have fun and a wonderful day! Vim forth my friend.


Jaime González García

Written by Jaime González García , Dad, Husband, Front-end software engineer, UX designer, amateur pixel artist, tinkerer and master of the arcane arts. You should follow him on Twitter where he shares useful stuff! (and is funny too).Jaime González García