What Electron is

Electron is a framework for desktop apps on Windows, macOS and Linux. The app's interface is an ordinary web page built with HTML, CSS and JavaScript, and Node.js gives access to files, menus and system dialogs. The same app is built for all three systems.

What it is made of

Inside Electron there are two components you already know:

Every Electron app ships its own copy of Chromium and Node.js. That is why it works the same on any computer, but an installer weighs 80–100 MB or more.

Who uses it

Visual Studio Code, Slack, Discord, Figma for desktop, Obsidian and Postman are built with Electron. They show that web technologies work for large desktop apps too.

Version

The course targets current Electron versions (38 and newer). A new major version comes out roughly every eight weeks, but the API used in this course does not change between them. You need Node.js 22 or newer:

node -v
npm -v

Both commands should print a version number.

Modules: CommonJS

The main process and preload code in this course is written in CommonJS — with require() and module.exports. This is how the official examples and Electron Forge templates work, and a preload script in the default sandboxed mode cannot load ES modules at all. Page code is ordinary browser JavaScript.

// main.js
const { app, BrowserWindow } = require('electron');
const path = require('node:path');

The main file of the app starts with these lines in almost every lesson.

The running example

The whole course builds one app — "Notes": a window with a list of notes and an input field. Notes are saved to a file on disk, the app gets a menu, keyboard shortcuts and a tray icon, and at the end it is built into an installer.

Common mistake

Electron is not a way to "wrap a website". If the app only opens a remote site in a window, it pays all the costs of Electron (size, updates, security) and gains nothing. Choose Electron when the app really needs the computer's features: files, offline work, menus, the tray.