Vivaldi, a Browser with Vertical Tabs for Power Users

There is a browser that works just like Chrome but is way more flexible. It’s called Vivaldi, and I believe it’s underrated, so allow me to spread the word about it. Although It has a bunch of features, I can only write about those that matter to me.

Chrome-like

While Vivaldi’s name comes from the famous composer, the rendering engine comes from Chrome. It’s the same thing on the inside, which has two visible telltale signs. It uses Chrome extensions, and the developer tools a.k.a. the inspector is the same. I find this necessary because I like the rendering engine of Chrome but still wanted a better UI around it. Vivaldi fulfills this wish!

Vertical tabs in Vivaldi

My most favorite feature is the ability to move the tabs to the side. When it comes to developers and power users, we like to have a ton of tabs open. Have you ever written a thesis or researched an article? Didn’t you open way too many tabs? It’s such a severe case of mine that when I configured my PC, I doubled down on the RAM. Not necessarily because of my gamer or VFX tendencies, but purely because that number of tabs consume gigabytes of memory.

Vivaldi’s implementation is perfect, partly because it requires no extensions. When opening the browser, it loads the tabs from the last session as frozen, greyed out until you interact with them. After a certain amount, a scrollbar shows up. When I’m researching or learning during plugin development, it’s not uncommon to cross the 100-tabs mark 🙂 For some, that might be confusing, but I don’t like tab stacking.

Two things warrant your consideration regarding vertical tabs. Nowadays, monitors are widescreen, but websites aren’t. There is almost always some extra (wasted) space on both sides of a site. Therefore, moving the tabs to the side takes away nothing. Most importantly, you can actually read the tab titles. It has to be a plus, no? That way you are not exposed to the horror of a compressed, favicon-only (few first letters visible if you are lucky) tab bar. You know what I’m talking about if you are a power user.

Once upon a time, I was using the Tree Style Tab extension with Firefox, just to have this feature. That experience degraded over time and since Chrome doesn’t allow modifying its UI via extensions, I was on the hunt for a solution. This is how I ended up with Vivaldi, which has vertical tabs built-in. Yay!

Mouse gestures, keyboard shortcuts

I wrote in another article that I use my gamer mouse with AutoHotkey to interact with the browser. Therefore, I no longer use this feature, but it’s nice for those that dislike macros or don’t have a multi-button mouse. You can set up gestures, so you can draw lines in multiple directions, and assign tasks to these. For example, draw a straight line down by holding the right mouse button to close a tab. This feature is also built-in!

For those that like keyboard shortcuts better than mouse magic, everything is assignable and the defaults removable. Shortcuts are bindable just like in a game.

Customizable via CSS

My bookmarks bar has 80+ favicons (there I don’t need text labels to tell them apart). It’s only possible to fit that many on an otherwise relaxed bar, by adjusting the paddings. Vivaldi allows tweaking its UI with CSS. That alone gives a serious advantage to those that know what they are doing. Being a developer I knew I couldn’t skip this option, so I created a little tweak to slim that area. Here it is for Y’all:

You need to place it under:

C:\Program Files\Vivaldi\Application\[version]\resources\vivaldi

You need to do this after every update, that’s the only downside.

There used to be a thing called Vivaldi hooks which even tweaked the browser with Custom JS, but I’m not sure about those things anymore. You kind of need to know the inner workings of the UI to write custom scripts for it though.

Built-in coloring

With just a few clicks you can apply any color theme to the browser, without having to download obnoxious themes. I’ve had my fair share of dark themes that were over the top with custom empty-tab backgrounds. I endured them (during my times with Firefox) as they were the only way to make my UI dark. If you are not into dark themes, there is also a nice little feature that picks the accent color from the website and paints the top area that way. It’s kind of like how Chrome colors the address bar on Android (but you can control that as a site owner, it’s not automatic there).

Powerful sidebar

The other side of my browser hosts the sidebar, whenever I decide to show it. Geeks who rely on their bookmarks have long used this feature in older browsers, as it’s nothing new. However, Vivaldi packs a few extras there. The sidebar area has little subtabs to show the downloads panel, notes you take (within the browser, yes), your history… And another list of tabs that are vertical, even if you keep using horizontal tabs.

If that’s not enough, you can add web panels, that load websites in the sidebar. With most sites being responsive, some of them even look nice in that confined space. Add functional sites such as Facebook messenger or Todoist, so you can interact with them while browsing something else. It’s especially useful if you don’t have multiple monitors.

Interesting history view

Vivaldi carries a unique history viewer with statistics in a calendar view. You might have seen some unsettling stats if you use (or haven’t turned off) Google My Activity, but at least this is locally-tracked, just in your browser. I haven’t seen anything like this in other browsers. It showed me that I made 50K page views on 25K URLs in February. If you want an even more advanced history, check out my persistent history article.

Website screenshots

Vivaldi has a button to capture a screenshot of a whole webpage or just a selection. That would otherwise require yet another extension or 3rd party software that scrolls the sites, takes screenshots and stitches them together. What better way to skip all that than to have the browser do this for you natively?

Bonus: picture-in-picture for videos

PiP is not strictly a Vivaldi feature as Chome has it too. You can pop-out any video and watch it over other windows on your computer. Again, this benefits users with a single monitor, but still, it’s nice that they implemented it. With this technology being relatively new, I can only guess this will take off with PiP buttons showing up on video controls or at least in right-click menus. For now, you need a small extension for Vivaldi or Chrome to find the video on a site and instruct the browser to detach it, but the functionality comes from the browser. If you want to try it out (even on Chrome) you can run this from the console of any site with a video:

document.getElementsByTagName('video')[0].requestPictureInPicture();

PiP is useful for multitaskers who like to watch a video or stream in the background such as vlogs or Twitch. With this, I’m no longer torn between merely listening to them or switching the tab, taking me away from what I was doing.

My recommendation

Of course, I keep the popular, regular browsers for testing as a developer. It doesn’t prevent me from using a powerful browser for my day to day activities. I hope this tip serves you well, and perhaps Vivaldi will help you become more productive.