Skip to main content
CodeSpeedTest
Languages
Start TypingJump into a test — pick any languageAdaptive TrainingUnlock chars as you master themPractice DrillsFocused sessions targeting weak spotsDaily ChallengesNew coding challenges every dayRace ModeCompete against others in real timeAI OpponentRace against an AI at your WPM levelTournamentsLive coding speed tournamentsArcade GamesZType, Overkill Survival, Glyphica & moreGamificationXP, coins, badges & quests
LeaderboardGlobal rankings for every languageCertificatesEarn verifiable Bronze / Silver / Gold certsActivityDaily streaks & historical analyticsProfileYour stats, badges & achievements
Browse Languages500+ languages with real code examplesBlogTips, guides & deep divesFree ToolsWPM calculator, typing speed report & moreFAQCommon questions answeredGetting StartedNew to CodeSpeedTest?AboutOur story & missionSupportGet help — Pro users get priorityContactGet in touch with the team
Pricing
  1. Home
  2. /
  3. Learn
  4. /
  5. Electron

Learn Electron - 10 Code Examples & CST Typing Practice Test

Electron is an open-source framework for building cross-platform desktop applications using web technologies (HTML, CSS, JS) with Node.js integration and Chromium-based rendering. It allows developers to create desktop apps for Windows, macOS, and Linux with a single codebase.

View all 10 Electron code examples →
Electron Simple Todo AppElectron Notification ExampleElectron IPC Communication ExampleElectron Menu ExampleElectron Dialog ExampleElectron Local Storage ExampleElectron Context Menu ExampleElectron Tray ExampleElectron System Info ExampleElectron Dark Mode Toggle Example

Learn ELECTRON with Real Code Examples

Updated Nov 23, 2025

Explain

Electron enables building desktop apps using web technologies and Node.js APIs.

It combines Chromium for rendering and Node.js for backend functionality.

Ideal for developers who want web-like development with desktop capabilities.

Core Features

Main process handles OS integration

Renderer process displays web-based UI

IPC (inter-process communication) between main and renderer

Window management, menus, and native dialogs

Packaging and distributing apps for multiple platforms

Basic Concepts Overview

Main process manages native OS features and lifecycle

Renderer process runs web frontend

IPC used for secure communication between processes

Configuration via `package.json` and electron-builder/electron-packager

Apps packaged as executables for each platform

Project Structure

src/ - frontend source code

main.js - main process entry

package.json - dependencies and scripts

node_modules/ - installed packages

dist/ or build/ - packaged output for platforms

Building Workflow

Create frontend app using preferred framework

Create main process script to manage windows and system events

Integrate frontend and backend via IPC

Test app locally on all target platforms

Package app for distribution using electron-builder or electron-packager

Difficulty Use Cases

Beginner: simple desktop app with static frontend

Intermediate: frontend-backend communication using IPC

Advanced: integrate OS features and auto-updates

Expert: optimize performance and memory usage

Community: create Electron plugins or contribute to ecosystem

Comparisons

Electron vs Tauri: Electron larger, more resource-heavy; Tauri smaller and Rust-based

Electron vs NW.js: Similar architecture, NW.js slightly simpler but smaller community

Electron vs Flutter Desktop: Flutter compiles UI natively, Electron uses Chromium webview

Electron emphasizes rapid cross-platform development

Performance depends on Chromium and Node.js usage

Versioning Timeline

2013 - Initial release as Atom Shell

2014 - Rebranded as Electron, Atom editor released

2015-2018 - Popular apps like VS Code, Slack adopted Electron

2019-2022 - API enhancements, electron-builder/electron-updater adoption

2023-2025 - Security updates, performance improvements, new plugins

Glossary

Electron: cross-platform desktop framework

Main process: Node.js backend managing OS integration

Renderer process: Chromium-based frontend

IPC: inter-process communication

BrowserWindow: window container for UI

Installation Setup

Install Node.js and npm/yarn

Install Electron via npm (`npm install electron --save-dev`)

Set up your frontend framework project

Create main process entry script (`main.js`) with Electron APIs

Run app in development mode using `electron .`

Environment Setup

Install Node.js and npm/yarn

Install Electron CLI and dependencies

Set up frontend framework project

Write main and renderer processes

Run and test app on all desktop platforms

Config Files

package.json - dependencies and scripts

