How to Get Started with ElectronJS
Posted: Jan. 28, 2026
ElectronJS lets you build cross-platform desktop applications using technologies you already know: JavaScript, HTML, and CSS. Popular apps like VS Code, Slack, and Discord are built with Electron.
In this guide, we’ll walk through:
- What Electron is
- How it works
- How to create your first Electron app
- A few essential code examples
What Is ElectronJS?
Electron combines:
- Node.js (for backend/system access)
- Chromium (for rendering the UI)
- JavaScript (to glue everything together)
This allows you to ship desktop apps for Windows, macOS, and Linux from a single codebase.
How Electron Works (High Level)
An Electron app has two main processes:
-
Main Process
- Controls the app lifecycle
- Creates windows
- Has access to Node.js APIs
-
Renderer Process
- Runs inside each window
- Displays HTML/CSS
- Similar to a browser environment
Prerequisites
Before getting started, make sure you have:
- Node.js (v18+ recommended)
- npm or yarn
- Basic knowledge of JavaScript
Check Node.js:
node -vStep 1: Create a New Project
Create a new folder and initialize a Node.js project:
mkdir my-electron-app
cd my-electron-app
npm init -yInstall Electron as a development dependency:
npm install electron --save-devStep 2: Project Structure
A simple Electron app might look like this:
my-electron-app/
├─ main.js
├─ index.html
├─ package.jsonStep 3: Create the Main Process
Create a file called main.js:
const { app, BrowserWindow } = require("electron");
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
});
win.loadFile("index.html");
}
app.whenReady().then(createWindow);
app.on("window-all-closed", () => {
if (process.platform !== "darwin") {
app.quit();
}
});This file:
- Starts Electron
- Creates a window
- Loads an HTML file
Step 4: Create the Renderer (UI)
Create an index.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My Electron App</title>
</head>
<body>
<h1>Hello from Electron 👋</h1>
<p>Your desktop app is running!</p>
</body>
</html>Step 5: Update package.json
Add a start script so you can run your app easily:
{
"name": "my-electron-app",
"version": "1.0.0",
"main": "main.js",
"scripts": {
"start": "electron ."
}
}Step 6: Run the App
Start your Electron app with:
npm startYou should see a desktop window displaying your HTML 🎉
Example: Using Node.js in Electron
Electron lets you access system features using Node.js.
Example (in main.js):
const os = require("os");
console.log("Platform:", os.platform());
console.log("CPU Cores:", os.cpus().length);This is something regular browser apps cannot do.
Example: Preload Script (Best Practice)
For security, Electron recommends using a preload script to expose safe APIs.
// preload.js
const { contextBridge } = require("electron");
contextBridge.exposeInMainWorld("api", {
sayHello: () => "Hello from preload!"
});Then load it in main.js:
const win = new BrowserWindow({
webPreferences: {
preload: __dirname + "/preload.js"
}
});Use it in index.html:
<script>
console.log(window.api.sayHello());
</script>Next Steps
Once you’re comfortable, explore:
- IPC (inter-process communication)
- App packaging with electron-builder
- Security best practices
- Auto updates and native menus
ElectronJS is a powerful way to bring web skills to the desktop world. While it’s not always the lightest solution, it shines when you want rapid development, cross-platform support, and rich UI capabilities.
Do you need an app?
Do you need an App for your project? let us create one for you!
Read more!
@alxlynnhd
What is OpenClaw?
Artificial intelligence is rapidly evolving from simple chatbots into autonomous systems that can…
Topic: Tech
@alxlynnhd
Why Promises Can't Be Stopped in JavaScript
JavaScript developers often ask a simple but surprisingly deep question: why can’t you stop a…
Topic: Tech
@alxlynnhd
Getting Started with MCP
The term MCP can mean different things depending on context, but in today’s tech landscape it most…
Topic: Tech
@alxlynnhd
How to Use Old RAM in Light of Recent Price Hikes
With RAM prices climbing again due to supply chain issues, increased demand, and new-generation…
Topic: Tech
@alxlynnhd
Why YouTube is an Ideal Resource for Learning Japanese
Learning Japanese can feel like a daunting challenge — three writing systems, unfamiliar grammar…
Topic: Tech
@alxlynnhd
How to write scalable and excellent code
Writing code that works is easy. Writing scalable, maintainable, and excellent code is the real…
Topic: Tech