app.toastActivatorCLSID property Windows readonly
A read-only string property that returns the app's Toast Activator CLSID on Windows.
app/windows
78 notes in this subject, read out of this brain and free to use. This is page 1 of 2.
win.getBrowserView() return value and error cases
The getBrowserView() method returns a BrowserView or null. It returns null if no BrowserView is attached to the window. If multiple BrowserViews are attached, it throws an error.
win.addBrowserView() for multi-browser views
The win.addBrowserView(browserView) method is an experimental and deprecated replacement API for setBrowserView that supports working with multiple browser views. It takes a BrowserView parameter.
win.removeBrowserView() removes a BrowserView
The win.removeBrowserView(browserView) method removes a BrowserView from the window. It is experimental and deprecated. It takes a BrowserView parameter.
win.setTopBrowserView() raises BrowserView above others
The win.setTopBrowserView(browserView) method raises the specified BrowserView above other BrowserViews attached to the window. It throws an error if the browserView is not attached to the window. The method is experimental and deprecated.
win.getBrowserViews() returns z-index sorted array
The win.getBrowserViews() method returns an array of BrowserView objects sorted by z-index. All BrowserViews that have been attached with addBrowserView or setBrowserView are included. The top-most BrowserView is the last element of the array. This method is experimental and deprecated.
win.setTitleBarOverlay() behavior on Windows and Linux
On a window with Window Controls Overlay already enabled, setTitleBarOverlay() updates the style of the title bar overlay. On Linux, the symbolColor is automatically calculated to have minimum accessible contrast to the color if not explicitly set.
BrowserView class is deprecated in favor of WebContentsView
The BrowserView class is deprecated and replaced by the new WebContentsView class. This applies to the following deprecated methods: setBrowserView(), addBrowserView(), removeBrowserView(), setTopBrowserView(), and getBrowserViews().
Create window filling screen example
const { app, BrowserWindow, screen } = require('electron/main') let mainWindow = null app.whenReady().then(() => { const primaryDisplay = screen.getPrimaryDisplay() const { width, height } = primaryDisplay.workAreaSize mainWindow = new BrowserWindow({ width, height }) mainWindow.loadURL('https://electronjs.org') })
Create window on external display example
const { app, BrowserWindow, screen } = require('electron') let win app.whenReady().then(() => { const displays = screen.getAllDisplays() const externalDisplay = displays.find((display) => { return display.bounds.x !== 0 || display.bounds.y !== 0 }) if (externalDisplay) { win = new BrowserWindow({ x: externalDisplay.bounds.x + 50, y: externalDisplay.bounds.y + 50 }) win.loadURL('https://github.com') } })
BrowserWindowConstructorOptions webPreferences
BrowserWindowConstructorOptions has an optional property webPreferences of type WebPreferences that configures settings of the web page's features.
BrowserWindowConstructorOptions paintWhenInitiallyHidden
BrowserWindowConstructorOptions has an optional boolean property paintWhenInitiallyHidden. When set to false, the renderer will not be active when show is false and the window has just been created. For document.visibilityState to work correctly on first load with show: false, this should be set to false. Setting this to false will cause the ready-to-show event to not fire. Default is true.
BrowserWindowConstructorOptions extends BaseWindowConstructorOptions
BrowserWindowConstructorOptions is an object that extends BaseWindowConstructorOptions.
BaseWindowConstructorOptions window type values
BaseWindowConstructorOptions type property specifies the type of window. On Linux, possible types are desktop, dock, toolbar, splash, notification. The desktop type places the window at the desktop background window level (kCGDesktopWindowLevel - 1) but will not receive focus, keyboard, or mouse events; you can use globalShortcut to receive input sparingly. The dock type creates a dock-like window behavior. The toolbar type creates a window with a toolbar appearance. The splash type is not draggable even if CSS styling contains -webkit-app-region: drag, commonly used for splash screens. The notification type creates a window that behaves like a system notification. On macOS, possible types are desktop, textured, panel. The textured type adds metal gradient appearance and is deprecated. The desktop type places the window at the desktop background window level (kCGDesktopWindowLevel - 1), note desktop window will not receive focus, keyboard or mouse events, but you can use globalShortcut to receive input sparingly. The panel type enables the window to float on top of full-screened apps by adding NSWindowStyleMaskNonactivatingPanel style mask, normally reserved for NSPanel, at runtime, and the window will appear on all spaces (desktops). On Windows, the possible type is toolbar. Default type is normal window.
BaseWindowConstructorOptions vibrancy effect
BaseWindowConstructorOptions has vibrancy (string, optional, macOS only) - add a type of vibrancy effect to the window on macOS only. Possible values are: appearance-based, titlebar, selection, menu, popover, sidebar, header, sheet, window, hud, fullscreen-ui, tooltip, content, under-window, or under-page.
BaseWindowConstructorOptions visual effect and material properties
BaseWindowConstructorOptions has visualEffectState (string, optional, macOS only) - specify how the material appearance should reflect window activity state on macOS, must be used with the vibrancy property. Possible values are: followWindow (the backdrop should automatically appear active when the window is active and inactive when it is not, this is the default), active (the backdrop should always appear active), inactive (the backdrop should always appear inactive). backgroundMaterial (string, optional, Windows only) - set the window's system-drawn background material including behind the non-client area. Can be auto, none, mica, acrylic or tabbed. See win.setBackgroundMaterial for more information.
BaseWindowConstructorOptions title bar style
BaseWindowConstructorOptions has titleBarStyle (string, optional, default 'default') - the style of window title bar. Possible values are: default (results in the standard title bar for macOS or Windows respectively), hidden (results in a hidden title bar and a full size content window, on macOS the window still has the standard window controls traffic lights in the top left, on Windows and Linux when combined with titleBarOverlay: true it will activate the Window Controls Overlay, otherwise no window controls will be shown), hiddenInset (macOS only - results in a hidden title bar with an alternative look where the traffic light buttons are slightly more inset from the window edge), customButtonsOnHover (macOS only - results in a hidden title bar and full size content window, the traffic light buttons will display when being hovered over in the top left of the window, this option is currently experimental).
BaseWindowConstructorOptions title bar overlay
BaseWindowConstructorOptions has titleBarOverlay (Object or boolean, optional, default false) - when using a frameless window in conjunction with win.setWindowButtonVisibility(true) on macOS or using a titleBarStyle so that the standard window controls (traffic lights on macOS) are visible, this property enables the Window Controls Overlay JavaScript APIs and CSS Environment Variables. Specifying true will result in an overlay with default system colors. Properties: color (String, optional, Windows Linux) - the CSS color of the Window Controls Overlay when enabled, default is the system color. symbolColor (String, optional, Windows Linux) - the CSS color of the symbols on the Window Controls Overlay when enabled, default is the system color. height (Integer, optional) - the height of the title bar and Window Controls Overlay in pixels, default is system height.
BaseWindowConstructorOptions accent color and traffic light position
BaseWindowConstructorOptions has accentColor (boolean or string, optional, Windows only) - the accent color for the window, by default follows user preference in System Settings, set to false to explicitly disable, or set the color in Hex, RGB, RGBA, HSL, HSLA or named CSS color format, alpha values will be ignored. trafficLightPosition (Point, optional, macOS only) - set a custom position for the traffic light buttons in frameless windows.
BaseWindowConstructorOptions rounded corners and frame style
BaseWindowConstructorOptions has roundedCorners (boolean, optional, default true) - whether a frameless window should have rounded corners, on Windows versions older than Windows 11 Build 22000 this property has no effect and frameless windows will not have rounded corners, on Linux rounded corners are only drawn when the desktop environment supports client-side decorations. thickFrame (boolean, optional, Windows only, default true) - use WS_THICKFRAME style for frameless windows on Windows which adds the standard window frame, setting it to false will remove window shadow and window animations and disable window resizing via dragging the window edges.
BaseWindowConstructorOptions zoom and tabbing
BaseWindowConstructorOptions has zoomToPageWidth (boolean, optional, macOS only, default false) - controls the behavior on macOS when option-clicking the green stoplight button on the toolbar or by clicking the Window > Zoom menu item, if true the window will grow to the preferred width of the web page when zoomed, false will cause it to zoom to the width of the screen, this will also affect the behavior when calling maximize() directly. tabbingIdentifier (string, optional, macOS only) - tab group name, allows opening the window as a native tab, windows with the same tabbing identifier will be grouped together, this also adds a native new tab button to your window's tab bar and allows your app and window to receive the new-window-for-tab event.
BaseWindowConstructorOptions size properties
BaseWindowConstructorOptions has the following size-related properties: width (Integer, optional, default 800), height (Integer, optional, default 600), useContentSize (boolean, optional, default false - when true, width and height are used as web page size, making the actual window size larger due to frame). minWidth (Integer, optional, default 0), minHeight (Integer, optional, default 0), maxWidth (Integer, optional, default no limit), maxHeight (Integer, optional, default no limit). Size constraints only affect users and do not prevent passing sizes that violate constraints to setBounds, setSize, or the BrowserWindow constructor.
BaseWindowConstructorOptions position properties
BaseWindowConstructorOptions has the following position-related properties: x (Integer, optional, required if y is used, default centers the window) - window's left offset from screen, y (Integer, optional, required if x is used, default centers the window) - window's top offset from screen, center (boolean, optional, default false) - show window in the center of the screen.
BaseWindowConstructorOptions window state and behavior properties
BaseWindowConstructorOptions has the following properties for window state and behavior: resizable (boolean, optional, default true), movable (boolean, optional, macOS Windows, default true, not implemented on Linux), minimizable (boolean, optional, macOS Windows, default true, not implemented on Linux), maximizable (boolean, optional, macOS Windows, default true, not implemented on Linux), closable (boolean, optional, macOS Windows, default true, not implemented on Linux), focusable (boolean, optional, default true - on Windows, setting focusable to false also implies skipTaskbar: true; on Linux, setting focusable to false makes the window stop interacting with wm, so it always stays on top in all workspaces), alwaysOnTop (boolean, optional, default false, not supported on Wayland Linux), modal (boolean, optional, default false - only works when the window is a child window).
BaseWindowConstructorOptions fullscreen properties
BaseWindowConstructorOptions has the following fullscreen-related properties: fullscreen (boolean, optional, default false - when explicitly set to false the fullscreen button will be hidden or disabled on macOS), fullscreenable (boolean, optional, default true - on macOS, also whether the maximize/zoom button should toggle full screen mode or maximize window), simpleFullscreen (boolean, optional, macOS only, default false - use pre-Lion fullscreen on macOS).
BaseWindowConstructorOptions visibility and taskbar properties
BaseWindowConstructorOptions has the following visibility and taskbar properties: show (boolean, optional, default true - whether window should be shown when created), skipTaskbar (boolean, optional, macOS Windows, default false - whether to show the window in taskbar), hiddenInMissionControl (boolean, optional, macOS, default undefined - whether window should be hidden when the user toggles into mission control), kiosk (boolean, optional, default false).
BaseWindowConstructorOptions identification and persistence
BaseWindowConstructorOptions has the following properties: name (string, optional) - a unique identifier for the window used internally by Electron to enable features such as state persistence, each window must have a distinct name and can only be reused after the corresponding window has been destroyed, an error is thrown if the name is already in use, this is not the visible title shown to users on the title bar. windowStatePersistence (WindowStatePersistence or boolean, optional, experimental) - configures or enables the persistence of window state (position, size, maximized state, etc.) across application restarts, has no effect if window name is not provided, automatically disabled when there is no available display.
BaseWindowConstructorOptions title and icon
BaseWindowConstructorOptions has the following properties: title (string, optional, default 'Electron') - default window title, if the HTML tag <title> is defined in the HTML file loaded by loadURL(), this property will be ignored. icon (NativeImage or string, optional) - the window icon, on Windows it is recommended to use ICO icons to get best visual effects, you can also leave it undefined so the executable's icon will be used.
BaseWindowConstructorOptions frame and parent
BaseWindowConstructorOptions has the following properties: frame (boolean, optional, default true - specify false to create a frameless window), parent (BaseWindow, optional, default null - specify parent window).
BaseWindowConstructorOptions mouse and cursor properties
BaseWindowConstructorOptions has the following properties: acceptFirstMouse (boolean, optional, macOS only, default false - whether clicking an inactive window will also click through to the web contents, this option is not configurable on other platforms), disableAutoHideCursor (boolean, optional, default false - whether to hide cursor when typing).
BaseWindowConstructorOptions menu and input properties
BaseWindowConstructorOptions has autoHideMenuBar (boolean, optional, Linux Windows, default false - auto hide the menu bar unless the Alt key is pressed).
BaseWindowConstructorOptions size and scale properties
BaseWindowConstructorOptions has enableLargerThanScreen (boolean, optional, macOS only, default false - enable the window to be resized larger than screen, only relevant for macOS as other OSes allow larger-than-screen windows by default).
BaseWindowConstructorOptions color and transparency properties
BaseWindowConstructorOptions has the following properties: backgroundColor (string, optional, default '#FFF' white - the window's background color in Hex, RGB, RGBA, HSL, HSLA or named CSS color format, alpha in #AARRGGBB format is supported if transparent is set to true, see win.setBackgroundColor for more information), hasShadow (boolean, optional, default true - whether window should have a shadow), opacity (number, optional, macOS Windows, default undefined - set the initial opacity of the window between 0.0 fully transparent and 1.0 fully opaque, only implemented on Windows and macOS), transparent (boolean, optional, default false - makes the window transparent, on Windows does not work unless the window is frameless, when adding a View to a BaseWindow you need to call view.setBackgroundColor with a transparent background color on that view to make its background transparent as well), darkTheme (boolean, optional, default false - forces using dark theme for the window, only works on some GTK+3 desktop environments).
JumpListCategory item description length limit
The maximum length of a Jump List item's description property is 260 characters. Beyond this limit, the item will not be added to the Jump List, nor will it be displayed.
JumpListCategory object structure
The JumpListCategory object has three optional properties: type (string), name (string), and items (JumpListItem[] array). The type property specifies the category type. The name property must be set if type is 'custom', otherwise it should be omitted. The items array is required if type is 'tasks' or 'custom', otherwise it should be omitted.
JumpListCategory type: tasks
The 'tasks' type places items into the standard Tasks category. There can be only one tasks category, and it will always be displayed at the bottom of the Jump List.
JumpListCategory type: frequent
The 'frequent' type displays a list of files frequently opened by the app. Both the name of the category and its items are set by Windows, not by the app.
JumpListCategory type: recent
The 'recent' type displays a list of files recently opened by the app. The name of the category and its items are set by Windows. Items may be added to this category indirectly using app.addRecentDocument(path).
JumpListCategory type: custom
The 'custom' type displays tasks or file links. When type is 'custom', the name property must be set by the app.
JumpListCategory default type inference
If a JumpListCategory object has neither the type nor the name property set, then its type is assumed to be 'tasks'. If the name property is set but the type property is omitted, then the type is assumed to be 'custom'.
KeyboardInputEvent type property values
The type property of KeyboardInputEvent can have four possible values: rawKeyDown, keyDown, keyUp, or char.
KeyboardInputEvent object structure
KeyboardInputEvent is a structure that extends InputEvent. It has two properties: type (string) which can be 'rawKeyDown', 'keyDown', 'keyUp', or 'char', and keyCode (string) which is the character that will be sent as the keyboard event and should only use valid Accelerator key codes.
KeyboardInputEvent keyCode property
The keyCode property is a string representing the character that will be sent as the keyboard event. It should only use valid Accelerator key codes.
LanguageModelCloneOptions structure fields
The LanguageModelCloneOptions object has one field: signal, which is of type AbortSignal (from Node.js globals). This field allows cancellation of the clone operation.
ThumbarButton Object structure
The ThumbarButton Object has the following properties: icon (NativeImage, required) showing in thumbnail toolbar; click (Function, required) a callback function; tooltip (string, optional) the text of the button's tooltip; flags (string[], optional) an array controlling specific states and behaviors, defaults to ['enabled'].
ThumbarButton flags values
The flags property of ThumbarButton can include these string values: 'enabled' (the button is active and available to the user), 'disabled' (the button is disabled and has a visual state indicating it will not respond to user action), 'dismissonclick' (the thumbnail window closes immediately when clicked), 'nobackground' (only the image is drawn without a button border), 'hidden' (the button is not shown to the user), 'noninteractive' (the button is enabled but not interactive; no pressed button state is drawn, intended for notifications).
WindowStatePersistence bounds property
The bounds property is an optional boolean that determines whether to persist window position and size across application restarts. It defaults to true if not specified.
WindowStatePersistence displayMode property
The displayMode property is an optional boolean that determines whether to persist display modes (fullscreen, kiosk, maximized, etc.) across application restarts. It defaults to true if not specified.
TouchBarColorPicker constructor parameters
The TouchBarColorPicker constructor accepts an options object with the following properties: availableColors (optional, string[] - array of hex color strings to appear as possible colors to select), selectedColor (optional, string - the selected hex color in the picker, e.g. #ABCDEF), and change (optional, Function - function to call when a color is selected, receives the selected color string as a parameter).
TouchBarColorPicker class overview
TouchBarColorPicker creates a color picker in the touch bar for native macOS applications. It runs in the Main process and is not exported from the 'electron' module; it is only available as a return value of other methods in the Electron API.
TouchBarSegmentedControl constructor options
new TouchBarSegmentedControl(options) accepts an options object with the following properties: - segmentStyle (string, optional): Style of the segments. Values: 'automatic' (default, maps to NSSegmentStyleAutomatic), 'rounded' (maps to NSSegmentStyleRounded), 'textured-rounded' (maps to NSSegmentStyleTexturedRounded), 'round-rect' (maps to NSSegmentStyleRoundRect), 'textured-square' (maps to NSSegmentStyleTexturedSquare), 'capsule' (maps to NSSegmentStyleCapsule), 'small-square' (maps to NSSegmentStyleSmallSquare), 'separated' (segments displayed very close but not touching, maps to NSSegmentStyleSeparated). - mode (string, optional): Selection mode. Values: 'single' (default, one item selected at a time, selecting one deselects previously selected, maps to NSSegmentSwitchTrackingSelectOne), 'multiple' (multiple items can be selected, maps to NSSegmentSwitchTrackingSelectAny), 'buttons' (segments act as buttons, can be pressed/released but never marked as active, maps to NSSegmentSwitchTrackingMomentary). - segments (SegmentedControlSegment[] array): An array of segments to place in the control. - selectedIndex (Integer, optional): The index of the currently selected segment, updates automatically with user interaction. In 'multiple' mode, represents the last selected item. - change (Function, optional): Called when user selects a new segment, receives selectedIndex (Integer) and isSelected (boolean) parameters.
TouchBarSegmentedControl class definition
TouchBarSegmentedControl creates a segmented control (a button group) where one button has a selected state. The class is available only as a return value of other methods in the Electron API, not exported directly from the 'electron' module. It runs in the main process.
TouchBar.escapeItem instance property
The escapeItem property on a TouchBar instance accepts a TouchBarItem that will replace the esc button on the touch bar when set. Setting it to null restores the default esc button. Changing this value immediately updates the escape item in the touch bar.
TouchBar main process only
TouchBar is only available in the main process, not in renderer processes.
TouchBar macOS only
TouchBar is used to create touch bar layouts for native macOS applications.
TouchBar API is experimental
The TouchBar API is currently experimental and may change or be removed in future Electron releases.
TouchBar constructor options
The TouchBar constructor accepts an options object with two optional properties: items (an array of TouchBarButton, TouchBarColorPicker, TouchBarGroup, TouchBarLabel, TouchBarPopover, TouchBarScrubber, TouchBarSegmentedControl, TouchBarSlider, or TouchBarSpacer instances) and escapeItem (a single TouchBarItem of the same types, or null, which replaces the esc button on the touch bar when set).
TouchBar example slot machine game
const { app, BrowserWindow, TouchBar } = require('electron') const { TouchBarLabel, TouchBarButton, TouchBarSpacer } = TouchBar let spinning = false // Reel labels const reel1 = new TouchBarLabel({ label: '' }) const reel2 = new TouchBarLabel({ label: '' }) const reel3 = new TouchBarLabel({ label: '' }) // Spin result label const result = new TouchBarLabel({ label: '' }) // Spin button const spin = new TouchBarButton({ label: '🎰 Spin', backgroundColor: '#7851A9', click: () => { // Ignore clicks if already spinning if (spinning) { return } spinning = true result.label = '' let timeout = 10 const spinLength = 4 * 1000 // 4 seconds const startTime = Date.now() const spinReels = () => { updateReels() if ((Date.now() - startTime) >= spinLength) { finishSpin() } else { // Slow down a bit on each spin timeout *= 1.1 setTimeout(spinReels, timeout) } } spinReels() } }) const getRandomValue = () => { const values = ['🍒', '💎', '7️⃣', '🍊', '🔔', '⭐', '🍇', '🍀'] return values[Math.floor(Math.random() * values.length)] } const updateReels = () => { reel1.label = getRandomValue() reel2.label = getRandomValue() reel3.label = getRandomValue() } const finishSpin = () => { const uniqueValues = new Set([reel1.label, reel2.label, reel3.label]).size if (uniqueValues === 1) { // All 3 values are the same result.label = '💰 Jackpot!' result.textColor = '#FDFF00' } else if (uniqueValues === 2) { // 2 values are the same result.label = '😍 Winner!' result.textColor = '#FDFF00' } else { // No values are the same result.label = '🙁 Spin Again' result.textColor = null } spinning = false } const touchBar = new TouchBar({ items: [ spin, new TouchBarSpacer({ size: 'large' }), reel1, new TouchBarSpacer({ size: 'small' }), reel2, new TouchBarSpacer({ size: 'small' }), reel3, new TouchBarSpacer({ size: 'large' }), result ] }) let window app.whenReady().then(() => { window = new BrowserWindow({ frame: false, titleBarStyle: 'hiddenInset', width: 200, height: 200, backgroundColor: '#000' }) window.loadURL('about:blank') window.setTouchBar(touchBar) })
TouchBar static properties reference classes
TouchBar has static properties that provide references to its item classes: TouchBarButton, TouchBarColorPicker, TouchBarGroup, TouchBarLabel, TouchBarPopover, TouchBarScrubber, TouchBarSegmentedControl, TouchBarSlider, TouchBarSpacer, and TouchBarOtherItemsProxy.
window.open() signature and return type
The window.open() method signature is window.open(url[, frameName][, features]). The url parameter is a string (required). The frameName parameter is a string (optional). The features parameter is a string (optional). It returns a Window object or null.