main.js - main process entry

src/ - frontend source code

node_modules/ - installed packages

dist/ - packaged binaries

Cli Commands

electron . - run app

npm install electron --save-dev - install Electron

electron-builder - package app

electron-packager - alternative packaging

electron-rebuild - rebuild native modules

Internationalization

Use i18n libraries for text localization

Support multiple languages and locales

Localize dates, numbers, and assets

Maintain resource files for translations

Ensure UI accommodates different languages

Accessibility

Follow web accessibility standards

Ensure keyboard navigation

Screen reader support in frontend

Platform-specific accessibility via Electron APIs

Test accessibility on all desktop platforms

Ui Styling

Standard CSS, SCSS, or framework styles

Responsive design via frontend framework

Custom window and menu styling

Reusable components for consistency

Platform-specific adjustments via Electron APIs

State Management

Frontend state via framework (React/Vue/Angular/Svelte)

Backend state via Node.js modules

Global state management possible via Redux/Vuex

Synchronize frontend-backend via IPC

Optional database integration for persistent state

Data Management

Frontend data handled by framework

Backend operations via Node.js APIs

Filesystem and OS API access

SQLite, local storage, or JSON files for persistence

Secure handling of sensitive data

Architecture

Main process: Node.js backend, app lifecycle management

Renderer process: Chromium webview for frontend

IPC bridge for communication between processes

Modular design with event-driven architecture

Supports multiple windows and processes per app

Rendering Model

Frontend rendered via Chromium webview

Node.js backend handles system integration

IPC bridge for communication between processes

Event-driven architecture

UI updates handled by frontend framework

Architectural Patterns

Main/renderer process separation

Component-based frontend

Node.js modules for backend functionality

Event-driven IPC communication

Modular and extensible design

Real World Architectures

VS Code (editor)

Slack (messaging app)

Discord (communication app)

WhatsApp Desktop (messaging)

Internal enterprise dashboards and tools

Design Principles

Web-first development

Cross-platform consistency

Access to Node.js ecosystem

Rapid prototyping and iteration

Large community and plugin support

Scalability Guide

Modular frontend components

Separate Node.js modules for backend

Lazy-load windows and modules

Optimize memory and CPU usage

Profile app performance regularly

Migration Guide

Update Electron and frontend dependencies

Refactor deprecated APIs

Test all platform builds

Verify plugin compatibility

Check security and performance

Performance Notes

Minimize unnecessary renderer processes

Lazy-load modules and windows

Optimize frontend bundle size

Profile memory usage with Electron DevTools

Consider Tauri for lightweight apps

Security Notes

Use contextIsolation and nodeIntegration carefully

Sanitize all inputs to prevent remote code execution

Follow Electron security guidelines

Enable CSP (Content Security Policy)

Keep dependencies updated

Monitoring Analytics

Frontend analytics via web libraries

Error tracking via Sentry or similar

Monitor Node.js logs

Track app usage and performance

Ensure responsive and smooth UX

Code Quality

Follow JS/TypeScript best practices

Document main and renderer processes

Write unit, integration, and E2E tests

Use linters and formatters

Profile app performance

Practical Examples

Visual Studio Code (code editor)

Slack (desktop messaging app)

Discord (chat and communication)

WhatsApp Desktop

Internal enterprise dashboards and tools

Troubleshooting

Ensure correct Node.js and Electron versions

Debug IPC communication issues

Check Chromium DevTools for frontend errors

Verify packaging configurations

Test on all target platforms

Testing Guide

Unit tests with Jest, Mocha, or Vitest

Integration testing of main and renderer processes

E2E tests with Spectron or Playwright

Test on all target platforms

Monitor logs for errors and performance issues

Deployment Options

Package app using electron-builder or electron-packager

Sign binaries for Windows/macOS

Distribute via stores or direct download

Auto-updates via electron-updater

CI/CD pipelines for automated builds and releases

Tools Ecosystem

Electron CLI

electron-builder or electron-packager for packaging

Frontend frameworks: React, Vue, Angular, Svelte

DevTools and debugging tools

Community plugins and Node.js modules

Integrations

React, Vue, Angular, Svelte frontends

Node.js APIs for file system, networking, and OS integration

SQLite, local storage, or filesystem plugins

Cloud APIs (Firebase, REST, GraphQL)

