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 →

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 →