electron
Advanced tools
Package description
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.
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}`);
});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 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.
Neutralinojs is a lightweight alternative to Electron. It allows you to build cross-platform desktop applications with fewer resources by using a lightweight web server and native OS functionalities. It is less feature-rich compared to Electron but can be a good choice for simpler applications.
Readme
Install Electron prebuilt binaries for
command-line use using npm. This module helps you easily install the electron
command for use on the command line without having to compile anything.
Electron is a JavaScript runtime that bundles Node.js
and Chromium. You use it similar to the node command on the command line for
executing JavaScript programs. For more info you can read this intro blog post
or dive into the Electron documentation.
Note As of version 1.3.1, this package is published to npm under two names:
electron and electron-prebuilt. You can currently use either name, but
electron is recommended, as the electron-prebuilt name is deprecated, and
will only be published until the end of 2016.
Download and install the latest build of Electron for your OS and add it to your
project's package.json as a devDependency:
npm install electron --save-dev
This is the preferred way to use Electron, as it doesn't require users to install Electron globally.
You can also use the -g flag (global) to symlink it into your PATH:
npm install -g electron
If that command fails with an EACCESS error you may have to run it again with sudo:
sudo npm install -g electron
Now you can just run electron to run electron:
electron
If you need to use an HTTP proxy you can set these environment variables.
If you want to change the architecture that is downloaded (e.g., ia32 on an
x64 machine), you can use the --arch flag with npm install or set the
npm_config_arch environment variable:
npm install --arch=ia32 electron
Works on Mac, Windows and Linux OSes that Electron supports (e.g. Electron does not support Windows XP).
The version numbers of this module match the version number of the official Electron releases, which do not follow semantic versioning.
This module is automatically released whenever a new version of Electron is released thanks to electron-prebuilt-updater, originally written by John Muhl.
First, you have to write an Electron application.
Then, you can run your app using:
electron your-app/
Find more at the awesome-electron list.
Most people use this 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:
var electron = require('electron')
var proc = require('child_process')
// will something similar to print /Users/maf/.../Electron
console.log(electron)
// spawn Electron
var child = proc.spawn(electron)
FAQs
Build cross platform desktop apps with JavaScript, HTML, and CSS
The npm package electron receives a total of 419,851 weekly downloads. As such, electron popularity was classified as popular.
We found that electron demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.
Security News
A JavaScript library maintainer is under fire after merging a controversial PR to support legacy versions of Node.js.
Security News
Results from the 2023 State of JavaScript Survey highlight key trends, including Vite's dominance, rising TypeScript adoption, and the enduring popularity of React. Discover more insights on developer preferences and technology usage.