Introducing Electron

Chapter 3. Working with Electron

User Interfaces with BrowserWindows

BrowserWindows are at the forefront of user interfaces built with Electron. They are they main way to display visuals to the user. Given their flexibility, you are not limited to the classic rectangular window—configured properly, they can be any shape, size, or opacity, and take on any Z-Index in the desktop’s window manager. If a situation requires that a window is heart-shaped, half-transparent, and on top of the macOS dock, Electron will make that work.

When creating a window with new BrowserWindow(options), numerous properties can be passed in to define where, how, and in what size the window will be created. Let’s take a look at some of the most important properties. For a full list of the 150+ options for any given version of Electron, please consult the official API documentation; if you are building a traditional desktop app, the following list has you fully covered:

width, height (number)

Window’s width and height in pixels, with a default of 800 x 600.

x, y (number)

Left and top offset of the window from the screen. Default is that the window is centered on the current screen.

minWidth, minHeight (number)

If given, these numbers will define the smallest size the window can be resized to by the user.

maxWidth, maxHeight (number)

These two numbers define the biggest size the window can be resized to by the user.

resizable (boolean)

If set to false, the window will not be resizable at all.

movable