Electron JS: How to Create a Beautiful Frameless Window

Creating a frameless window with Electron JS makes your desktop app look much more like a native application and is actually very easy to implement. Let’s look at how we can accomplish this.

I should note that removing the frame does indeed remove our menu bar. Thus, this is ideal if you don’t need a menu at all or if you wish to make a custom menu built from links in a navbar.

Step 1: Configure our BrowserWindow options

Take a look at this code where we define our main BrowserWindow named ‘win’ . More precisely, notice the options object passed into the new BrowserWindow instance:

const electron = require('electron');
const {app, BrowserWindow, ipcMain} = electron;
let win;
// Listen for ready app
app.on('ready',function(){
    // create new window
    win = new BrowserWindow(
            {
                width: 430,
                height:600,
                frame:false,
                resizable:false,
                maximizable:false,