Electron Architecture – Main vs Renderer

Electron Architecture – Main vs Renderer

• Main process – a regular Node.js environment. It creates and manages windows, handles OS‑level APIs (menus, dialogs, auto‑updates) and can run any npm package.
• Renderer process – a Chromium web page. Each BrowserWindow gets its own renderer. It cannot directly require Node modules unless you enable nodeIntegration (which is not recommended for security).
• Preload scripts sit between the two. They run in a tiny isolated context, expose a safe API to the renderer via contextBridge.

---

Visual overview

flowchart LR
    Main[Main Process (Node)] -->|creates| Browser[BrowserWindow]
    Browser -->|loads| Renderer[Renderer Process (Chromium)]
    Main -->|exposes via| Preload[Preload Script]
    Renderer -->|calls| Bridge[contextBridge API]