CI/CD pipelines for automated builds

Productivity Tips

Reuse frontend components

Optimize main/renderer process interaction

Profile memory and CPU usage

Test on all platforms frequently

Leverage existing plugins and NPM modules

Challenges

Create a cross-platform desktop calculator

Integrate file system access securely

Build messaging feature with IPC

Implement auto-updates across platforms

Package app for Windows, macOS, and Linux

Learning Path

Learn web frontend framework (React/Vue/Angular/Svelte)

Understand Node.js APIs

Learn Electron main and renderer processes

Build simple Electron desktop apps

Package and distribute apps cross-platform

Skill Improvement Plan

Week 1: Web frontend fundamentals

Week 2: Node.js and Electron basics

Week 3: Build desktop app with IPC communication

Week 4: Integrate OS features and auto-updates

Week 5: Test, optimize, and distribute desktop apps

Interview Questions

Explain Electron architecture (main vs renderer process)

How does Electron handle cross-platform compatibility?

Describe IPC communication in Electron

How do you package and distribute an Electron app?

How do you secure an Electron application?

Cheat Sheet

`electron .` - run app in development

`BrowserWindow` - create app windows

`ipcMain` / `ipcRenderer` - IPC communication

`electron-builder` - package app

`package.json` - app configuration

Books

Mastering Electron

Electron in Action

Building Cross-Platform Desktop Apps with Electron

Advanced Electron Techniques

Electron + Node.js Desktop Development

Tutorials

Official Electron tutorials

Frontend framework integration guides

YouTube Electron app tutorials

Community blogs and sample projects

Advanced Electron techniques

Official Docs

https://www.electronjs.org/

https://www.electronjs.org/docs/latest

https://github.com/electron/electron

Community Links

Electron GitHub

StackOverflow Electron tag

Discord Electron community

Reddit Electron discussions

Twitter #ElectronJS

Community Support

Electron GitHub repository

StackOverflow Electron tag

Discord and Reddit communities

Official Electron documentation

Community tutorials and blog posts

Monetization

Commercial desktop apps

Internal enterprise tools

Freemium apps with optional purchases

Open-source apps with donations

Subscription-based desktop software

Future Roadmap

Enhanced security and sandboxing

Better performance optimizations

Expanded plugin ecosystem

Improved documentation and tutorials

Support for newer OS features

When Not To Use

Apps requiring tiny binary size

Memory or CPU-sensitive apps

Lightweight utilities needing minimal overhead

Apps where Rust-based security is preferred

Projects without web development experience

Final Summary

Electron enables cross-platform desktop apps using web technologies and Node.js.

Main process manages backend/OS integration; renderer process displays UI.

Supports all major frontend frameworks and desktop OSes.

Ideal for rapid development of consumer and enterprise apps.

Large ecosystem, mature tools, but heavier in size and memory usage.

Faq

Does Electron support React/Vue/Angular/Svelte?

Yes, frontend framework agnostic.

Are Electron apps secure?

Yes, if best practices like contextIsolation are used.

Can I build for all desktop platforms?

Yes, Windows, macOS, and Linux are supported.

Are Electron apps lightweight?

No, they are larger due to Chromium and Node.js overhead.

Can I implement auto-updates?

Yes, using electron-updater or custom solutions.

Code Sample Descriptions

1

Electron Simple Todo App

// main.js
const { app, BrowserWindow } = require('electron');
function createWindow() {
    const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } });
    win.loadFile('index.html');
}
app.whenReady().then(createWindow);

// index.html
<!DOCTYPE html>
<html>
    <body>
        <h1>Todo App</h1>
        <input id='todoInput' placeholder='New Todo'/>
        <button id='addBtn'>Add</button>
        <ul id='todoList'></ul>
        <script>
        const addBtn = document.getElementById('addBtn');
        const input = document.getElementById('todoInput');
        const list = document.getElementById('todoList');
        addBtn.addEventListener('click', () => {
        if(input.value.trim()){
        const li = document.createElement('li');
        li.textContent = input.value;
        list.appendChild(li);
        input.value = '';
        }
        });
        </script>
    </body>
</html>

Demonstrates a simple Electron app with a Todo list, adding tasks and displaying them using HTML, CSS, and JavaScript with Node.js integration.

Let’s Try →
2

Electron Notification Example

