How to Use Vim Shortcuts to Navigate Your Web Browser

0

While Vim is a text editor designed to be used only with keyboard shortcuts, browser extensions like Vimium allow you to browse the web using similar keyboard shortcuts without ever touching the mouse. Using Vim shortcuts on your browser can help you get things done faster and more efficiently. In this article, I will show you how to use and configure Vimium on your favorite browser.

Install Vimium

Install Vimium on Chrome

To install Vimium on Chrome or any other Chromium-based browser like Brave, go to Vimium page on Chrome Webstore and select “Add to Chrome”. This will open a pop-up window. Select “Add extension” to add it to Chrome.

Vim on Browser Add Vimium

Install Vimium on Firefox

You can add Vimium-FF, a Vimium port for Firefox, from the Vimium-FF page on the Firefox browser ADD-ONS website.

On the Vimium-FF page, select “Add to Firefox”. Then in the pop-up window, select “Add” to install it on Firefox.

Vim on Browser Add Vimium Ff

Install Vimari on Safari

Vimari is a Vimium Safari port. Although Vimari has very limited control compared to Vimium, it handles basic navigation very well. You can install App Store Vimari.

Vim on browser Add Vimari

To activate the Vimari extension on Safari, select “Safari” from the menu bar and go to preferences. Select the “Extensions” tab and check “Vimari”.

Vim on browser Enable Vimari

Scrolling with Vimium

Scrolling is probably the most common thing you do on a web page. With Vimium, you can use J to scroll down and K to scroll up. Pressing H and L allows you to scroll horizontally left and right. To go to the top of the page, press GG. Hurry Gap + g to go to the bottom of the page like you would with Vim. You can even scroll half a page down or up by pressing D and you.

Open a link

To open a link, press Fwhich will assign a unique label to each of the links on a particular web page.

Vim on browser Open current tab from link

To access a link, type the label displayed on the link. If you want to type something in a text field, just type the label on the text field.

You can press Gap + F to show labels that will open links on a new page when you type a label.

Vim on Browser Open New Tab Link

Handling tabs

To access the left tab, press Gap + J. Pressing Gap + K will take you to the right tab. If you are using Vimari, press Q and O to access the left and right tabs. To close the current tab, tap X. If you close a tab by mistake, you can restore it by tapping Gap + X (does not work for Vimari).

If multiple tabs are open, tap Gap + Jthen find and select the tab to open it.

Vim on Browser Search Tab

Browse your history

You can return to the previous page of your browser by pressing Gap + H. If you want to return to the page you just came from, press Gap + L.

Exit insert mode and text fields

Pressing I will put you in insert mode. You can use the usual browser shortcuts in insert mode. For example, if you’re on YouTube, tap M will mute the sound instead of acting as a Vimium hotkey.

Vim on Browser Youtube Insert Mode

Whether you are in insert mode or just in a text field like the search bar, you can exit to use Vimium shortcuts again by pressing Esc.

Configure Vimium

You can configure and modify the default Vimium shortcuts according to your own preferences from the Vimium Options page.

Opening the Vimium options page

If you’re on Chrome, select the extension icon next to the address bar. Now select the three dots next to the Vimium extension and select “Options” to access the Vimium Options page.

Vim on Chrome browser configuration page

If you’re using Firefox, right-click the Vimium icon next to the address bar and select “Manage Extension”. On the Extensions page, select the three dots next to the Vimium extension and select “Preferences”.

Vim browser configuration page on Firefox

To see all available commands, select “Show available commands” right next to the “Custom key mappings” box.

Vim configuration page on browser

This will display the list of available commands and their corresponding keyboard shortcuts in a pop-up window.

Vim on browser commands

You can change the keyboard shortcuts for each of these commands.

Map and unmap a key in Vimium

To use a certain key to execute a command, enter a map command in the “Custom Key Mappings”. The general format is:

map shortcutKey commandName

For example, to use the M key to deactivate or reactivate a tab, enter the command:

If you want to disable a Vimium shortcut, you can use the unmap command with the shortcut key. For example, if you want to disable the Vimimum shortcut /enter the command:

Vim on Vimium Map Unmap Browser

Select “Save Changes” after entering your commands.

The changes will take place when you visit a new page or reload an already open page.

Configuring advanced options

Vimium has some advanced options like specifying the scroll step size when you press J/K/H/L, which you can DIY and adjust to your preference. If you don’t like smooth scrolling, you can uncheck the Use smooth scrolling button in the miscellaneous options.

To see advanced options, select “Show advanced options” on the Vimium Options page.

Vim Advanced Browser Options

You can also download the configuration file for your current preferences and restore it to use the same shortcuts when you reinstall your browser or choose to use Vimium on another browser.

To download a backup, select “Click to download backup” from the Backup & Restore menu.

Restoring Vim Backup to Browser

Configure Vimari

To configure Vimari, select the Vimari icon from the Safari top bar. This will open a new window. In the pop-up window, select “Open configuration file”.

Vim on Vimari Open Config Browser

You will see all available commands in the Bindings section. Keyboard shortcuts are represented as key-value pairs where key is the name of the command for the shortcut and value is the shortcut key.

Vim on Vimari Config Browser

If you want to edit a shortcut, select the shortcut key after the keyword and replace it with your own shortcut.

For example, if you want to use Gap + J and Gap + K to go to the left and right tabs, replace the lines:

"tabForward": "w",
"tabBack": "q",

with

"tabForward": "shift+k",
"tabBack": "shift+j",
Vim on Vimari Browser Remapper

To disable a shortcut, just leave the value as empty quotes. For example, if you don’t want X to close a tab, replace the line:

with

Vim on Vimari Unmap Browser

Hurry Ordered + S to save the configuration. This new configuration will now work on web pages you open or you can simply reload an already open tab on Safari by pressing R to use the new configuration.

Frequently Asked Questions

Is Vimium/Vimari secure?

Yes. Vimium/Vimari does not communicate with any server and stores all your preferences locally.

Why is Vimium/Vimari not working on browser homepage?

Vimium and Vimari do not work on some pages such as Chrome homepage, Chrome Webstore and Safari homepage as per browsers policy.

What if a website has the same shortcut as Vimium?

In normal mode, Vimium hotkeys will take precedence. However, you can use regular website shortcuts in insert mode.

Image credit: Colorful keyboards by 123FR. Screenshots of Muhammad Munna

Was this article helpful?

Subscribe to our newsletter!

Our latest tutorials delivered straight to your inbox

Share.

Comments are closed.