Electron Projects

Using the hidden titleBarStyle

When you set the titleBarStyle property to hidden, you instruct Electron to hide the title bar but leave the traffic light controls in the top-left corner. This allows us to continue controlling the look and feel of the application window but preserve the behavior behind the control buttons.

Update the createWindow function in the main.js file as follows:

function createWindow() {  win = new BrowserWindow({ titleBarStyle: 'hidden' });  win.loadURL(`http://localhost:3000`);  win.on('closed', () => {    win = null;  });}

At this point, you need to restart the application as live reloading won't help. Once the Electron shell has been restarted, take a closer look at the control button area and notice the missing title ...