What is Electron and How is it Related to Atom Editor?

Mar 19, 2026

The Problem

I wanted to build a desktop application. As a web developer, I knew JavaScript, HTML, and CSS. But building a desktop app meant learning C++ for Windows, Objective-C for macOS, or dealing with Qt or JavaFX.

The barrier to entry felt impossible. I would need months to learn native development for each platform.

Then I heard about Electron. People said it lets you build desktop apps with web technologies. But I was confused: what exactly is Electron? And why does everyone keep mentioning something called “Atom”?

What is Electron?

Electron is an open-source framework that combines Chromium (the browser engine behind Chrome) with Node.js. This combination lets you build desktop applications using JavaScript, HTML, and CSS.

The key insight: you already know how to build Electron apps if you know web development.

Electron = Chromium + Node.js + Native APIs

Your Electron App
├── Renderer Process (Web Technologies)
│   ├── JavaScript
│   ├── HTML/CSS
│   └── React/Vue/etc.
├── IPC (Inter-Process Communication)
└── Main Process (Node.js Runtime)
    ├── File system access
    ├── Native APIs
    └── System integration

The Atom Connection

I kept seeing “Atom” mentioned alongside Electron. After digging into the history, the connection became clear:

Electron was originally called “Atom Shell.”

In 2013, GitHub needed a foundation for their new text editor called Atom. They built a framework that combined Chromium and Node.js. This framework was named “Atom Shell.”

The framework was so useful that other companies started using it. In 2015, GitHub renamed it to “Electron” to make it clear that it was a general-purpose framework, not just for Atom.

From a Reddit discussion I found:

“Atom’s real legacy is Electron. The shell it ran on powers VS Code, Discord, Slack, half the desktop apps people use now.”

Atom the editor was discontinued in 2022. But Electron—the framework born from Atom—lives on and powers thousands of applications.

A Simple Electron Example

Let me show you the minimal structure of an Electron app:

Main Process (main.js)

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

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  })

  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

Renderer Process (index.html)

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My Electron App</title>
</head>
<body>
  <h1>Hello from Electron!</h1>
  <p>This app runs on: <span id="platform"></span></p>
  <script>
    // Node.js works in the renderer!
    document.getElementById('platform').textContent = process.platform
  </script>
</body>
</html>

Package Configuration

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "build": "electron-builder"
  },
  "devDependencies": {
    "electron": "^28.0.0",
    "electron-builder": "^24.9.1"
  }
}

Run it with:

npm install
npm start

A desktop window appears. Your web code is now a desktop app.

How Main and Renderer Processes Communicate

Electron uses Inter-Process Communication (IPC) to let the renderer (your web code) talk to the main process (Node.js).

Main Process Handles Requests

const { ipcMain } = require('electron')

ipcMain.handle('read-file', async (event, filePath) => {
  const fs = require('fs').promises
  return await fs.readFile(filePath, 'utf-8')
})

Renderer Sends Requests

const { ipcRenderer } = require('electron')

async function openFile() {
  const content = await ipcRenderer.invoke('read-file', '/path/to/file.txt')
  console.log(content)
}

This separation is critical: the renderer handles UI, while the main process handles system operations like file access.

What Apps Use Electron?

I was surprised to learn how many popular apps are built with Electron:

Application	Why Electron Works
VS Code	Cross-platform code editor
Discord	Gaming communication app
Slack	Team messaging
Skype	Video calls
Twitch Desktop	Live streaming
Notion	Note-taking app
Postman	API testing

When Atom was discontinued in 2022, many people asked: “Will Electron die too?”

The answer is no. Electron is now maintained by the OpenJS Foundation and has over 100,000 stars on GitHub. It has far outgrown its origins.

The Trade-offs

Electron isn’t perfect. I ran into these issues:

Bundle Size

Typical Electron app bundle size:
├── app.asar: 50-150MB (your code)
├── Chromium: 100-150MB
├── Node.js: 20-30MB
└── Total: 170-330MB

Compare to native alternatives:
├── Tauri (Rust): 10-20MB
├── Qt/C++: 15-30MB
└── Native platform: 5-15MB

Yes, Electron apps are larger. But disk space is cheap, and download speeds are fast.

Performance Concerns

People say “Electron apps are slow.” But VS Code proves Electron can be fast. The performance depends on how you build it, not the framework itself.

Common Misconceptions

“Electron is just a browser wrapper”

No. It’s Chromium + Node.js with native integrations. You can:

Access the file system
Create native menus
Send desktop notifications
Auto-update your app
Integrate with OS-level features

“Atom created Electron just for itself”

Electron was designed to be general-purpose from the start. That’s why other companies adopted it so quickly.

Why Electron Matters for Developers

Before Electron, building desktop apps required:

Native languages: C++, Objective-C, or .NET
Separate codebases: Windows, macOS, Linux needed different teams
High barriers: Desktop development skills were specialized
Slow iteration: UI changes required recompilation

After Electron:

Any web developer can build desktop apps
One codebase runs on Windows, macOS, and Linux
Hot reload for faster development
Easy access to npm ecosystem

Timeline: From Atom to Industry Standard

Year	Event
2011	GitHub starts Atom development
2013	Atom Shell released
2014	Atom 1.0 released (first major Electron app)
2015	Atom Shell renamed to Electron
2015	Microsoft releases VS Code on Electron
2016	Slack and Discord adopt Electron
2022	Atom discontinued
2024	Over 30,000 Electron apps exist

When to Use Electron

I use Electron when:

I need cross-platform desktop support
My team knows web technologies
I want rapid iteration with hot reload
I need access to npm packages

I consider alternatives (Tauri, Neutralino.js) when:

Bundle size is critical
Memory usage must be minimal
Target users have older hardware

Summary

Electron was born from Atom editor’s need for a cross-platform framework. Originally called “Atom Shell,” it combined Chromium and Node.js to let web developers build desktop applications.

Atom was discontinued in 2022, but Electron lives on as the foundation for VS Code, Discord, Slack, Notion, and thousands of other desktop applications.

The key insight: if you know web development, you already know how to build Electron apps. The framework removed the barrier between web and desktop development.

Final Words + More Resources

My intention with this article was to help others share my knowledge and experience. If you want to contact me, you can contact by email: Email me

Here are also the most important links from this article along with some further resources that will help you in this scope:

Oh, and if you found these resources useful, don’t forget to support me by starring the repo on GitHub!