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: Korean | Simplified Chinese | Brazilian Portuguese | Traditional Chinese | Spanish | Turkish

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].

Downloads

To install prebuilt Electron binaries, use npm:

# Install as a development dependency
npm install electron --save-dev

# Install the `electron` command globally in your $PATH
npm install electron -g

See the releases page for prebuilt binaries, debug symbols, and more.

Mirrors

• China

Documentation

Guides and the API reference are located in the docs directory. It also contains documents describing how to build and contribute to Electron.

Documentation Translations

• Brazilian Portuguese
• Korean
• Japanese
• Spanish
• Simplified Chinese
• Traditional Chinese
• Turkish
• Thai
• Ukrainian
• Russian
• French

Quick Start

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

Community

You can ask questions and interact with the community in the following locations:

• electron category on the Atom forums
• #atom-shell channel on Freenode
• Atom channel on Slack
• electron-ru (Russian)
• electron-br (Brazilian Portuguese)
• electron-kr (Korean)
• electron-jp (Japanese)
• electron-tr (Turkish)
• electron-id (Indonesia)

Check out awesome-electron for a community maintained list of useful example apps, tools and resources.

License

MIT

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