Electron JS: How I Built My First Cross-Platform App

What is Electron JS?

If you’ve ever dreamt of building a desktop app using HTML, CSS, and JavaScript, then Electron JS is your best friend.

In simple terms, ElectronJS is an open-source framework developed by GitHub. It allows you to build cross-platform desktop applications with a single codebase — meaning your app can run on Windows, macOS, and Linux without rewriting it separately for each OS.

When I first heard about Electron JS, I thought, “Wait… I can use my web skills to build a desktop app? That’s wild!” And honestly, that’s what pulled me in.

Here’s how it works in a nutshell:

• ElectronJS combines Chromium (for the user interface) and Node.js (for backend logic).
• So you get the power of the web browser plus system-level access to files, APIs, and processes.
• You can package it up into an installable desktop app — just like Slack or VS Code.

Why Developers Love Electron JS

I still remember my first coding project using ElectronJS. It was a simple note-taking app — nothing fancy, but it felt magical. I used HTML for the layout, a touch of CSS for styling, and a sprinkle of JavaScript for functionality. In no time, I had an actual desktop app running on my computer.

That’s when it hit me — Electron JS is not just a framework; it’s a bridge between web development and desktop software.

Here’s why developers love it:
✅ One codebase, multiple platforms — no need to learn Swift, C#, or Java.
✅ Fast development — reuse your web development skills.
✅ Huge community — tons of libraries, documentation, and open-source support.
✅ Famous apps built with ElectronJS:

• 💬 Slack
• 🧑‍💻 Visual Studio Code
• 🎵 Spotify desktop
• 📷 Figma

How Electron JS Works

Okay, let’s geek out for a moment. How does Electron JS actually make this possible?

It has two main processes:

1. Main Process – Runs Node.js and handles system-level operations like file access, app lifecycle, menus, and notifications.
2. Renderer Process – Renders the user interface using Chromium (basically a mini web browser inside your app).

They talk to each other using an inter-process communication (IPC) system.

Think of it like this:
👉 The main process is your brain (logic),
👉 The renderer process is your face (interface).

Together, they make a complete desktop experience.

How I Built My First App Using Electron JS

When I first started learning Electron JS, I was overwhelmed by the setup. But after a few hours, things started to click.

Here’s how I did it (and how you can too):

Step 1: Set up Node.js

You’ll need Node.js installed on your system. (If you haven’t already, get it from nodejs.org).

Step 2: Initialize your project

npm init
npm install electron --save-dev

Step 3: Create your main file

const { app, BrowserWindow } = require('electron');

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
  });
  win.loadFile('index.html');
}

app.whenReady().then(createWindow);

Step 4: Add your HTML

Create an index.html file just like any website you’ve built.

Step 5: Run it

npx electron .

And there it was — my first desktop app blinking back at me. That feeling? Unforgettable.

What Makes Electron JS So Powerful?

The best part about Electron JS is how flexible it is. You can integrate your favorite frontend libraries like React, Vue, or Angular — all within Electron.

I later rebuilt my small project with React + Electron JS, and the performance boost was incredible.

Also, the Electron framework allows native features like:

• System notifications 🔔
• Clipboard access 📋
• Dark mode support 🌙
• File system integration 📂

Basically, it makes your web app feel like a real desktop app.

Pros and Cons:

Let’s be real for a second. No framework is perfect — not even Electron JS.

✅ Pros:

• Cross-platform magic ✨
• Reusable web knowledge
• Massive ecosystem
• Open-source & constantly evolving

❌ Cons:

• Can be heavy on memory
• Performance may lag for large-scale apps
• Bundle sizes can get big

But here’s the thing — for most small to medium projects, Electron JS is still unbeatable. I’ve seen startups, indie devs, and freelancers thrive with it.

Real-World Apps Built on Electron JS

Whenever someone says, “Electron JS is slow,” I just show them this list:

• Visual Studio Code (Microsoft’s baby, loved by developers worldwide)
• Slack (we all use it, don’t we?)
• Discord (gamers’ favorite)
• Figma (UI/UX designers swear by it)
• Tidal, GitHub Desktop, and Notion

All these industry-leading apps prove one thing — Electron JS is production-ready.

If you want to explore more, check out Electron’s official website where they showcase popular open-source projects.

How to Learn Electron JS in 2025

If you’re serious about mastering Electron JS, here’s what worked for me:

1. Start small — build a simple to-do app.
2. Then, explore IPC communication between processes.
3. Integrate React or Vue for better UI.
4. Experiment with native APIs (notifications, files, etc.).
5. Deploy your app using tools like Electron Builder.

I personally used, Electron’s docs, and Wikitechy articles to learn.
You can also explore communities on, Dev.to, or GitHub Discussions — developers there are super helpful.

Final Thoughts:

If I had to describe Electron JS in one line, I’d say —

“It’s the ultimate bridge between the web and the desktop.”

For any web developer who wants to expand their reach into desktop apps, Electron JS is a game-changer.

It taught me not just how to build, but how to think cross-platform. And honestly? It gave me confidence — the kind you get when you ship your first real app.

Want to learn more about React ?, Kaashiv Infotech Offers React course, Full Stack Development Course and more Visit Their website www.kaashivinfotech.com.

Related Reads:

• How to Build React Forms That Actually Work (A Developer’s Real Talk)
• Generator Function in JavaScript & next() Method in 2025