Electron

Description #

Electron is an open-source framework that allows developers to build cross-platform desktop apps using web technologies like JavaScript, HTML, and CSS.

History #

Created by GitHub in 2013 (originally called Atom Shell), Electron gained massive popularity after being used to build the Atom text editor. Its adoption expanded with apps like Slack, Discord, and Visual Studio Code.

Hello World Code #

const { app, BrowserWindow } = require('electron');

app.whenReady().then(() => {
  const win = new BrowserWindow();
  win.loadURL('data:text/html,<h1>Hello, World!</h1>');
});

How to Run #

Option 1: Online
StackBlitz Electron Starter

Option 2: Local

npm install electron --save-dev
npx electron .

Key Concepts #

• Chromium + Node.js runtime
• Single codebase for Windows, macOS, Linux
• Full access to OS-level APIs
• Auto-updates and packaging tools
• Inter-process communication (IPC)
• System tray, notifications, clipboard APIs
• Integrates with native modules
• Uses main and renderer processes
• Developer-friendly CLI
• Popular for rapid prototyping of desktop tools

Try It Online #

https://stackblitz.com/@electron

Fun Facts #

Despite its criticism for memory usage, Electron is used by high-performance tools like VS Code and Figma due to its extensibility and speed of development.

Resources #

Official site
Docs
GitHub
Community