Skip to Content

tray

import { tray } from "@tynd/core/client";

The tray icon + menu are declared in app.start({ tray: … }) on the backend. This module lets the frontend (or backend) subscribe to user interactions.

Declare the tray

backend/main.ts
app.start({
  tray: {
    icon:    import.meta.dir + "/assets/tray.png",
    tooltip: "My App",
    menu: [
      { label: "Show",       id: "show" },
      { label: "Preferences", id: "prefs" },
      { type: "separator" },
      { label: "Quit",       id: "quit" },
    ],
  },
  // ...
});

Click handlers

tray.onClick(() => tyndWindow.show());
tray.onRightClick(() => { /* context menu is native; this fires alongside */ });
tray.onDoubleClick(() => tyndWindow.show());

Each returns an unsubscribe() function.

tray.onMenu("show",  () => tyndWindow.show());
tray.onMenu("prefs", () => openSettings());
tray.onMenu("quit",  () => app.exit(0));

The id matches the id field you set on the tray menu item.

Notes

  • Tray events are broadcast — a handler registered in any window (or in the backend) fires on matching events.
  • Platform quirks: macOS fires double-click only if onClick doesn’t handle it; Windows fires both. Guard on Date.now() deltas if you need strict discrimination.
  • Dynamic tray-icon updates and mouse-enter/leave events aren’t exposed yet.
Last updated on
Overview