ElectronJS Windows Management

Electron uses the BrowserWindow class to create and manage native application windows.

The basic way to create a window is using:

main.js

const { BrowserWindow } = require("electron");

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

win.loadFile("index.html");

We can also load a remote URL:

win.loadURL("https://edevhindi.com/");

Customizing Window Options

Electron allows deep customization of windows. Some popular options include:

Option	Description
frameless : true	Removes the OS window frame (good for custom UIs)
transparent : true	Makes the window background transparent
alwaysOnTop: true	Keeps window above all others
resizable: false	Prevents resizing
fullscreen: true	Launches in full screen
titleBarStyle: 'hidden'	macOS-style clean titlebar (useful with frameless)