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.
:memo: Available Translations: 🇨🇳 🇧🇷 🇪🇸 🇯🇵 🇷🇺 🇫🇷 🇺🇸 🇩🇪.
View these docs in other languages on our Crowdin project.
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
Visual Studio Code 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 coc@electronjs.org.
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
For more installation options and troubleshooting tips, see
installation. For info on how to manage Electron versions in your apps, see
Electron versioning.
Platform support
Each Electron release provides binaries for macOS, Windows, and Linux.
- macOS (Big Sur and up): Electron provides 64-bit Intel and Apple Silicon / ARM binaries for macOS.
- Windows (Windows 10 and up): Electron provides
ia32
(x86
), x64
(amd64
), and arm64
binaries for Windows. Windows on ARM support was added in Electron 5.0.8. Support for Windows 7, 8 and 8.1 was removed in Electron 23, in line with Chromium's Windows deprecation policy. - Linux: The prebuilt binaries of Electron are built on Ubuntu 20.04. They have also been verified to work on:
- Ubuntu 18.04 and newer
- Fedora 32 and newer
- Debian 10 and newer
Quick start & Electron Fiddle
Use Electron Fiddle
to build, run, and package small Electron experiments, to see code examples for all of Electron's APIs, and
to try out different versions of Electron. It's designed to make the start of your journey with
Electron easier.
Alternatively, 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
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('node:child_process')
console.log(electron)
const child = proc.spawn(electron)
Mirrors
See the Advanced Installation Instructions to learn how to use a custom mirror.
Documentation translations
We crowdsource translations for our documentation via Crowdin.
We currently accept translations for Chinese (Simplified), French, German, Japanese, Portuguese,
Russian, and Spanish.
Contributing
If you are interested in reporting/fixing issues and contributing directly to the code base, please see CONTRIBUTING.md for more information on what we're looking for and how to get started.
Info on reporting bugs, getting help, finding third-party tools and sample apps,
and more can be found on the Community page.
License
MIT
When using Electron logos, make sure to follow OpenJS Foundation Trademark Policy.