ConfigsApr 11, 2026·1 min read

Electron — Build Cross-Platform Desktop Apps with Web Tech

Electron is a framework for building cross-platform desktop apps with JavaScript, HTML, and CSS. Powers VS Code, Slack, Discord, Notion, Figma, GitHub Desktop, and many other household apps. Chromium + Node.js bundled together.

AI
AI Open Source · Community
Quick Use

Use it first, then decide how deep to go

This block should tell both the user and the agent what to copy, install, and apply first.

npm create @quick-start/electron@latest my-app
cd my-app
npm install
npm run dev

Minimal main process:

// main.js
const { app, BrowserWindow } = require("electron");

function createWindow() {
  const win = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: { preload: __dirname + "/preload.js" },
  });
  win.loadURL("http://localhost:5173");
}

app.whenReady().then(createWindow);
app.on("window-all-closed", () => app.quit());
Intro

Electron is a framework built by GitHub (now maintained by the OpenJS Foundation) for creating native desktop applications with web technologies. Bundles Chromium and Node.js into a single runtime, letting you ship a single codebase to Windows, macOS, and Linux.

What Electron Does

  • Main process — Node.js environment, OS APIs (filesystem, network, child processes)
  • Renderer process — Chromium window, your web app
  • IPC — bridge between main and renderer via ipcMain/ipcRenderer
  • Native menus — Menu, MenuItem, Tray, dock icon
  • Auto-updater — Squirrel-based updates
  • Notifications — native OS notifications
  • Power/clipboard/crash reporting — OS-level primitives
  • Packaging — electron-builder / electron-forge

Architecture

One main process launches one or more BrowserWindows (renderers). Chromium renders HTML; Node.js runs in main (and optionally renderer via contextIsolation). IPC messages cross the boundary. Security rule: renderer is untrusted, always validate inputs.

Self-Hosting

Package locally then distribute:

npm run build
npx electron-builder --mac --win --linux

Distribute binaries via your site or auto-update server (like Nucleus, Hazel, or GitHub Releases).

Key Features

  • Cross-platform (Win/Mac/Linux)
  • Full Node.js in main process
  • Native menus, tray, notifications
  • Auto-updater
  • Code signing support
  • Crash reporter
  • DevTools extensions
  • MAS (Mac App Store) signing
  • v28+ drops Node 18, uses ESM

Comparison

Framework Binary Size Runtime Language Memory
Electron ~150MB Chromium + Node JS ~200MB idle
Tauri ~3-10MB OS WebView + Rust Rust + JS ~80MB idle
Neutralino ~2MB OS WebView JS (no Node) ~50MB
NW.js ~150MB Chromium + Node JS ~200MB
Wails ~8MB OS WebView + Go Go + JS ~80MB

常见问题 FAQ

Q: 包体积为什么这么大？ A: Chromium (~100MB) + Node.js (~30MB) 都打进每个应用。这是跨平台一致性的代价。

Q: 安全问题？ A: 启用 contextIsolation、关闭 nodeIntegration、用 preload 暴露受限 API。禁止执行远程代码。

Q: 何时选 Tauri？ A: 追求小体积+性能+Rust 生态时选 Tauri；需要完整 Node 生态或 Chromium 精确一致性时选 Electron。

来源与致谢 Sources

Discussion

Sign in to join the discussion.
No comments yet. Be the first to share your thoughts.

Related Assets

Immer — Immutable State with Mutable Syntax

Immer lets you create the next immutable state by mutating the current one. Write mutating code as if it were normal JS and Immer produces a new immutable object via structural sharing. Built into Redux Toolkit and Zustand.

AI Open Source

date-fns — Modern Modular JavaScript Date Utility Library

date-fns is a modern JavaScript date utility library providing 200+ functions for parsing, formatting, arithmetic, and comparison. Tree-shakeable, immutable, TypeScript-first, and the modern alternative to Moment.js.

AI Open Source

Apollo Client — Industry-Leading GraphQL Client for TS/JS

Apollo Client is the industry-leading GraphQL client for TypeScript, JavaScript, React, Vue, Angular, and more. Powerful caching with normalized store, intuitive APIs, optimistic UI, subscriptions, and comprehensive developer tools.

AI Open Source
◈Home🔍Search👤Me