What Electron is

Electron lets you build a desktop application with HTML, CSS, and JavaScript. It bundles Chromium, the browser engine behind Chrome, together with Node.js in one runtime. On top of that it adds APIs for the things a web page can’t do: windows, menus, native dialogs, and the filesystem.

Chromium draws your interface. Node.js and the Electron APIs do the privileged work. Your users install one application. They don’t need Node.js or a particular browser on their computer.

This is how VS Code, Slack, and many other desktop apps you use every day are built.

It is not one big JavaScript environment

Here is the thing that surprises most people when they start. Electron does not turn your page into one all-powerful JavaScript environment where the DOM and fs live side by side.

An Electron app runs several processes, with security boundaries between them. The page runs in a renderer process and behaves much like a browser tab. Privileged work, like reading files or opening a native dialog, belongs to the main process. A small preload script sits in between and exposes only the bridge you decide to expose.

We will spend a whole module on this. For now, remember that the page does not get Node.js for free, and that’s a good thing.

What shipping a browser costs

Bundling the runtime gives you the same web capabilities on macOS, Windows, and Linux. Nobody has to worry about which browser version the user has installed.

It also has costs, and I want you to know them before we start:

• the application contains a browser engine, so downloads and memory use are larger than a native app
• every platform you support needs its own packaging and its own round of testing
• you must keep Electron current, because Chromium and Node.js security fixes arrive through Electron updates
• a renderer bug becomes a desktop bug if you hand privileges to page code carelessly

What we will build

During this course we build Desktop Notes. It stores notes on the local disk, has a native application menu and a native save dialog, and at the end we produce an installable application.

The note editor itself is not the point. The point is the boundary around it. Text typed by a user is untrusted data. It crosses a narrow API before any privileged code touches the computer. Every lesson in this course keeps that boundary in place, and by the end you will know how to design one for your own apps.