Electron — Build Cross-Platform Desktop Apps with Web Tech

What it is

Electron is a framework maintained by the OpenJS Foundation (originally created by GitHub) for building native desktop applications using web technologies. It bundles Chromium for rendering and Node.js for system access into a single runtime, letting you ship one codebase to Windows, macOS, and Linux.

It powers many widely-used applications including VS Code, Slack, Discord, Notion, Figma desktop, and GitHub Desktop. Developers already comfortable with JavaScript, TypeScript, React, or Vue can build desktop apps without learning platform-specific APIs.

How it saves time or tokens

Without Electron, shipping a desktop app to three operating systems means maintaining three separate codebases (or learning a cross-platform toolkit like Qt). Electron eliminates this by reusing your existing web development skills and npm ecosystem. A team that already has a web app can wrap it in Electron and ship a desktop version in days rather than months.

For AI-powered desktop tools, Electron provides direct access to the filesystem and local processes through Node.js, making it straightforward to build local LLM interfaces, file-processing agents, or developer tools that need OS-level access.

How to use

1. Scaffold a new Electron project with the quick-start template:

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

1. Edit the main process file to create your browser window and load your UI.

1. Build distributable packages for all platforms using electron-builder or electron-forge.

Example

Minimal main process that opens a window:

const { app, BrowserWindow } = require('electron');

function createWindow() {
  const win = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: { preload: __dirname + '/preload.js' },
  });
  win.loadFile('index.html');
}

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

This creates a 1200x800 window loading a local HTML file with a preload script for secure IPC.

Related on TokRepo

• Coding Tools -- AI-assisted development tools that complement desktop app workflows
• Automation Tools -- Automate build pipelines and releases for Electron apps

Common pitfalls

• Bundle size is large by default (Chromium alone adds 100MB+). Use electron-builder's compression and consider lazy-loading heavy modules to reduce download size.
• Security: never enable nodeIntegration in the renderer process. Use the preload script with contextBridge to expose only the APIs your renderer needs.
• Memory usage can grow quickly with multiple windows. Profile with Chrome DevTools (built into Electron) and close unused windows promptly.