Overview

Electron is an open-source framework developed by GitHub and maintained by the OpenJS Foundation, designed for building cross-platform desktop applications using web technologies. It combines the Chromium rendering engine, which powers web browsers like Google Chrome, with the Node.js runtime environment. This architecture allows developers to use familiar web languages—HTML, CSS, and JavaScript—to create graphical user interfaces (GUIs) and access low-level operating system functionalities.

The framework is particularly well-suited for developers who have experience with web development and want to extend their skills to the desktop application space without learning new native programming languages like C++ or Swift. Electron abstracts away the complexities of platform-specific APIs, providing a unified JavaScript API for interactions such as managing windows, accessing the file system, and handling system notifications. This capability enables a single codebase to target macOS, Windows, and Linux operating systems, reducing development time and maintenance overhead.

Electron applications operate with two main process types: the main process and renderer processes. The main process, a Node.js environment, controls the application's lifecycle, creates web pages, and interacts with the operating system. Each web page runs in its own renderer process, which is a Chromium instance. This separation helps to isolate web content and prevent crashes in one renderer from affecting the entire application, similar to how modern web browsers manage tabs. However, bundling a full Chromium instance and Node.js runtime can result in larger application bundle sizes compared to native applications or frameworks like Tauri, which leverage the operating system's native webview.

Electron shines in scenarios requiring rapid prototyping and development of desktop applications that benefit from rich, interactive user interfaces. It is widely adopted for productivity tools, code editors, and communication platforms. Examples of applications built with Electron include Visual Studio Code, Slack, and Discord. Its extensive API documentation and active community support contribute to a productive developer experience, allowing for integration with a vast ecosystem of Node.js modules and web development tools.

Key features

  • Cross-platform compatibility: Build applications that run on macOS, Windows, and Linux from a single JavaScript codebase, reducing development and maintenance efforts.
  • Web technology stack: Utilize HTML, CSS, and JavaScript for UI development, leveraging existing web development skills and a broad ecosystem of web libraries and frameworks.
  • Node.js integration: Access Node.js APIs directly from the main process, enabling interaction with the file system, operating system, and other system-level functionalities.
  • Chromium rendering engine: Provides a consistent and modern web rendering environment across all supported platforms, ensuring UIs appear and behave predictably.
  • Native menu and notification support: Create native application menus, context menus, and system notifications that integrate seamlessly with the host operating system's UI.
  • Automatic updates: Built-in mechanisms for managing application updates, simplifying distribution and ensuring users always have the latest version.
  • Crash reporting: Tools for collecting and reporting application crashes, aiding in debugging and improving application stability.
  • Extensive API: A comprehensive API for interacting with the operating system, managing windows, dialogs, and other desktop-specific features, documented on the Electron API reference.

Pricing

As of May 2026, Electron is an entirely free and open-source framework.

Feature Availability
Electron Framework Free
Source Code Free and open source
Commercial Use Free
Community Support Free

Common integrations

  • React: Many Electron applications use React for building user interfaces. Developers can integrate React by following guides available from the React documentation.
  • Vue.js: Vue.js is another popular choice for front-end development within Electron apps, offering a progressive framework for UI creation.
  • Angular: For larger, enterprise-grade applications, Angular can be integrated with Electron to provide a structured framework for UI development.
  • Webpack: Often used for bundling JavaScript modules and assets for Electron applications, optimizing performance and deployment size.
  • TypeScript: Provides type safety and enhanced developer tooling for large-scale JavaScript projects, commonly integrated into Electron workflows. More information is available on the TypeScript documentation.
  • Node.js modules: Electron's Node.js integration allows for the use of any module from npm, extending capabilities for database interaction, network requests, and more.

Alternatives

  • Tauri: A framework for building cross-platform desktop applications using web technologies, similar to Electron, but leveraging native webviews and Rust for smaller bundle sizes and improved performance.
  • Flutter: Google's UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase, using the Dart programming language.
  • Qt: A cross-platform application development framework for C++, offering extensive libraries and tools for creating native desktop, mobile, and embedded applications.
  • NW.js: An application runtime based on Chromium and Node.js, similar to Electron, which allows developers to call Node.js modules directly from the DOM and build desktop applications with web technologies.
  • React Native for Desktop: An extension of React Native that enables building desktop applications for macOS and Windows, leveraging the React paradigm for UI development.

Getting started

To get started with Electron, you'll typically need Node.js and npm installed. The following example demonstrates a basic Electron application that opens a window displaying "Hello, Electron!"

First, create a new project directory and initialize it:

mkdir my-electron-app
cd my-electron-app
npm init -y

Next, install Electron as a development dependency:

npm install --save-dev electron

Create an index.html file for your web content:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello Electron!</title>
    <!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
    <meta
      http-equiv="Content-Security-Policy"
      content="script-src 'self' 'unsafe-inline';"
    />
  </head>
  <body>
    <h1>Hello, Electron!</h1>
    <p>This is a simple Electron application.</p>
  </body>
</html>

Create a main.js file, which will be your application's main process script:

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

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js') // Example for security, not strictly needed for this basic example
    }
  });

  win.loadFile('index.html');
}

app.whenReady().then(() => {
  createWindow();

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

Update your package.json to include a start script:

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "A minimal Electron application",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^latest_version"
  }
}

Replace ^latest_version with the actual latest Electron version installed. Finally, run your application:

npm start

This command will launch an Electron window displaying the content of index.html.