Tray App Template

A minimal Electron tray app template with a single popup window and a simple settings dialog.

Features

• System Tray Integration: Lives in your system tray for quick access
• Popup Window: Frameless, always-on-top window toggled from the tray
• Settings Dialog: Basic modal dialog pattern with localStorage persistence
• Auto-hide: Window hides when you click elsewhere or press Escape

Setup

Prerequisites

• Node.js 18+ installed

Installation

1. Install dependencies:

   npm install

2. Run the app:

   npm start

Usage

• Left-click the tray icon to toggle the window
• Right-click the tray icon to open the Quit menu
• Press Escape to hide the window

Building for Distribution

To create a distributable package:

npm run build

This will create installers for your platform in the dist folder.

Customization

Tray Appearance

The template uses an emoji title for the tray by default. Update tray.setTitle() and tray.setToolTip() in main.js to customize it. If you want a real tray icon, switch to new Tray(nativeImage.createFromPath(...)) or a packaged asset.

UI and Settings

• Update the title text and layout in index.html
• Add or change settings fields inside the dialog in index.html
• Modify CSS custom properties in :root for quick visual tweaks

Tech Stack

• Electron
• Vanilla JavaScript/HTML/CSS

License

MIT