← Back to Frameworks

Electron

Cross-platform desktop application framework based on Chromium and Node.js. Enables native app development using web technologies (HTML, CSS, JavaScript). Adopted by many renowned applications like Visual Studio Code, Discord, and Slack.

DesktopCross-platformJavaScriptNode.jsChromium

GitHub Overview

electron/electron

:electron: Build cross-platform desktop apps with JavaScript, HTML, and CSS

Stars117,485
Watchers2,809
Forks16,221
Created:April 12, 2013
Language:C++
License:MIT License

Topics

c-plus-pluschromecsselectronhtmljavascriptnodejsv8works-with-codespaces

Star History

electron/electron Star History
Data as of: 7/17/2025, 10:32 AM

Framework

Electron

Overview

Electron is a cross-platform desktop app development framework combining Chromium browser engine with Node.js runtime. Build native apps using web technologies.

Details

Electron is a powerful framework for building cross-platform desktop applications using web technologies (HTML, CSS, JavaScript). Developed by GitHub (now Microsoft), it has been adopted by numerous prominent applications including Visual Studio Code, Slack, Discord, WhatsApp Desktop, Spotify, and Figma.

As of 2025, Electron has the most mature ecosystem for desktop app development and represents the top choice for web developers to leverage existing skills in creating desktop applications. It can utilize Node.js's rich ecosystem, enabling access to native APIs, file system operations, system notifications, and menu bar integration.

However, since it includes Chromium and Node.js, applications tend to be large in size and consume more memory. Despite these challenges, its high development efficiency and rich functionality continue to make it the choice of many companies and developers.

Advantages & Disadvantages

Advantages

  • Web Technology Leverage: Direct use of existing HTML/CSS/JavaScript skills
  • Cross-platform: Same code runs on Windows, macOS, and Linux
  • Rich Ecosystem: Access to npm's vast package library
  • Native APIs: Access to file system, notifications, menus, and other OS native features
  • Mature Tooling: Comprehensive development tools, debugging environment, and packaging
  • Enterprise Adoption: Proven track record with VS Code, Slack, Discord
  • Active Community: Global developer community and support

Disadvantages

  • Resource Usage: High memory consumption and disk space requirements
  • Startup Time: Slower startup compared to native apps
  • Performance: May underperform in CPU-intensive tasks
  • Security: Security considerations inherited from web technologies
  • Bundle Size: Large distribution package size

Key Links

Code Examples

Basic Electron App

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

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  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();
  }
});

HTML File

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello Electron!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>We are using Node.js <span id="node-version"></span></p>
    <p>Chromium <span id="chrome-version"></span></p>
    <p>and Electron <span id="electron-version"></span></p>
    <script src="renderer.js"></script>
  </body>
</html>

Renderer Process

// renderer.js
document.getElementById('node-version').innerText = process.versions.node;
document.getElementById('chrome-version').innerText = process.versions.chrome;
document.getElementById('electron-version').innerText = process.versions.electron;

Creating Menu Bar

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

const template = [
  {
    label: 'File',
    submenu: [
      {
        label: 'New',
        accelerator: 'CmdOrCtrl+N',
        click: () => {
          console.log('New clicked');
        }
      },
      {
        label: 'Open',
        accelerator: 'CmdOrCtrl+O',
        click: () => {
          console.log('Open clicked');
        }
      },
      { type: 'separator' },
      {
        label: 'Quit',
        accelerator: process.platform === 'darwin' ? 'Cmd+Q' : 'Ctrl+Q',
        click: () => {
          app.quit();
        }
      }
    ]
  },
  {
    label: 'Edit',
    submenu: [
      { role: 'undo' },
      { role: 'redo' },
      { type: 'separator' },
      { role: 'cut' },
      { role: 'copy' },
      { role: 'paste' }
    ]
  }
];

const menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);

File Dialog

// main.js
const { app, BrowserWindow, dialog, ipcMain } = require('electron');
const fs = require('fs');

ipcMain.handle('open-file-dialog', async () => {
  const result = await dialog.showOpenDialog({
    properties: ['openFile'],
    filters: [
      { name: 'Text Files', extensions: ['txt'] },
      { name: 'All Files', extensions: ['*'] }
    ]
  });

  if (!result.canceled) {
    const filePath = result.filePaths[0];
    const content = fs.readFileSync(filePath, 'utf-8');
    return { filePath, content };
  }
  return null;
});

Preload Script (Secure Version)

// preload.js
const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
  openFile: () => ipcRenderer.invoke('open-file-dialog'),
  onMenuClick: (callback) => ipcRenderer.on('menu-click', callback),
  platform: process.platform,
  versions: process.versions
});

Using API in Renderer

// renderer.js
document.addEventListener('DOMContentLoaded', () => {
  // Open file button
  document.getElementById('open-file').addEventListener('click', async () => {
    const result = await window.electronAPI.openFile();
    if (result) {
      document.getElementById('file-content').textContent = result.content;
      document.getElementById('file-path').textContent = result.filePath;
    }
  });

  // Display version information
  document.getElementById('platform').textContent = window.electronAPI.platform;
  document.getElementById('versions').textContent = 
    JSON.stringify(window.electronAPI.versions, null, 2);
});

Showing Notifications

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

function showNotification() {
  new Notification({
    title: 'Electron App',
    body: 'This is a notification message!',
    icon: 'assets/icon.png'
  }).show();
}

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

package.json Configuration

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "build": "electron-builder",
    "dist": "electron-builder --publish=never"
  },
  "author": "Your Name",
  "license": "MIT",
  "devDependencies": {
    "electron": "^23.0.0",
    "electron-builder": "^23.0.0"
  }
}

Project Creation and Execution

# Create new directory
mkdir my-electron-app && cd my-electron-app

# Initialize npm project
npm init -y

# Install Electron as dev dependency
npm install electron --save-dev

# Run the application
npm start

# Create project with Electron Forge (recommended)
npm install -g @electron-forge/cli
electron-forge init my-app
cd my-app
npm start

# Package the application
npm run make