Electron Architecture: Main and Renderer Processes

Electron is a framework that combines Chromium (for web rendering) with Node.js (for native API access), enabling developers to build cross-platform desktop applications using familiar web technologies. Your React app runs inside a Chromium browser window, while Node.js gives you access to operating system capabilities.

The main process is the entry point of an Electron application — it manages the application lifecycle, creates and controls windows, and handles native OS interactions. It spawns renderer processes and has full access to Node.js APIs and the underlying operating system.

Each BrowserWindow spawns its own renderer process, which runs Chromium and executes your React application. There is one renderer process per window, and it behaves much like a regular browser tab — it renders HTML, CSS, and JavaScript.

Because the main process has full Node.js access, it can read and write the file system, create native menus, manage the system tray, spawn child processes, and interact with hardware. These capabilities are unavailable in the renderer by default for security reasons.

When contextIsolation is set to true (the modern default), the renderer process is sandboxed and cannot directly access Node.js APIs. This security model prevents malicious web content from accessing your file system or executing arbitrary system commands.

Inter-Process Communication (IPC) is the mechanism that allows the main and renderer processes to exchange messages. The main process uses ipcMain to listen for and respond to messages, while the renderer uses ipcRenderer to send them — all communication is asynchronous and message-based.

The preload script occupies a special middle ground: it runs in the renderer process context but retains access to Node.js APIs before the page content loads. This makes it the secure bridge between the sandboxed renderer and the privileged main process.

contextBridge.exposeInMainWorld allows the preload script to selectively expose a safe, curated API to the renderer. The renderer can call these exposed functions without ever getting direct access to Node.js or Electron internals, maintaining a strong security boundary.

Once contextBridge has exposed an API under a name like "api", your React components can call it via window.api.myFunction(). This feels just like calling a regular JavaScript function, but under the hood it routes through IPC to the main process.

The Electron security model explicitly forbids direct Node.js access in the renderer when contextIsolation is enabled. All privileged operations must go through the preload script and contextBridge, ensuring that even if an XSS attack occurs in the renderer, it cannot access the file system.

A typical interaction flows like this: React component calls window.api.readFile() → preload invokes ipcRenderer.invoke() → main process ipcMain.handle() executes fs.readFile() → result returns as a Promise to the renderer. This architecture keeps the renderer clean and secure.

What is the primary purpose of contextBridge.exposeInMainWorld in Electron?

Electron combines Chromium and Node.js: the main process manages the app lifecycle and has full OS access, while renderer processes run your React UI in a sandboxed environment. The preload script and contextBridge form the secure bridge, and IPC enables safe communication between the privileged main process and the isolated renderer.