Understanding Electron's Architecture
Get a clear mental model of how Electron combines Chromium and Node.js, and how the main and renderer processes work together before you build bigger apps.
Understanding Electron's Architecture is a free Electron Desktop App Development lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Electron Desktop App Development learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Two Worlds in One App
Electron fuses two runtimes: Chromium for the UI and Node.js for system access. Grasping how they coexist is the foundation of every app.
The Main Process
Each app has exactly one main process. It runs your entry file, controls the lifecycle, and creates BrowserWindow instances with full Node access.
const { app, BrowserWindow } = require('electron');
app.whenReady().then(() => {
new BrowserWindow({ width: 800, height: 600 });
});The Renderer Process
Each window runs its own renderer process — basically a Chromium tab rendering HTML, CSS, and JavaScript like any web page.
Why Separate Processes?
Separate processes buy you stability and security: one window crashing won't kill the app, and the UI can't freely poke the OS.
Chromium's Role
Chromium is the same engine as Chrome. It handles rendering, layout, and the DOM, keeping your app consistent across platforms.
Node.js's Role
Node.js brings the file system, networking, and npm packages into your app — the part that makes Electron more than just a browser.
const os = require('os');
console.log('Platform:', os.platform());
console.log('CPUs:', os.cpus().length);The Event Loop
The main process shares Node's event loop. Long synchronous work freezes the UI, so reach for async patterns instead.
setTimeout(() => console.log('runs later'), 0);
console.log('runs first');Process Communication Preview
Main and renderer are in separate memory spaces; they talk through IPC (inter-process communication). You will dive into it later.
The package.json Entry
Electron finds the main process file via the main field in package.json. The snippet below shows the minimal entry config.
{
"name": "my-app",
"main": "main.js",
"scripts": { "start": "electron ." }
}Cross-Platform Promise
Write once, run on Windows, macOS, and Linux. Electron bundles the runtime, so users never need a browser installed.
Putting It Together
It all loops together: the main process boots, makes a window, the renderer loads your page, and IPC links them — the heartbeat of every app.
Quick Check
Confirm your understanding of Electron processes.
Recap
You've got the architecture: one main process (Node.js) driving multiple renderer processes (Chromium), connected by IPC for safe desktop apps.
Frequently asked questions
Is the “Understanding Electron's Architecture” lesson free?
Yes — the full text of “Understanding Electron's Architecture” is free to read here on the web, and the Electron Desktop App Development course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Electron Desktop App Development course, upgrade to CoddyKit PRO.
What will I learn in “Understanding Electron's Architecture”?
Get a clear mental model of how Electron combines Chromium and Node.js, and how the main and renderer processes work together before you build bigger apps. You practise Electron Desktop App Development with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Electron Desktop App Development?
No prior experience is required. Electron Desktop App Development on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Understanding Electron's Architecture” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Electron Desktop App Development lesson?
Yes. Every Electron Desktop App Development lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- What is Electron?
- Setting Up Your Dev Environment
- Your First Electron Application
- Understanding Electron's Architecture