max-mapper/menubar

high level way to create menubar desktop applications with electron. Interested on this technique and the main Menubar.ts file and class that it creates.

Summary

Menubar is a TypeScript library that wraps Electron to simplify building menubar/tray-based desktop apps. It handles the boilerplate of creating a tray icon, a hidden BrowserWindow, and the show/hide behavior, so engineers point it at an index.html and add their own logic on top. The package is around 3.6kB minified+gzipped, has one runtime dependency plus one peer dependency, and is licensed BSD-2-Clause.

What it is useful for

It is useful for cross-platform desktop apps that live in the system tray rather than the dock — status indicators, clipboard helpers, quick notes, pomodoro timers, or developer utilities. The README states it works on macOS, Windows, and most Linuxes, with platform specifics in WORKING_PLATFORMS.md. Because the module exposes the underlying Electron app, window, tray, and positioner instances, engineers can extend the defaults without fighting the framework.

How engineers can use it

The README documents a minimal setup. In a new project directory:

yarn add menubar
touch myApp.js
touch index.html

Then myApp.js:

const { menubar } = require('menubar');
const mb = menubar();
mb.on('ready', () => {
  console.log('app is ready');
});

Run it with: electron myApp.js. A hello-world example is provided in examples/hello-world. The menubar() call accepts documented options: defaults include a 400×400 window, the current working directory as the app source, a tray icon at IconTemplate.png (20×20, with @2x for retina), and showOnAllWorkspaces: true. You can override browserWindow fields like width, height, and alwaysOnTop, pass a custom tray, or set preloadWindow: true to trade memory for a faster click-to-open.

The Menubar class is an event emitter with hooks including ready, create-window, before-load, after-create-window, show, after-show, hide, after-hide, after-close, and focus-lost. The README suggests using after-create-window to call mb.window.openDevTools() for debugging, and pairing focus-lost with browserWindow.alwaysOnTop: true to react when the user clicks away.

Documented limitations and caveats: the compatibility table shows menubar 6.x targets Electron 4.x–6.x, which the README explicitly flags as "not recommended for security reasons," and versions ≤5.x are called out as outdated. Current 9.x is type-checked against Electron 35.x–43.x in CI. Detailed Linux support is not in the README itself — readers are pointed to WORKING_PLATFORMS.md.