Home » Electron JS

How to customize the size of an Electron JS BrowserWindow?

Electron JS | Customize the size of BrowserWindow: In this article, we will see the various methods or options to customize an Electron JS BrowserWindow?
Submitted by Godwill Tetah, on June 15, 2020

I will simply show you the basics or what you need to get started, but you can get more from the Electron JS official documentation.

The browser window is that box that displays the user interface of your desktop application where users interact or use it as a platform.

We are therefore going to see how we can make it either big, small, resizable, fix which can be set using some optional properties of the BrowserWindow main process.

Some of them include;

• width: sets the width of the window, default is 800.
• height: sets the height of the window, default is 600.

const electron = require ('electron')

const app = electron.app 
const BrowserWindow = electron.BrowserWindow 
let mainWindow
app.on ('ready', _ => {
    mainWindow = new BrowserWindow({
        height : 400, // height
        width : 1000, // width
    })

    mainWindow.loadFile('src/index.html')

    mainWindow.on ('closed', _ => { 
        console.log ('closed!')
        mainWindow = null
    })
})

The code below displays a simple index.html file located in the src folder found in the project's directory.

• Resizable: accepts either true or false and determines if the window can be adjusted by the user. The default is true.
• Movable: accepts either true or false and determines if the window can be moved by the user. The default is true. Not implemented on Linux
• Minimizable: accepts either true or false and determines if the window can be minimized by the user. The default is true. Not implemented on Linux
• Maximizable: accepts either true or false and determines if the window can be maximized by the user. The default is true. Not implemented on Linux
• Closable: accepts either true or false and determines if the window can be closed by the user. The default is true.
• minWidth: Determines the minimum width of the window. The default is 0.
• minHeight: Determines the minimum height of the window. The default is 0.

const electron = require ('electron')

const app = electron.app 
const BrowserWindow = electron.BrowserWindow 
let mainWindow
app.on ('ready', _ => {
    mainWindow = new BrowserWindow({
        height : 400,
        width : 1000,
        movable : false,
        minimizable : false,
        maximizable : false,
        closable :false
    })

    mainWindow.loadFile('src/index.html')

    mainWindow.on ('closed', _ => { 
        console.log ('closed!')
        mainWindow = null
    })
})