⚠ Process Availability: Main ✔ | Renderer ✔ | Utility ❌ | Exported ❌

⚠ Process Availability: Main ✔ | Renderer ✔ | Utility ✔ | Exported ❌

⚠ Process Availability: Main ❌ | Renderer ✔ | Utility ❌ | Exported ❌### WarningElectron's webview tag is based on Chromium's webview, which is undergoing dramatic architectural changes. This impacts the stability of webviews, including rendering, navigation, and event routing. We currently recommend to not use the webview tag and to consider alternatives, like iframe, a WebContentsView, or an architecture that avoids embedded content altogether.### EnablingBy default the webview tag is disabled in Electron >= 5. You need to enable the tag by setting the webviewTag webPreferences option when constructing your BrowserWindow. For more information see the BrowserWindow constructor docs.### Overview> Display external web content in an isolated frame and process.Process: Renderer _This class is not exported from the 'electron' module. It is only available as a return value of other methods in the Electron API._Use the webview tag to embed 'guest' content (such as web pages) in your Electron app. The guest content is contained within the webview container. An embedded page within your app controls how the guest content is laid out and rendered.Unlike an iframe, the webview runs in a separate process than your app. It doesn't have the same permissions as your web page and all interactions between your app and embedded content will be asynchronous. This keeps your app safe from the embedded content.> [!NOTE] Most methods called on the webview from the host page require a synchronous call to the main process.### ExampleTo embed a web page in your app, add the webview tag to your app's embedder page (this is the app page that will display the guest content). In its simplest form, the webview tag includes the src of the web page and css styles that control the appearance of the webview container:If you want to control the guest content in any way, you can write JavaScript that listens for webview events and responds to those events using the webview methods. Here's sample code with two event listeners: one that listens for the web page to start loading, the other for the web page to stop loading, and displays a "loading..." message during the load time:### Internal implementationUnder the hood webview is implemented with Out-of-Process iframes (OOPIFs). The webview tag is essentially a custom element using shadow DOM to wrap an iframe element inside it.So the behavior of webview is very similar to a cross-domain iframe, as examples:* When clicking into a webview, the page focus will move from the embedder frame to webview.* You can not add keyboard, mouse, and scroll event listeners to webview.* All reactions between the embedder frame and webview are asynchronous.### CSS Styling NotesPlease note that the webview tag's style uses display:flex; internally to ensure the child iframe element fills the full height and width of its webview container when used with traditional and flexbox layouts. Please do not overwrite the default display:flex; CSS property, unless specifying display:inline-flex; for inline layout.### Tag AttributesThe webview tag has the following attributes:### srcA string representing the visible URL. Writing to this attribute initiates top-level navigation.Assigning src its own value will reload the current page.The src attribute can also accept data URLs, such as data:text/plain,Hello, world!.### nodeintegrationA boolean. When this attribute is present the guest page in webview will have node integration and can use node APIs like require and process to access low level system resources. Node integration is disabled by default in the guest page.### nodeintegrationinsubframesA boolean for the experimental option for enabling NodeJS support in sub-frames such as iframes inside the webview. All your preloads will load for every iframe, you can use process.isMainFrame to determine if you are in the main frame or not. This option is disabled by default in the guest page.### pluginsA boolean. When this attribute is present the guest page in webview will be able to use browser plugins. Plugins are disabled by default.### preloadA string that specifies a script that will be loaded before other scripts run in the guest page. The protocol of script's URL must be file: (even when using asar: archives) because it will be loaded by Node's require under the hood, which treats asar: archives as virtual directories.When the guest page doesn't have node integration this script will still have access to all Node APIs, but global objects injected by Node will be deleted after this script has finished executing.### httpreferrerA string that sets the referrer URL for the guest page.### useragentA string that sets the user agent for the guest page before the page is navigated to. Once the page is loaded, use the setUserAgent method to change the user agent.### disablewebsecurityA boolean. When this attribute is present the guest page will have web security disabled. Web security is enabled by default.This value can only be modified before the first navigation.### partitionA string that sets the session used by the page. If partition starts with persist:, the page will use a persistent session available to all pages in the app with the same partition. if there is no persist: prefix, the page will use an in-memory session. By assigning the same partition, multiple pages can share the same session. If the partition is unset then default session of the app will be used.This value can only be modified before the first navigation, since the session of an active renderer process cannot change. Subsequent attempts to modify the value will fail with a DOM exception.### allowpopupsA boolean. When this attribute is present the guest page will be allowed to open new windows. Popups are disabled by default.### webpreferencesA string which is a comma separated list of strings which specifies the web preferences to be set on the webview. The full list of supported preference strings can be found in BrowserWindow.The string follows the same format as the features string in window.open. A name by itself is given a true boolean value. A preference can be set to another value by including an =, followed by the value. Special values yes and 1 are interpreted as true, while no and 0 are interpreted as false.### enableblinkfeaturesA string which is a list of strings which specifies the blink features to be enabled separated by ,. The full list of supported feature strings can be found in the RuntimeEnabledFeatures.json5 file.### disableblinkfeaturesA string which is a list of strings which specifies the blink features to be disabled separated by ,. The full list of supported feature strings can be found in the RuntimeEnabledFeatures.json5 file.

