Managing Multiple Windows
Learn to create, coordinate, and communicate between multiple BrowserWindow instances, a core skill that builds directly on the main process and IPC fundamentals.
Managing Multiple Windows is a free Electron Desktop App Development lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Electron Desktop App Development learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Beyond a Single Window
Real desktop apps often need multiple windows: a main editor, a settings panel, a preview. The main process owns and tracks all of them.
Creating a Window
Each window is a BrowserWindow instance created in the main process.
const { BrowserWindow } = require('electron');
function createWindow() {
const win = new BrowserWindow({ width: 600, height: 400 });
win.loadFile('index.html');
return win;
}Keeping References
If you do not keep a reference, the window can be garbage collected. Store windows in a variable or array.
let windows = [];
function track(win) {
windows.push(win);
win.on('closed', () => {
windows = windows.filter(w => w !== win);
});
}Parent and Child Windows
You can make one window the parent of another. Child windows move with the parent and can be modal.
new BrowserWindow({
parent: mainWindow,
modal: true,
width: 300,
height: 200
});Window-to-Window Messaging
Windows do not share memory. They communicate through the main process using IPC as a relay.
ipcMain.on('to-other', (e, msg) => {
otherWindow.webContents.send('from-main', msg);
});Identifying Windows
Each window has a unique id. Use it to target a specific window when relaying messages.
function findWindow(id, list) {
return list.find(w => w.id === id);
}
console.log(findWindow(2, [{ id: 1 }, { id: 2 }]));Showing Windows Gracefully
Avoid a white flash by creating windows hidden and showing them once ready.
const win = new BrowserWindow({ show: false });
win.once('ready-to-show', () => win.show());Managing Focus
Use focus() and the blur event to know which window the user is interacting with, useful for save prompts.
Closing and Cleanup
Listen for close to prompt for unsaved changes, and closed to release references.
win.on('close', (e) => {
if (hasUnsaved) {
e.preventDefault();
}
});Single Instance Lock
Use app.requestSingleInstanceLock() to focus the existing window instead of opening duplicates.
Coordinating State
Centralize shared state in the main process so every window reads from one source of truth, avoiding drift.
Quick Check
Test your window management knowledge.
Recap
You learned to create and track multiple BrowserWindow instances, manage parent/child relationships, relay messages via the main process, and clean up references properly.
Frequently asked questions
Is the “Managing Multiple Windows” lesson free?
Yes — the full text of “Managing Multiple Windows” is free to read here on the web, and the Electron Desktop App Development course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Electron Desktop App Development course, upgrade to CoddyKit PRO.
What will I learn in “Managing Multiple Windows”?
Learn to create, coordinate, and communicate between multiple BrowserWindow instances, a core skill that builds directly on the main process and IPC fundamentals. You practise Electron Desktop App Development with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Electron Desktop App Development?
No prior experience is required. Electron Desktop App Development on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Managing Multiple Windows” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Electron Desktop App Development lesson?
Yes. Every Electron Desktop App Development lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Main vs. Renderer Process
- Inter-Process Communication (IPC)
- Packaging Your Electron App
- Managing Multiple Windows