How Vivaldi Replaces Chromium's C++ UI with React and HTML

This article provides a technical overview of how the Vivaldi web browser discards the standard C++ Views user interface of the Chromium project in favor of a custom UI layer built with HTML, CSS, and React. By treating the browser interface itself as a web application, Vivaldi achieves a high degree of customization and rapid feature development. We will explore the removal of the native Views framework, the implementation of the React-based frontend, the use of the <webview> tag to render web content, and the custom C++ bridge that allows the JavaScript UI to control the underlying browser engine.

Bypassing the Chromium Views Framework

In a standard Chromium browser, the user interface—including the tab bar, address bar, and menus—is built using a C++ framework known as "Views." While fast and tightly integrated with the operating system, the Views framework is rigid and requires compiling C++ code for every minor visual change.

Vivaldi bypasses this native UI layer entirely. Instead of using C++ to draw the browser window, Vivaldi initializes Chromium in a mode similar to the now-deprecated Chrome Apps architecture. When Vivaldi launches, it creates a borderless native window that immediately loads a local HTML document. This document serves as the foundational canvas for the entire browser interface.

The React, HTML, and CSS Frontend

Because the browser shell is essentially a local webpage rendered by the Blink engine, Vivaldi engineers can build the interface using standard web technologies:

  • HTML defines the structure of the toolbars, panels, and tab strips.
  • CSS handles the styling, animations, and dynamic theming (such as adapting the UI color to match the active website).
  • React manages the complex state of the user interface. Every tab, button, and panel is a React component. When a user moves a tab or opens a side panel, React efficiently updates the Document Object Model (DOM) without needing to redraw the entire window at the C++ level.

Rendering Web Content with the <webview> Tag

A major challenge of building a browser UI in HTML is displaying external websites inside that HTML interface without security risks or performance degradation. Standard <iframe> elements are insufficient because they share the same process and lack browser-level controls.

Vivaldi solves this by utilizing Chromium’s <webview> tag. Originally designed for Chrome Apps, the <webview> tag acts as an isolated container. When you open a new tab in Vivaldi, React renders a new <webview> element in the DOM. Chromium's backend recognizes this tag and spins up a separate, sandboxed renderer process for the external webpage. This ensures that a crashing webpage does not crash Vivaldi's React-based UI, maintaining Chromium's multi-process security model.

Bridging the Gap Between JavaScript and C++

A web-based UI cannot natively access system-level browser functions like managing bookmarks, reading browsing history, or controlling network requests. To make the React UI functional, Vivaldi connects the JavaScript frontend to the Chromium C++ backend using a custom API bridge.

Vivaldi achieves this by leveraging and expanding upon the Chromium Extensions API architecture:

  1. Reusing chrome.* APIs: Vivaldi's UI has privileged access to standard Chrome Extension APIs (like chrome.tabs and chrome.history), allowing the React frontend to request data directly from the C++ engine.
  2. Custom vivaldi.* C++ Bindings: For features unique to Vivaldi (such as tab stacking, mouse gestures, and the built-in mail client), Vivaldi's developers write custom C++ code in the Chromium layer. They then expose these functions to the JavaScript engine (V8) under a private vivaldi.* namespace.

When a user clicks a button in the React interface, it triggers a JavaScript function that calls a vivaldi.* API. This call crosses the boundary into the C++ backend, executes the native Chromium code, and returns the result to the React state via asynchronous events, seamlessly uniting the web-based frontend with the native browser engine.