electron

What is electron?

Electron is a framework for creating native applications with web technologies like JavaScript, HTML, and CSS. It combines the Chromium rendering engine and the Node.js runtime, allowing you to build cross-platform desktop applications.

What are electron's main functionalities?

Creating a Browser Window

This feature allows you to create a new browser window in your Electron application. The code sample demonstrates how to create a window and load a URL into it.

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

app.on('ready', () => {
  const mainWindow = new BrowserWindow({ width: 800, height: 600 });
  mainWindow.loadURL('https://example.com');
});

Inter-Process Communication (IPC)

Electron provides IPC (Inter-Process Communication) to allow communication between the main process and renderer processes. The code sample shows how to send and receive messages asynchronously.

const { ipcMain, ipcRenderer } = require('electron');

// Main process
ipcMain.on('asynchronous-message', (event, arg) => {
  console.log(arg); // prints 'ping'
  event.reply('asynchronous-reply', 'pong');
});

// Renderer process
ipcRenderer.send('asynchronous-message', 'ping');
ipcRenderer.on('asynchronous-reply', (event, arg) => {
  console.log(arg); // prints 'pong'
});

Using Node.js Modules

Electron allows you to use Node.js modules in your application. The code sample demonstrates how to use the 'fs' module to read a file.

const fs = require('fs');

fs.readFile('/path/to/file', (err, data) => {
  if (err) throw err;
  console.log(data.toString());
});

Packaging the Application

Electron applications can be packaged for distribution using tools like 'electron-packager'. The code sample shows how to package an Electron app for Windows using a child process.

const { exec } = require('child_process');

exec('electron-packager . myApp --platform=win32 --arch=x64', (err, stdout, stderr) => {
  if (err) {
    console.error(`exec error: ${err}`);
    return;
  }
  console.log(`stdout: ${stdout}`);
  console.error(`stderr: ${stderr}`);
});

Other packages similar to electron

nw

NW.js (previously known as node-webkit) is another framework for building desktop applications using web technologies. It also combines Node.js and Chromium but offers different APIs and a different approach to application architecture compared to Electron.

proton-native

Proton Native is a framework for building native desktop applications using React. Unlike Electron, which uses web technologies and Chromium, Proton Native uses native components for rendering, which can result in better performance and a more native look and feel.

README

:memo: Available Translations: 🇨🇳 🇹🇼 🇧🇷 🇪🇸 🇰🇷 🇯🇵 🇷🇺 🇫🇷 🇹🇭 🇳🇱 🇹🇷 🇮🇩 🇺🇦 🇨🇿 🇮🇹. View these docs in other languages at electron/i18n.

The Electron framework lets you write cross-platform desktop applications using JavaScript, HTML and CSS. It is based on Node.js and Chromium and is used by the Atom editor and many other apps.

Follow @ElectronJS on Twitter for important announcements.

This project adheres to the Contributor Covenant code of conduct. By participating, you are expected to uphold this code. Please report unacceptable behavior to [e-mail].

Installation

To install prebuilt Electron binaries, use npm. The preferred method is to install Electron as a development dependency in your app:

npm install electron --save-dev [--save-exact]

The --save-exact flag is recommended for Electron prior to version 2, as it does not follow semantic versioning. As of version 2.0.0, Electron follows semver, so you don't need --save-exact flag. For info on how to manage Electron versions in your apps, see Electron versioning.

For more installation options and troubleshooting tips, see installation.

Quick start

Clone and run the electron/electron-quick-start repository to see a minimal Electron app in action:

git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install
npm start

Resources for learning Electron

• electronjs.org/docs - all of Electron's documentation
• electron/electron-quick-start - a very basic starter Electron app
• electronjs.org/community#boilerplates - sample starter apps created by the community
• electron/simple-samples - small applications with ideas for taking them further
• electron/electron-api-demos - an Electron app that teaches you how to use Electron
• hokein/electron-sample-apps - small demo apps for the various Electron APIs

Programmatic usage

Most people use Electron from the command line, but if you require electron inside your Node app (not your Electron app) it will return the file path to the binary. Use this to spawn Electron from Node scripts:

const electron = require('electron')
const proc = require('child_process')

// will print something similar to /Users/maf/.../Electron
console.log(electron)

// spawn Electron
const child = proc.spawn(electron)

Mirrors

• China

Documentation Translations

Find documentation translations in electron/i18n.

Community

Info on reporting bugs, getting help, finding third-party tools and sample apps, and more can be found in the support document.

License

MIT

When using the Electron or other GitHub logos, be sure to follow the GitHub logo guidelines.