⚠ Process Availability: Main ✔ | Renderer ✔ | Utility ❌ | Exported ✔

Perform copy and paste operations on the system clipboard.Process: Main, Renderer (non-sandboxed only)> [!IMPORTANT] If you want to call this API from a renderer process with context isolation enabled, place the API call in your preload script and expose it using the contextBridge API.On Linux, there is also a selection clipboard. To manipulate it you need to pass selection to each method:

⚠ Process Availability: Main ❌ | Renderer ✔ | Utility ❌ | Exported ✔

Create a safe, bi-directional, synchronous bridge across isolated contextsProcess: RendererAn example of exposing an API to a renderer from an isolated preload script is given below:// Preload (Isolated World)const { contextBridge, ipcRenderer } = require('electron')contextBridge.exposeInMainWorld( 'electron', { doThing: () => ipcRenderer.send('do-a-thing') })### Glossary### Main WorldThe "Main World" is the JavaScript context that your main renderer code runs in. By default, the page you load in your renderer executes code in this world.### Isolated WorldWhen contextIsolation is enabled in your webPreferences (this is the default behavior since Electron 12.0.0), your preload scripts run in an "Isolated World". You can read more about context isolation and what it affects in the security docs.

⚠ Process Availability: Main ✔ | Renderer ✔ | Utility ❌ | Exported ✔

Submit crash reports to a remote server.Process: Main, Renderer> [!IMPORTANT] If you want to call this API from a renderer process with context isolation enabled, place the API call in your preload script and expose it using the contextBridge API.The following is an example of setting up Electron to automatically submit crash reports to a remote server:const { crashReporter } = require('electron')crashReporter.start({ submitURL: 'https://your-domain.com/url-to-submit' })For setting up a server to accept and process crash reports, you can use following projects:* socorro* mini-breakpad-server> [!NOTE] Electron uses Crashpad, not Breakpad, to collect and upload crashes, but for the time being, the upload protocol is the same.Or use a 3rd party hosted solution:* Backtrace* Sentry* BugSplat* BugsnagCrash reports are stored temporarily before being uploaded in a directory underneath the app's user data directory, called 'Crashpad'. You can override this directory by calling app.setPath('crashDumps', '/path/to/crashes') before starting the crash reporter.Electron uses crashpad to monitor and report crashes.

⚠ Process Availability: Main ❌ | Renderer ✔ | Utility ❌ | Exported ✔### ipcRenderer> Communicate asynchronously from a renderer process to the main process.Process: Renderer> [!IMPORTANT] If you want to call this API from a renderer process with context isolation enabled, place the API call in your preload script and expose it using the contextBridge API.The ipcRenderer module is an EventEmitter. It provides a few methods so you can send synchronous and asynchronous messages from the render process (web page) to the main process. You can also receive replies from the main process.See IPC tutorial for code examples.

⚠ Process Availability: Main ✔ | Renderer ✔ | Utility ❌ | Exported ✔

