Docs

@devioarts/electron

@devioarts/electron adds Electron support to Vite + TypeScript apps, React first-class: a typed window.Electron bridge, a dae CLI for dev/build/packaging, and a set of React hooks. It's for developers who already have a Vite (optionally React) web app and want to ship it as a desktop app without hand-rolling IPC plumbing, security defaults, or a packaging pipeline.

Requires Node >=24.0.0. Package version 0.1.0, MIT license.

Extracted and simplified from @devioarts/capacitor-electron for plain Vite apps that don't use Capacitor.

New to the package? Go to Quick start next — install, dae init, dae run, in that order.

This repository contains two things:

  • The package itself — source in src/, published as @devioarts/electron. See Architecture.
  • The playground — a demo/development Electron+Vite+React app under playground/ that exercises every feature of the package. See Playground demo app.

What it is for

Use this package when you have a Vite + TypeScript (optionally React) web app and want to ship it as an Electron desktop app without hand-rolling IPC plumbing, security defaults, or a build/packaging pipeline. It covers window control, native dialogs, clipboard, notifications, screen/display info, power monitor, global shortcuts, native menus (app/context/dock/tray), deep linking, auto-updates, secure storage, downloads, printing, desktop capture, external command execution, Node.js utility processes, and more — each behind a typed, promise-based window.Electron.* API.

Core ideas

  • Typed bridge, not a magic runtime. window.Electron is built explicitly by electron/preload.ts calling createElectronBridge(). Nothing is auto-discovered; every channel is a real, typed method.
  • Explicit lifecycle wiring. electron/main.ts calls createElectronApp(config, options), which sequences privileged-scheme registration, whenReady() setup, window creation, and IPC trust — in the order Electron actually requires. For full manual control you can skip createElectronApp() and import individual building blocks from @devioarts/electron/main instead.
  • Secure by default. Permission requests (camera, microphone, geolocation, notifications, ...) are denied unless explicitly allowlisted, and the main window cannot navigate away from its own origin or open unrestricted new windows. IPC handlers are gated by a sender-origin trust check. See Architecture and Configuration.
  • Everything either "just works" or is opt-in. Features with no visible OS side effects (window control, screen info, power monitor, clipboard, notifications, secure storage, ...) are always available. Anything that changes visible OS behavior or needs mandatory setup (tray icon, app menu, deep linking, auto-updater, crash reporting, ...) is off until configured. See Configuration.
  • Plugins for anything domain-specific. Capabilities outside the base API (filesystem access, hardware integrations, ...) are added as explicit plugins, wired the same way built-in features are — no runtime plugin loader. See Plugins.

Package layout

src/
  index.ts        @devioarts/electron        — createElectronApp(), ElectronConfig/ElectronBridge/PluginConfigMap types
  main/            @devioarts/electron/main    — main-process building blocks (setupTray, trustedIpcHandle, registerPlugin, ...)
  preload/         @devioarts/electron/preload — createElectronBridge(), PluginManifest type
  react/           @devioarts/electron/react   — React hooks (useElectron, useNativeTheme, useShortcut, useMenuAction, useScreenEvent, useElectronEvent)
  shared/                                      — shared types and config (ElectronConfig, ElectronBridge, IpcResult, ...)
  cli/             dae CLI                     — init, run, build, kill, sync

templates/         files scaffolded by `dae init`
tests/             unit, integration, and Playwright e2e tests
playground/        demo Vite + React + Electron app, see [playground.md](playground.md)

Last updated on July 17, 2026