// main.js
const { app, BrowserWindow, Notification } = require('electron');
function createWindow() {
    const win = new BrowserWindow({ width: 400, height: 300 });
    win.loadFile('index.html');
    new Notification({ title: 'Hello', body: 'This is an Electron notification!' }).show();
}
app.whenReady().then(createWindow);

Shows how to use the Notification API in Electron to send system notifications.

Let’s Try →
3

Electron IPC Communication Example

// main.js
const { app, BrowserWindow, ipcMain } = require('electron');
function createWindow() {
    const win = new BrowserWindow({ webPreferences: { nodeIntegration: true, contextIsolation: false } });
    win.loadFile('index.html');
}
ipcMain.on('ping', (event, arg) => {
    console.log(arg);
    event.reply('pong', 'Hello from Main!');
});
app.whenReady().then(createWindow);

// index.html
<!DOCTYPE html>
<html>
    <body>
        <h3>IPC Example</h3>
        <button id='btn'>Ping Main</button>
        <script>
        const { ipcRenderer } = require('electron');
        document.getElementById('btn').addEventListener('click', () => {
        ipcRenderer.send('ping', 'Ping from Renderer');
        });
        ipcRenderer.on('pong', (_, msg) => alert(msg));
        </script>
    </body>
</html>

Demonstrates communication between renderer and main process using IPC.

Let’s Try →
4

Electron Menu Example

// main.js
const { app, BrowserWindow, Menu } = require('electron');
function createWindow() {
    const win = new BrowserWindow({ width: 600, height: 400 });
    win.loadFile('index.html');
    const template = [
        { label: 'File', submenu: [{ role: 'quit' }] },
        { label: 'Help', submenu: [{ label: 'About', click: () => console.log('About clicked') }] }
    ];
    const menu = Menu.buildFromTemplate(template);
    Menu.setApplicationMenu(menu);
}
app.whenReady().then(createWindow);

Shows how to create a custom application menu in Electron.

Let’s Try →
5

Electron Dialog Example

// main.js
const { app, BrowserWindow, dialog, ipcMain } = require('electron');
function createWindow() {
    const win = new BrowserWindow({ webPreferences: { nodeIntegration: true, contextIsolation: false } });
    win.loadFile('index.html');
}
ipcMain.handle('open-file', async () => {
    const result = await dialog.showOpenDialog({ properties: ['openFile'] });
    return result.filePaths;
});
app.whenReady().then(createWindow);

// index.html
<!DOCTYPE html>
<html>
    <body>
        <button id='openBtn'>Open File</button>
        <ul id='files'></ul>
        <script>
        const { ipcRenderer } = require('electron');
        document.getElementById('openBtn').addEventListener('click', async () => {
        const files = await ipcRenderer.invoke('open-file');
        document.getElementById('files').innerHTML = files.map(f => `<li>${f}</li>`).join('');
        });
        </script>
    </body>
</html>

Uses Electron's dialog module to open a file picker dialog.

Let’s Try →
6

Electron Local Storage Example

// index.html
<!DOCTYPE html>
<html>
    <body>
        <h3>Local Storage Example</h3>
        <input id='dataInput' placeholder='Enter something...'>
        <button id='saveBtn'>Save</button>
        <button id='loadBtn'>Load</button>
        <p id='output'></p>
        <script>
        const saveBtn = document.getElementById('saveBtn');
        const loadBtn = document.getElementById('loadBtn');
        saveBtn.onclick = () => {
        localStorage.setItem('data', document.getElementById('dataInput').value);
        };
        loadBtn.onclick = () => {
        document.getElementById('output').textContent = localStorage.getItem('data');
        };
        </script>
    </body>
</html>

Demonstrates saving and retrieving data using the browser's localStorage API in Electron.

Let’s Try →
7

Electron Context Menu Example

// main.js
const { app, BrowserWindow, Menu } = require('electron');
function createWindow() {
    const win = new BrowserWindow({ webPreferences: { nodeIntegration: true, contextIsolation: false } });
    win.loadFile('index.html');
}
app.whenReady().then(createWindow);

// index.html
<!DOCTYPE html>
<html>
    <body>
        <h3>Right-click anywhere!</h3>
        <script>
        const { remote } = require('electron');
        window.addEventListener('contextmenu', (e) => {
        e.preventDefault();
        const menu = remote.Menu.buildFromTemplate([
        { label: 'Say Hi', click: () => alert('Hi!') },
        { type: 'separator' },
        { role: 'quit' }
        ]);
        menu.popup();
        });
        </script>
    </body>
