Quick start

The fastest path from a fresh Vite + TypeScript project to a running Electron app: install, scaffold, run, build. Each step below is copy-pasteable and takes under a minute.

Install

npm install --save-dev @devioarts/electron

electron, electron-builder, and electron-updater are dependencies of this package, so they install automatically — no need to add them yourself. react is an optional peer dependency (only needed for @devioarts/electron/react).

Scaffold

npx dae init

Creates (never overwrites an existing file):

• electron/main.ts — the Electron main process entry, yours to edit. Calls createElectronApp(config, options) with your config and the customization functions below.
• electron/preload.ts — registers window.Electron via createElectronBridge().
• electron/user/ — one file per customization point, pre-wired into main.ts:
  • shortcuts.ts — global keyboard shortcuts (GlobalShortcutDef[])
  • menu/app.ts, menu/context.ts, menu/dock.ts, menu/tray.ts — one factory per menu, each called only when its ui.*.enabled is true in electron.config.ts
  • jump-list.ts — Windows Jump List categories, called only when ui.jumpList.enabled is true
  • main-user.ts — the onReady hook, for anything else
• electron.config.ts — app config (dev URL, window options, opt-in UI features). See Configuration.
• electron-builder.config.ts — packaging config. See Deployment.
• electron-env.d.ts — makes window.Electron typed project-wide.

Run in development

npx dae run

Starts your Vite dev server if it isn't already running, bundles electron/main.ts + electron/preload.ts, and launches Electron. Restarts Electron automatically when either file changes. Ctrl+C cleans up everything.

By default it waits on dev.url (or http://localhost:5173 if unset). Set dev.url: 'auto' if something else might already be using that port. See App configuration for how 'auto' mode resolves the real port.

Build and package

npx dae build [mac|win|linux]

Runs your renderer build (npm run build), bundles the Electron sources, and packages an installer with electron-builder. Defaults to the current OS platform. See Deployment.

Kill stray processes

npx dae kill

Terminates any Electron/Node processes left over from a previous dae run for this project.

Using the bridge

// anywhere in your renderer code
window.Electron.minimize();
const version = await window.Electron.getAppVersion();
const platform = await window.Electron.getPlatform(); // 'darwin' | 'win32' | 'linux' | ...

With React:

import { useElectron, useNativeTheme } from '@devioarts/electron/react';

function TitleBar() {
  const electron = useElectron();
  const theme = useNativeTheme();

  return (
    <div>
      <button onClick={() => electron.minimize()}>Minimize</button>
      <span>{theme?.shouldUseDarkColors ? 'dark' : 'light'}</span>
    </div>
  );
}

See Usage for the full API surface, event subscriptions, and how to extend the bridge with your own IPC channels.

Naming note

The CLI is named dae, not electron — electron is already the binary name registered by the electron npm package itself, and both would conflict in node_modules/.bin.