brrd/electron-tabs

Tab component for Electron

Summary

brrd/electron-tabs is an MIT-licensed TypeScript component that adds a tabbed interface on top of Electron's webview tag. The README is explicit, however, that the project is discontinued and the GitHub repository is archived, so it is best treated as a reference or a starting point for a fork rather than a maintained dependency.

What it is useful for

The package exposes a <tab-group> Web Component that you drop into the renderer of an Electron app to host multiple pages, each loaded in its own webview. It is built with TypeScript and Web Components, and the README states it works with Electron ≥ 17. It is described as compliant with Electron's security recommendations, so it works without enabling nodeIntegration: true.

Documented features include a built-in "New Tab" button and a per-tab "Close" button, optional drag-and-drop reordering via sortable="true", tab badges and icons, a visibility-threshold attribute, CSS variable theming, and events such as tab-added, tab-active, webview-ready, and closing. It fits any use case that needs browser-style tabbed browsing inside a single Electron window, where each tab loads a different URL or local HTML file.

How engineers can use it

The documented setup is short. In the main process, enable the webview tag:

const mainWindow = new electron.BrowserWindow({
  webPreferences: { webviewTag: true }
});

In the renderer, install with npm install --save electron-tabs and add:

<tab-group new-tab-button="true" sortable="true"></tab-group>
<script src="node_modules/electron-tabs/dist/electron-tabs.js"></script>

After the script loads you can call tabGroup.addTab({ title, src }) to open pages, tabGroup.setDefaultTab(...) to configure the tab created by the "New Tab" button, and listen to events such as tab-added or tab-active. Styles are customized through the CSS variables in src/style.css or by putting a <style> block inside the <tab-group> element for things like custom badges. Each Tab instance also exposes tab.webview, giving you direct access to the underlying Electron webview methods such as loadURL.

Documented limitations: the project is explicitly discontinued and the repository is archived, so newer Electron releases are not expected to be tested and no bug fixes are coming. The README also does not cover bundler integration with Webpack, Vite, or Electron Forge, so packaging details are unclear and would need to be confirmed in the README or source before adoption.