</html>

Implements a right-click context menu inside the renderer process.

Let’s Try →
8

Electron Tray Example

// main.js
const { app, BrowserWindow, Tray, Menu } = require('electron');
let tray;
function createWindow() {
    const win = new BrowserWindow({ width: 400, height: 300 });
    win.loadFile('index.html');
    tray = new Tray('icon.png');
    const contextMenu = Menu.buildFromTemplate([{ label: 'Quit', role: 'quit' }]);
    tray.setToolTip('Tray Example');
    tray.setContextMenu(contextMenu);
}
app.whenReady().then(createWindow);

Shows how to create a system tray icon with a context menu.

Let’s Try →
9

Electron System Info Example

// index.html
<!DOCTYPE html>
<html>
    <body>
        <h3>System Info</h3>
        <pre id='info'></pre>
        <script>
        const os = require('os');
        document.getElementById('info').textContent = `Platform: ${os.platform()}\nCPU: ${os.cpus()[0].model}\nMemory: ${Math.round(os.totalmem() / 1e9)} GB`;
        </script>
    </body>
</html>

Displays system information using Node.js os module inside an Electron app.

Let’s Try →
10

Electron Dark Mode Toggle Example

// main.js
const { app, BrowserWindow, ipcMain, nativeTheme } = require('electron');
function createWindow() {
    const win = new BrowserWindow({ webPreferences: { nodeIntegration: true, contextIsolation: false } });
    win.loadFile('index.html');
}
ipcMain.handle('toggle-dark-mode', () => {
    nativeTheme.themeSource = nativeTheme.shouldUseDarkColors ? 'light' : 'dark';
    return nativeTheme.shouldUseDarkColors;
});
app.whenReady().then(createWindow);

// index.html
<!DOCTYPE html>
<html>
    <body>
        <h3>Dark Mode Example</h3>
        <button id='toggleBtn'>Toggle Dark Mode</button>
        <script>
        const { ipcRenderer } = require('electron');
        document.getElementById('toggleBtn').onclick = async () => {
        const isDark = await ipcRenderer.invoke('toggle-dark-mode');
        document.body.style.background = isDark ? '#222' : '#fff';
        document.body.style.color = isDark ? '#fff' : '#000';
        };
        </script>
    </body>
</html>

Demonstrates dark mode toggling using CSS and IPC between renderer and main.

Let’s Try →

Frequently Asked Questions about Electron

What is Electron?

Electron is an open-source framework for building cross-platform desktop applications using web technologies (HTML, CSS, JS) with Node.js integration and Chromium-based rendering. It allows developers to create desktop apps for Windows, macOS, and Linux with a single codebase.

What are the primary use cases for Electron?

Cross-platform desktop apps for Windows, macOS, and Linux. Rapid development using web technologies. Internal enterprise tools. Consumer desktop apps (Slack, VS Code, Discord). Apps requiring integration with Node.js modules

What are the strengths of Electron?

Large community and mature ecosystem. Works with any frontend framework. Rapid prototyping and development. Access to full Node.js and NPM ecosystem. Wide adoption in commercial apps

What are the limitations of Electron?

Large binary size (tens of MBs per app). High memory and CPU usage for lightweight apps. Security risks if Node.js APIs exposed improperly. Performance depends on Chromium overhead. Not ideal for small utilities requiring minimal resources

How can I practice Electron typing speed?

CodeSpeedTest offers 10+ real Electron code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Other Programming Languages

CReactPythonC++RustTypeScriptKotlinPHPJavaC#RubyMqlCqlN1qlCypherGremlinPartiqlHaskellElixirFsharpView all languages →
CodeSpeedTest

Improve your coding speed, code accuracy, and programming syntax WPM with practice sessions across 500+ programming languages.

Quick Links

HomeAboutFeaturesGetting StartedLanguages

Legal & Support

Pro ⚡ PricingContactPrivacy PolicyTerms of Service

Connect

CodeSpeedTest on GitHubCodeSpeedTest on TwitterEmail CodeSpeedTest

© 2026 CodeSpeedTest. All rights reserved.