Skip to content

Electron

October 20, 2023
July 19, 2015

Electron | Build cross-platform desktop apps with JavaScript, HTML, and CSS. GitHub
previously Atom Shell, is a platform that bundles Chromium’s rendering library and Node.js runtime for developers to write cross-platform desktop applications with JavaScript and HTML.

#216: GitHub's Electron with Zeke Sikelianos - Changelog
ELECTRON: why people HATE it, why devs USE it - YouTube

Build a Desktop App with Electron... But Should You? - YouTube
How to Use Electron.js for Building Desktop Applications with JavaScript, HTML, and CSS - DEV Community

Electron 开发,如何入坑?

Getting Started w/ Electron - YouTube 2021-12
Electron Mini Tutorials - YouTube

WebView2 and Electron | Electron WebView2 is available on OS level

Contenders

nw-js

Electron is very similar to the NW.js project but the differences are explained here.
NW.js & Electron Compared (2016 Edition) - TangibleJS
Why I prefer NW.js over Electron? (2018 comparison) | Hacker Noon
html5 - What are the functional differences between NW.js, Brackets-Shell and Electron? - Stack Overflow
Node-Webkit vs Electron - Stack Overflow

Quark
Nishkalkashyap/Quark-electron: Quark is a cross-platform, integrated development environment for rapidly building - functional , prototypal projects, written in HTML, CSS and JavaScript with native desktop app like capabilities.

Ultralight - Pure-GPU HTML UI Engine for Desktop and Games

opensumi/core: 🚀 A framework helps you quickly build Cloud or Desktop IDE products.

NeutralinoJs | Portable and lightweight cross platform application development framework.
neutralinojs/evaluation: Neutralinojs vs Electron vs Nw.js


electron/electron-api-demos: Explore the Electron APIs
electron/electron-quick-start: Clone to try a simple Electron app

Community | Electron
sindresorhus/awesome-electron
bcomnes/electron-handbook
maxogden/elementary-electron: NodeSchool workshop for learning Electron
zeke/electron-universe: The Electron app I created as a slide deck for my talk about Electron at GitHub Universe 2016.

sindresorhus/electron-boilerplate: Boilerplate to kickstart creating an app with Electron
chentsulin/electron-react-boilerplate: Live editing development on desktop app

Electron Userland

Desktop Apps With Electron And Kendo UI -Telerik Developer Network
Creating Desktop Applications With AngularJS and GitHub Electron | Scotch
Background Processes in Electron

Bundler

How to create a basic Electron app with Vite and React - YouTube

Kiyozz/electron-esbuild: Create Electron apps using esbuild and your favorite frontend tool
electron-vite/electron-vite-vue: 🥳 Really simple Electron + Vite + Vue boilerplate.
Next Generation Electron Build Tooling | electron-vite
How to create an Electron application with Vite - DEV Community
⚡️ Vite 整合 Electron 总结 - 知乎

Packager

Distributable Creators

javascript - electron-builder vs electron-packager - Stack Overflow
electron-builder > electron-packager

electron-builder
electron-userland/electron-builder: Complete solution to package and deploy Electron apps

Getting Started - Electron Forge
electron-userland/electron-forge: A complete tool for creating, publishing, and installing modern Electron applications

electron/electron-packager: Customize and package your Electron app with OS-specific bundles (.app, .exe, etc.) via JS or CLI

Modules

Spectron testing framework

electron/asar: Simple extensive tar-like archive format with indexing
maxogden/electron-spawn: easy way to run code inside of a headless electron window from the CLI
sindresorhus/electron-dl
maxogden/menubar: ➖ high level way to create menubar desktop applications with electron

OsamaAbbas/bytenode: A minimalist bytecode compiler for Node.js
How to Compile Node.js Code Using Bytenode? | Hacker Noon

Debugging

How to debug electron production binaries - Stack Overflow

Run app with --args --remote-debugging-port=8315, then open http://localhost:8315/ in Chrome.

Application Debugging | Electron
Debugging the Main Process | Electron

Devtron devtool
sindresorhus/electron-debug

pd4d10/debugtron: Debug in-production Electron based app

Wrapper

nativefier/nativefier: Make any web page a desktop application

Fluid - Turn Your Favorite Web Apps into Real Mac Apps.

Photon
connors/photon: The fastest way to build beautiful Electron apps using simple HTML and CSS

railsware/bozon: Bootstrap, Build, Run and Package Electron application with ease

ŷhat | How we built Rodeo with Electron

Features

First check version of Electron and it dependencies.

Then check the features supported:
Chromium Blog
Chrome Platform Status
Previous Releases | Node.js

Internals

Electron Internals: Using Node as a Library - Electron
Electron Internals: Message Loop Integration - Electron
Use V8 and Chromium Features in Electron - Electron

Practice on embedding Node.js into Atom Editor // Speaker Deck 2014, still Atom Shell

Tips and Tricks

Custom Title Bar in ElectronJS - How to create a custom title bar in your own electron app. - YouTube