Create tray, dock, and application icons using PNG or JPG files.Process: Main, Renderer> [!IMPORTANT] If you want to call this API from a renderer process with context isolation enabled, place the API call in your preload script and expose it using the contextBridge API.The nativeImage module provides a unified interface for manipulating system images. These can be handy if you want to provide multiple scaled versions of the same icon or take advantage of macOS template images.Electron APIs that take image files accept either file paths or NativeImage instances. An empty and transparent image will be used when null is passed.For example, when creating a Tray or setting a BrowserWindow's icon, you can either pass an image file path as a string:const { BrowserWindow, Tray } = require('electron')const tray = new Tray('/Users/somebody/images/icon.png')const win = new BrowserWindow({ icon: '/Users/somebody/images/window.png' })or generate a NativeImage instance from the same file:### Supported FormatsCurrently, PNG and JPEG image formats are supported across all platforms. PNG is recommended because of its support for transparency and lossless compression.On Windows, you can also load ICO icons from file paths. For best visual quality, we recommend including at least the following sizes:* Small icon * 16x16 (100% DPI scale) * 20x20 (125% DPI scale) * 24x24 (150% DPI scale) * 32x32 (200% DPI scale)* Large icon * 32x32 (100% DPI scale) * 40x40 (125% DPI scale) * 48x48 (150% DPI scale) * 64x64 (200% DPI scale) * 256x256Check the Icon Scaling section in the Windows App Icon Construction reference.:::noteEXIF metadata is currently not supported and will not be taken into account during image encoding and decoding.:::### High Resolution ImageOn platforms that support high pixel density displays (such as Apple Retina), you can append @2x after image's base filename to mark it as a 2x scale high resolution image.For example, if icon.png is a normal image that has standard resolution, then icon@2x.png will be treated as a high resolution image that has double Dots per Inch (DPI) density.If you want to support displays with different DPI densities at the same time, you can put images with different sizes in the same folder and use the filename without DPI suffixes within Electron. For example:images/├── icon.png├── icon@2x.png└── icon@3x.pngconst { Tray } = require('electron')const appTray = new Tray('/Users/somebody/images/icon.png')The following suffixes for DPI are also supported:* @1x* @1.25x* @1.33x* @1.4x* @1.5x* @1.8x* @2x* @2.5x* @3x* @4x* @5x### Template Image _macOS_On macOS, template images consist of black and an alpha channel. Template images are not intended to be used as standalone images and are usually mixed with other content to create the desired final appearance.The most common case is to use template images for a menu bar (Tray) icon, so it can adapt to both light and dark menu bars.To mark an image as a template image, its base filename should end with the word Template (e.g. xxxTemplate.png). You can also specify template images at different DPI densities (e.g. xxxTemplate@2x.png).

⚠ Process Availability: Main ✔ | Renderer ✔ | Utility ❌ | Exported ✔

Extensions to process object.Process: Main, RendererElectron's process object is extended from the Node.js process object. It adds the following events, properties, and methods:### SandboxIn sandboxed renderers the process object contains only a subset of the APIs:* crash()* hang()* getCreationTime()* getHeapStatistics()* getBlinkMemoryInfo()* getProcessMemoryInfo()* getSystemMemoryInfo()* getSystemVersion()* getCPUUsage()* uptime()* argv* execPath* env* pid* arch* platform* sandboxed* contextIsolated* type* version* versions* mas* windowsStore* contextId

⚠ Process Availability: Main ✔ | Renderer ✔ | Utility ❌ | Exported ✔

Manage files and URLs using their default applications.Process: Main, Renderer (non-sandboxed only)The shell module provides functions related to desktop integration.An example of opening a URL in the user's default browser:const { shell } = require('electron')shell.openExternal('https://github.com')> [!WARNING] While the shell module can be used in the renderer process, it will not function in a sandboxed renderer.

⚠ Process Availability: Main ❌ | Renderer ✔ | Utility ❌ | Exported ✔

Customize the rendering of the current web page.Process: Renderer> [!IMPORTANT] If you want to call this API from a renderer process with context isolation enabled, place the API call in your preload script and expose it using the contextBridge API.webFrame export of the Electron module is an instance of the WebFrame class representing the current frame. Sub-frames can be retrieved by certain properties and methods (e.g. webFrame.firstChild).An example of zooming current page to 200%.

⚠ Process Availability: Main ❌ | Renderer ✔ | Utility ❌ | Exported ✔

A utility layer to interact with Web API objects (Files, Blobs, etc.)Process: Renderer> [!IMPORTANT] If you want to call this API from a renderer process with context isolation enabled, place the API call in your preload script and expose it using the contextBridge API.