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 App Electron Notification Example Electron IPC Communication Example Electron Menu Example Electron Dialog Example Electron Local Storage Example Electron Context Menu Example Electron Tray Example Electron System Info Example Electron Dark Mode Toggle Example

Learn ELECTRON with Real Code Examples

Updated Nov 23, 2025

Introduction & Fundamentals Setup & Configuration Architecture & Deep Internals Performance & Security Development Workflow Learning & Career Growth Business & Strategy Examples

Code Sample Descriptions

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 →

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 →

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 →

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 →

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 →

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 →

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 →

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 →

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 →

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?

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

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher Gremlin Partiql Haskell Elixir Fsharp View all languages →

Code Sample Descriptions

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 →

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 →

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 →

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 →

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 →

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 →

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 →

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 →

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 →

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?

What are the primary use cases for Electron?

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?

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.