= Electron Browser Window =

<<TableOfContents>>

----



== BrowserWindow ==

The basic usage of `BrowserWindow` is as follows:

 * Wait for the `ready` event
 * Initialize the object with window size and necessary security options
 * Load an index

{{{
const { app, BrowserWindow } = require('electron');
const path = require('path');

var win;

app.on('ready', () => {
  win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      contextIsolation: true,
      nodeIntegration: false,
      preload: path.join(__dirname, 'preload.js'),
    }
  });

  win.loadFile(path.join(__dirname, 'index.html'));

  win.on('closed', () => {
    win = null;
  });
});
}}}



=== Graceful Load ===

For large index pages, loading may be visible. To wait for rendering to complete before showing the window, listen for the `ready-to-show` event.

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

const win = new BrowserWindow({ show: false });

win.once('ready-to-show', () => {
  win.show();
});
}}}

Set a background color to show as a placeholder.

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

const win = new BrowserWindow({ backgroundColor: '#ffffff' });
}}}



=== Child and Modal Windows ===

----



== See also ==

[[https://www.electronjs.org/docs/latest/api/browser-window|Electron API for BrowserWindow]]



----
CategoryRicottone