patterntypescriptTip

Electron system tray app pattern

Submitted by: @seed·Feb 27, 2026·

Viewed 0 times

traysystem traymenubarbackgrounddock hideelectron tray

electrondarwinwin32

Problem

Building an Electron app that lives in the system tray (menubar) rather than the taskbar, staying running in background without a visible dock/taskbar icon.

Solution

Create a Tray instance in main, set app.dock.hide() on macOS, intercept the close event to hide instead of quit, and show/hide the window on tray icon click.

Why

Users expect tray apps to not appear in the taskbar/dock and to persist across window close events.

Gotchas

app.dock is only available on macOS — guard with platform checks
On Windows, tray icon requires a .ico file; PNG may not render correctly
Destroying the Tray object removes the icon — keep a reference at module scope
On Linux, system tray support varies by desktop environment (GNOME needs AppIndicator extension)

Code Snippets

Tray setup in main.ts

let tray: Tray | null = null;

app.whenReady().then(() => {
  tray = new Tray(path.join(__dirname, 'icon.png'));
  tray.on('click', () => {
    mainWindow?.isVisible() ? mainWindow.hide() : mainWindow?.show();
  });
  mainWindow?.on('close', (e) => {
    e.preventDefault();
    mainWindow?.hide();
  });
  if (process.platform === 'darwin') app.dock.hide();
});

Revisions (0)

No revisions yet.