From 08ca9ad4009c915b2304b29c791af6de0ad933ba Mon Sep 17 00:00:00 2001
From: electron-bot <electron@github.com>
Date: Tue, 5 Dec 2023 08:58:34 +0000
Subject: [PATCH] =?UTF-8?q?chore:=20update=20ref=20to=20docs=20(?=
 =?UTF-8?q?=F0=9F=A4=96)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/latest/api/app.md                        |  15 +-
 docs/latest/api/browser-view.md               |   6 +-
 docs/latest/api/browser-window.md             |  60 +-----
 docs/latest/api/environment-variables.md      |  10 +
 docs/latest/api/ipc-renderer.md               |  27 ++-
 docs/latest/api/screen.md                     |   5 +-
 docs/latest/api/session.md                    |   2 +-
 .../api/structures/browser-window-options.md  |   9 +-
 docs/latest/api/structures/display.md         |  21 ++-
 .../api/structures/ipc-renderer-event.md      |   3 -
 docs/latest/api/structures/web-preferences.md |   6 +-
 docs/latest/api/system-preferences.md         |   2 +-
 docs/latest/api/tray.md                       |  13 +-
 docs/latest/api/utility-process.md            |   3 +-
 docs/latest/api/web-contents.md               |  34 +++-
 docs/latest/api/webview-tag.md                |  16 +-
 docs/latest/breaking-changes.md               | 110 +++++++++++
 .../development/build-instructions-gn.md      |   2 +-
 docs/latest/development/testing.md            |   2 +-
 .../latest/fiddles/features/dark-mode/main.js |   2 +-
 .../fiddles/features/dark-mode/preload.js     |   2 +-
 .../fiddles/features/drag-and-drop/main.js    |   2 +-
 .../fiddles/features/drag-and-drop/preload.js |   6 +-
 .../keyboard-shortcuts/global/main.js         |   2 +-
 .../interception-from-main/main.js            |   2 +-
 .../features/keyboard-shortcuts/local/main.js |   2 +-
 .../keyboard-shortcuts/web-apis/main.js       |   2 +-
 .../fiddles/features/macos-dock-menu/main.js  |   2 +-
 .../features/notifications/main/main.js       |   2 +-
 .../features/notifications/renderer/main.js   |   2 +-
 .../features/offscreen-rendering/main.js      |   2 +-
 .../fiddles/features/online-detection/main.js |   2 +-
 .../fiddles/features/progress-bar/main.js     |   2 +-
 .../fiddles/features/recent-documents/main.js |   2 +-
 .../fiddles/features/represented-file/main.js |   2 +-
 .../fiddles/features/web-bluetooth/main.js    |   2 +-
 .../fiddles/features/web-bluetooth/preload.js |   6 +-
 docs/latest/fiddles/features/web-hid/main.js  |   2 +-
 .../fiddles/features/web-hid/renderer.js      |  21 +--
 .../fiddles/features/web-serial/main.js       |   2 +-
 docs/latest/fiddles/features/web-usb/main.js  |   2 +-
 .../fiddles/features/web-usb/renderer.js      |   4 +-
 docs/latest/fiddles/ipc/pattern-1/main.js     |   2 +-
 docs/latest/fiddles/ipc/pattern-1/preload.js  |   2 +-
 docs/latest/fiddles/ipc/pattern-2/main.js     |   2 +-
 docs/latest/fiddles/ipc/pattern-2/preload.js  |   2 +-
 docs/latest/fiddles/ipc/pattern-3/main.js     |   2 +-
 docs/latest/fiddles/ipc/pattern-3/preload.js  |   5 +-
 docs/latest/fiddles/ipc/pattern-3/renderer.js |   6 +-
 .../fiddles/ipc/webview-new-window/main.js    |   2 +-
 .../fiddles/ipc/webview-new-window/preload.js |   2 +-
 .../screenshot/take-screenshot/index.html     |   5 +-
 .../media/screenshot/take-screenshot/main.js  |  41 ++++-
 .../screenshot/take-screenshot/preload.js     |   5 +
 .../screenshot/take-screenshot/renderer.js    |  32 +---
 .../fiddles/menus/customize-menus/index.html  |   6 +-
 .../fiddles/menus/customize-menus/main.js     |  29 +--
 .../fiddles/menus/customize-menus/preload.js  |   5 +
 .../fiddles/menus/customize-menus/renderer.js |   4 +-
 docs/latest/fiddles/menus/shortcuts/main.js   |   8 +-
 .../native-ui/dialogs/error-dialog/index.html |   5 +-
 .../native-ui/dialogs/error-dialog/main.js    |   6 +-
 .../native-ui/dialogs/error-dialog/preload.js |   5 +
 .../dialogs/error-dialog/renderer.js          |   6 +-
 .../dialogs/information-dialog/index.html     |   5 +-
 .../dialogs/information-dialog/main.js        |  12 +-
 .../dialogs/information-dialog/preload.js     |   5 +
 .../dialogs/information-dialog/renderer.js    |  13 +-
 .../dialogs/open-file-or-directory/index.html |   5 +-
 .../dialogs/open-file-or-directory/main.js    |  22 +--
 .../dialogs/open-file-or-directory/preload.js |   5 +
 .../open-file-or-directory/renderer.js        |   9 +-
 .../native-ui/dialogs/save-dialog/index.html  |   5 +-
 .../native-ui/dialogs/save-dialog/main.js     |  12 +-
 .../native-ui/dialogs/save-dialog/preload.js  |   5 +
 .../native-ui/dialogs/save-dialog/renderer.js |  10 +-
 .../native-ui/drag-and-drop/index.html        |   5 +-
 .../fiddles/native-ui/drag-and-drop/main.js   |  10 +-
 .../native-ui/drag-and-drop/preload.js        |   5 +
 .../native-ui/drag-and-drop/renderer.js       |   4 +-
 .../external-links-file-manager/index.html    |   6 +-
 .../external-links-file-manager/main.js       |  15 +-
 .../external-links-file-manager/preload.js    |   6 +
 .../external-links-file-manager/renderer.js   |   7 +-
 .../native-ui/notifications/index.html        |   5 +-
 .../fiddles/native-ui/notifications/main.js   |   8 +-
 docs/latest/fiddles/native-ui/tray/main.js    |   2 +-
 docs/latest/fiddles/quick-start/main.js       |   2 +-
 docs/latest/fiddles/screen/fit-screen/main.js |   5 +-
 .../fiddles/system/clipboard/copy/main.js     |   2 +-
 .../fiddles/system/clipboard/copy/preload.js  |   2 +-
 .../fiddles/system/clipboard/paste/main.js    |   2 +-
 .../fiddles/system/clipboard/paste/preload.js |   2 +-
 .../index.html                                |   2 +-
 .../main.js                                   |   2 +-
 .../preload.js                                |  14 +-
 .../app-information/index.html                |   5 +-
 .../app-information/main.js                   |   6 +-
 .../app-information/preload.js                |   5 +
 .../app-information/renderer.js               |   4 +-
 .../get-version-information/index.html        |   4 +-
 .../get-version-information/main.js           |   6 +-
 .../get-version-information/preload.js        |   3 +
 .../get-version-information/renderer.js       |   4 +-
 .../latest/fiddles/tutorial-first-app/main.js |   2 +-
 docs/latest/fiddles/tutorial-preload/main.js  |   2 +-
 .../fiddles/tutorial-preload/preload.js       |   2 +-
 .../frameless-window/index.html               |   6 +-
 .../manage-windows/frameless-window/main.js   |   6 +-
 .../frameless-window/preload.js               |   5 +
 .../frameless-window/renderer.js              |   4 +-
 .../manage-window-state/index.html            |   6 +-
 .../manage-window-state/main.js               |   6 +-
 .../manage-window-state/preload.js            |   6 +
 .../manage-window-state/renderer.js           |   6 +-
 .../manage-windows/new-window/index.html      |  17 +-
 .../windows/manage-windows/new-window/main.js |   6 +-
 .../manage-windows/new-window/preload.js      |   5 +
 .../manage-windows/new-window/renderer.js     |   4 +-
 .../manage-windows/window-events/index.html   |   6 +-
 .../manage-windows/window-events/main.js      |   7 +-
 .../manage-windows/window-events/preload.js   |   9 +
 .../manage-windows/window-events/renderer.js  |  12 +-
 docs/latest/tutorial/asar-integrity.md        |   2 +-
 docs/latest/tutorial/boilerplates-and-clis.md |   2 +-
 docs/latest/tutorial/code-signing.md          |  14 +-
 docs/latest/tutorial/dark-mode.md             |   4 +-
 docs/latest/tutorial/electron-timelines.md    |   7 +-
 docs/latest/tutorial/esm.md                   | 172 ++++++++++++++++++
 docs/latest/tutorial/in-app-purchases.md      |   8 +-
 docs/latest/tutorial/ipc.md                   |  25 ++-
 docs/latest/tutorial/keyboard-shortcuts.md    |   6 +-
 .../launch-app-from-url-in-another-app.md     |   4 +-
 docs/latest/tutorial/macos-dock.md            |   2 +-
 docs/latest/tutorial/message-ports.md         |   2 +-
 docs/latest/tutorial/native-file-drag-drop.md |   2 +-
 docs/latest/tutorial/notifications.md         |   2 +-
 docs/latest/tutorial/offscreen-rendering.md   |   2 +-
 docs/latest/tutorial/progress-bar.md          |   2 +-
 docs/latest/tutorial/quick-start.md           |  11 +-
 docs/latest/tutorial/recent-documents.md      |   2 +-
 docs/latest/tutorial/represented-file.md      |   2 +-
 docs/latest/tutorial/snapcraft.md             |  10 +-
 docs/latest/tutorial/tutorial-2-first-app.md  |   6 +-
 docs/latest/tutorial/tutorial-5-packaging.md  |   4 +-
 .../tutorial/using-native-node-modules.md     |   2 +-
 docs/latest/tutorial/windows-store-guide.md   |   4 +-
 sidebars.js                                   |   1 +
 148 files changed, 770 insertions(+), 499 deletions(-)
 create mode 100644 docs/latest/fiddles/media/screenshot/take-screenshot/preload.js
 create mode 100644 docs/latest/fiddles/menus/customize-menus/preload.js
 create mode 100644 docs/latest/fiddles/native-ui/dialogs/error-dialog/preload.js
 create mode 100644 docs/latest/fiddles/native-ui/dialogs/information-dialog/preload.js
 create mode 100644 docs/latest/fiddles/native-ui/dialogs/open-file-or-directory/preload.js
 create mode 100644 docs/latest/fiddles/native-ui/dialogs/save-dialog/preload.js
 create mode 100644 docs/latest/fiddles/native-ui/drag-and-drop/preload.js
 create mode 100644 docs/latest/fiddles/native-ui/external-links-file-manager/preload.js
 create mode 100644 docs/latest/fiddles/system/system-app-user-information/app-information/preload.js
 create mode 100644 docs/latest/fiddles/system/system-information/get-version-information/preload.js
 create mode 100644 docs/latest/fiddles/windows/manage-windows/frameless-window/preload.js
 create mode 100644 docs/latest/fiddles/windows/manage-windows/manage-window-state/preload.js
 create mode 100644 docs/latest/fiddles/windows/manage-windows/new-window/preload.js
 create mode 100644 docs/latest/fiddles/windows/manage-windows/window-events/preload.js
 create mode 100644 docs/latest/tutorial/esm.md

diff --git a/docs/latest/api/app.md b/docs/latest/api/app.md
index 94aedb253..da61c940d 100644
--- a/docs/latest/api/app.md
+++ b/docs/latest/api/app.md
@@ -1549,7 +1549,7 @@ A `boolean` property that returns  `true` if the app is packaged, `false` otherw
 [tasks]:https://learn.microsoft.com/en-us/windows/win32/shell/taskbar-extensions#tasks
 [app-user-model-id]: https://learn.microsoft.com/en-us/windows/win32/shell/appids
 [electron-forge]: https://www.electronforge.io/
-[electron-packager]: https://github.com/electron/electron-packager
+[electron-packager]: https://github.com/electron/packager
 [CFBundleURLTypes]: https://developer.apple.com/library/ios/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html#//apple_ref/doc/uid/TP40009249-102207-TPXREF115
 [LSCopyDefaultHandlerForURLScheme]: https://developer.apple.com/documentation/coreservices/1441725-lscopydefaulthandlerforurlscheme?language=objc
 [handoff]: https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/Handoff/HandoffFundamentals/HandoffFundamentals.html
@@ -1578,19 +1578,6 @@ This is the user agent that will be used when no user agent is set at the
 app has the same user agent.  Set to a custom value as early as possible
 in your app's initialization to ensure that your overridden value is used.
 
-### `app.runningUnderRosettaTranslation` _macOS_ _Readonly_ _Deprecated_
-
-A `boolean` which when `true` indicates that the app is currently running
-under the [Rosetta Translator Environment](https://en.wikipedia.org/wiki/Rosetta_(software)).
-
-You can use this property to prompt users to download the arm64 version of
-your application when they are running the x64 version under Rosetta
-incorrectly.
-
-**Deprecated:** This property is superceded by the `runningUnderARM64Translation`
-property which detects when the app is being translated to ARM64 in both macOS
-and Windows.
-
 ### `app.runningUnderARM64Translation` _Readonly_ _macOS_ _Windows_
 
 A `boolean` which when `true` indicates that the app is currently running under
diff --git a/docs/latest/api/browser-view.md b/docs/latest/api/browser-view.md
index e0cc1e35a..fac5788a4 100644
--- a/docs/latest/api/browser-view.md
+++ b/docs/latest/api/browser-view.md
@@ -115,7 +115,11 @@ app.whenReady().then(() => {
     * `defaultEncoding` string (optional) - Defaults to `ISO-8859-1`.
     * `backgroundThrottling` boolean (optional) - Whether to throttle animations and timers
       when the page becomes background. This also affects the
-      [Page Visibility API](latest/api/browser-window.md#page-visibility). Defaults to `true`.
+      [Page Visibility API](latest/api/browser-window.md#page-visibility). When at least one
+      [webContents](latest/api/web-contents.md) displayed in a single
+      [browserWindow](latest/api/browser-window.md) has disabled `backgroundThrottling` then
+      frames will be drawn and swapped for the whole window and other
+      [webContents](latest/api/web-contents.md) displayed by it. Defaults to `true`.
     * `offscreen` boolean (optional) - Whether to enable offscreen rendering for the browser
       window. Defaults to `false`. See the
       [offscreen rendering tutorial](latest/tutorial/offscreen-rendering.md) for
diff --git a/docs/latest/api/browser-window.md b/docs/latest/api/browser-window.md
index 44ebdfa13..922b7fe15 100644
--- a/docs/latest/api/browser-window.md
+++ b/docs/latest/api/browser-window.md
@@ -257,9 +257,6 @@ It creates a new `BrowserWindow` with native properties as set by the `options`.
   * `roundedCorners` boolean (optional) _macOS_ - Whether frameless window
     should have rounded corners on macOS. Default is `true`. Setting this property
     to `false` will prevent the window from being fullscreenable.
-  * `fullscreenWindowTitle` boolean (optional) _macOS_ _Deprecated_ - Shows
-    the title in the title bar in full screen mode on macOS for `hiddenInset`
-    titleBarStyle. Default is `false`.
   * `thickFrame` boolean (optional) - Use `WS_THICKFRAME` style for frameless windows on
     Windows, which adds standard window frame. Setting it to `false` will remove
     window shadow and window animations. Default is `true`.
@@ -356,7 +353,11 @@ It creates a new `BrowserWindow` with native properties as set by the `options`.
     * `defaultEncoding` string (optional) - Defaults to `ISO-8859-1`.
     * `backgroundThrottling` boolean (optional) - Whether to throttle animations and timers
       when the page becomes background. This also affects the
-      [Page Visibility API](latest/api/browser-window.md#page-visibility). Defaults to `true`.
+      [Page Visibility API](latest/api/browser-window.md#page-visibility). When at least one
+      [webContents](latest/api/web-contents.md) displayed in a single
+      [browserWindow](latest/api/browser-window.md) has disabled `backgroundThrottling` then
+      frames will be drawn and swapped for the whole window and other
+      [webContents](latest/api/web-contents.md) displayed by it. Defaults to `true`.
     * `offscreen` boolean (optional) - Whether to enable offscreen rendering for the browser
       window. Defaults to `false`. See the
       [offscreen rendering tutorial](latest/tutorial/offscreen-rendering.md) for
@@ -672,36 +673,6 @@ The following app commands are explicitly supported on Linux:
 * `browser-backward`
 * `browser-forward`
 
-#### Event: 'scroll-touch-begin' _macOS_ _Deprecated_
-
-Emitted when scroll wheel event phase has begun.
-
-> **Note**
-> This event is deprecated beginning in Electron 22.0.0. See [Breaking
-> Changes](latest/breaking-changes.md#deprecated-browserwindow-scroll-touch--events)
-> for details of how to migrate to using the [WebContents
-> `input-event`](latest/api/web-contents.md#event-input-event) event.
-
-#### Event: 'scroll-touch-end' _macOS_ _Deprecated_
-
-Emitted when scroll wheel event phase has ended.
-
-> **Note**
-> This event is deprecated beginning in Electron 22.0.0. See [Breaking
-> Changes](latest/breaking-changes.md#deprecated-browserwindow-scroll-touch--events)
-> for details of how to migrate to using the [WebContents
-> `input-event`](latest/api/web-contents.md#event-input-event) event.
-
-#### Event: 'scroll-touch-edge' _macOS_ _Deprecated_
-
-Emitted when scroll wheel event phase filed upon reaching the edge of element.
-
-> **Note**
-> This event is deprecated beginning in Electron 22.0.0. See [Breaking
-> Changes](latest/breaking-changes.md#deprecated-browserwindow-scroll-touch--events)
-> for details of how to migrate to using the [WebContents
-> `input-event`](latest/api/web-contents.md#event-input-event) event.
-
 #### Event: 'swipe' _macOS_
 
 Returns:
@@ -1904,25 +1875,6 @@ Passing `null` will reset the position to default.
 Returns `Point | null` - The custom position for the traffic light buttons in
 frameless window, `null` will be returned when there is no custom position.
 
-#### `win.setTrafficLightPosition(position)` _macOS_ _Deprecated_
-
-* `position` [Point](latest/api/structures/point.md)
-
-Set a custom position for the traffic light buttons in frameless window.
-Passing `{ x: 0, y: 0 }` will reset the position to default.
-
-> **Note**
-> This function is deprecated. Use [setWindowButtonPosition](#winsetwindowbuttonpositionposition-macos) instead.
-
-#### `win.getTrafficLightPosition()` _macOS_ _Deprecated_
-
-Returns `Point` - The custom position for the traffic light buttons in
-frameless window, `{ x: 0, y: 0 }` will be returned when there is no custom
-position.
-
-> **Note**
-> This function is deprecated. Use [getWindowButtonPosition](#wingetwindowbuttonposition-macos) instead.
-
 #### `win.setTouchBar(touchBar)` _macOS_
 
 * `touchBar` TouchBar | null
@@ -1975,7 +1927,7 @@ removed in future Electron releases.
 * `options` Object
   * `color` String (optional) _Windows_ - The CSS color of the Window Controls Overlay when enabled.
   * `symbolColor` String (optional) _Windows_ - The CSS color of the symbols on the Window Controls Overlay when enabled.
-  * `height` Integer (optional) _Windows_ - The height of the title bar and Window Controls Overlay in pixels.
+  * `height` Integer (optional) _macOS_ _Windows_ - The height of the title bar and Window Controls Overlay in pixels.
 
 On a Window with Window Controls Overlay already enabled, this method updates
 the style of the title bar overlay.
diff --git a/docs/latest/api/environment-variables.md b/docs/latest/api/environment-variables.md
index 3994112f2..4987438a1 100644
--- a/docs/latest/api/environment-variables.md
+++ b/docs/latest/api/environment-variables.md
@@ -118,6 +118,16 @@ Options:
 * `kioclient5`
 * `kioclient`
 
+### `ELECTRON_OZONE_PLATFORM_HINT` _Linux_
+
+Selects the preferred platform backend used on Linux. The default one is `x11`. `auto` selects Wayland if possible, X11 otherwise.
+
+Options:
+
+* `auto`
+* `wayland`
+* `x11`
+
 ## Development Variables
 
 The following environment variables are intended primarily for development and
diff --git a/docs/latest/api/ipc-renderer.md b/docs/latest/api/ipc-renderer.md
index f6b203333..74e418954 100644
--- a/docs/latest/api/ipc-renderer.md
+++ b/docs/latest/api/ipc-renderer.md
@@ -32,6 +32,15 @@ The `ipcRenderer` module has the following method to listen for events and send
 Listens to `channel`, when a new message arrives `listener` would be called with
 `listener(event, args...)`.
 
+### `ipcRenderer.off(channel, listener)`
+
+* `channel` string
+* `listener` Function
+  * `event` [IpcRendererEvent][ipc-renderer-event]
+  * `...args` any[]
+
+Alias for [`ipcRenderer.removeListener`](#ipcrendererremovelistenerchannel-listener).
+
 ### `ipcRenderer.once(channel, listener)`
 
 * `channel` string
@@ -42,10 +51,20 @@ Listens to `channel`, when a new message arrives `listener` would be called with
 Adds a one time `listener` function for the event. This `listener` is invoked
 only the next time a message is sent to `channel`, after which it is removed.
 
+### `ipcRenderer.addListener(channel, listener)`
+
+* `channel` string
+* `listener` Function
+  * `event` [IpcRendererEvent][ipc-renderer-event]
+  * `...args` any[]
+
+Alias for [`ipcRenderer.on`](#ipcrendereronchannel-listener).
+
 ### `ipcRenderer.removeListener(channel, listener)`
 
 * `channel` string
 * `listener` Function
+  * `event` [IpcRendererEvent][ipc-renderer-event]
   * `...args` any[]
 
 Removes the specified `listener` from the listener array for the specified
@@ -192,14 +211,6 @@ ipcMain.on('port', (e, msg) => {
 For more information on using `MessagePort` and `MessageChannel`, see the [MDN
 documentation](https://developer.mozilla.org/en-US/docs/Web/API/MessageChannel).
 
-### `ipcRenderer.sendTo(webContentsId, channel, ...args)` _Deprecated_
-
-* `webContentsId` number
-* `channel` string
-* `...args` any[]
-
-Sends a message to a window with `webContentsId` via `channel`.
-
 ### `ipcRenderer.sendToHost(channel, ...args)`
 
 * `channel` string
diff --git a/docs/latest/api/screen.md b/docs/latest/api/screen.md
index c24022a4b..fa925d8e4 100644
--- a/docs/latest/api/screen.md
+++ b/docs/latest/api/screen.md
@@ -27,14 +27,11 @@ An example of creating a window that fills the whole screen:
 // For more info, see:
 // https://www.electronjs.org/docs/latest/api/screen
 
-const { app, BrowserWindow } = require('electron')
+const { app, BrowserWindow, screen } = require('electron/main')
 
 let mainWindow = null
 
 app.whenReady().then(() => {
-  // We cannot require the screen module until the app is ready.
-  const { screen } = require('electron')
-
   // Create a window that fills the screen's available work area.
   const primaryDisplay = screen.getPrimaryDisplay()
   const { width, height } = primaryDisplay.workAreaSize
diff --git a/docs/latest/api/session.md b/docs/latest/api/session.md
index 6b7b64d74..dcbdd7ce1 100644
--- a/docs/latest/api/session.md
+++ b/docs/latest/api/session.md
@@ -1058,7 +1058,7 @@ To clear the handler, call `setDevicePermissionHandler(null)`.
 This handler can be used to provide default permissioning to devices without first calling for permission
 to devices (eg via `navigator.hid.requestDevice`).  If this handler is not defined, the default device
 permissions as granted through device selection (eg via `navigator.hid.requestDevice`) will be used.
-Additionally, the default behavior of Electron is to store granted device permision in memory.
+Additionally, the default behavior of Electron is to store granted device permission in memory.
 If longer term storage is needed, a developer can store granted device
 permissions (eg when handling the `select-hid-device` event) and then read from that storage with `setDevicePermissionHandler`.
 
diff --git a/docs/latest/api/structures/browser-window-options.md b/docs/latest/api/structures/browser-window-options.md
index 089c2ff7e..4ebe782e6 100644
--- a/docs/latest/api/structures/browser-window-options.md
+++ b/docs/latest/api/structures/browser-window-options.md
@@ -104,9 +104,6 @@ hide_title: false
 * `roundedCorners` boolean (optional) _macOS_ - Whether frameless window
   should have rounded corners on macOS. Default is `true`. Setting this property
   to `false` will prevent the window from being fullscreenable.
-* `fullscreenWindowTitle` boolean (optional) _macOS_ _Deprecated_ - Shows
-  the title in the title bar in full screen mode on macOS for `hiddenInset`
-  titleBarStyle. Default is `false`.
 * `thickFrame` boolean (optional) - Use `WS_THICKFRAME` style for frameless windows on
   Windows, which adds standard window frame. Setting it to `false` will remove
   window shadow and window animations. Default is `true`.
@@ -203,7 +200,11 @@ hide_title: false
   * `defaultEncoding` string (optional) - Defaults to `ISO-8859-1`.
   * `backgroundThrottling` boolean (optional) - Whether to throttle animations and timers
     when the page becomes background. This also affects the
-    [Page Visibility API](latest/api/browser-window.md#page-visibility). Defaults to `true`.
+    [Page Visibility API](latest/api/browser-window.md#page-visibility). When at least one
+    [webContents](latest/api/web-contents.md) displayed in a single
+    [browserWindow](latest/api/browser-window.md) has disabled `backgroundThrottling` then
+    frames will be drawn and swapped for the whole window and other
+    [webContents](latest/api/web-contents.md) displayed by it. Defaults to `true`.
   * `offscreen` boolean (optional) - Whether to enable offscreen rendering for the browser
     window. Defaults to `false`. See the
     [offscreen rendering tutorial](latest/tutorial/offscreen-rendering.md) for
diff --git a/docs/latest/api/structures/display.md b/docs/latest/api/structures/display.md
index 558a0a184..960e52482 100644
--- a/docs/latest/api/structures/display.md
+++ b/docs/latest/api/structures/display.md
@@ -7,23 +7,26 @@ hide_title: false
 
 # Display Object
 
-* `id` number - Unique identifier associated with the display.
+* `accelerometerSupport` string - Can be `available`, `unavailable`, `unknown`.
+* `bounds` [Rectangle](latest/api/structures/rectangle.md) - the bounds of the display in DIP points.
+* `colorDepth` number - The number of bits per pixel.
+* `colorSpace` string -  represent a color space (three-dimensional object which contains all realizable color combinations) for the purpose of color conversions.
+* `depthPerComponent` number - The number of bits per color component.
+* `detected` boolean - `true`` if the display is detected by the system.
+* `displayFrequency` number - The display refresh rate.
+* `id` number - Unique identifier associated with the display. A value of of -1 means the display is invalid or the correct `id` is not yet known, and a value of -10 means the display is a virtual display assigned to a unified desktop.
+* `internal` boolean - `true` for an internal display and `false` for an external display.
 * `label` string - User-friendly label, determined by the platform.
+* `maximumCursorSize` [Size](latest/api/structures/size.md) - Maximum cursor size in native pixels.
+* `nativeOrigin` [Point](latest/api/structures/point.md) - Returns the display's origin in pixel coordinates. Only available on windowing systems like X11 that position displays in pixel coordinates.
 * `rotation` number - Can be 0, 90, 180, 270, represents screen rotation in
   clock-wise degrees.
 * `scaleFactor` number - Output device's pixel scale factor.
 * `touchSupport` string - Can be `available`, `unavailable`, `unknown`.
 * `monochrome` boolean - Whether or not the display is a monochrome display.
-* `accelerometerSupport` string - Can be `available`, `unavailable`, `unknown`.
-* `colorSpace` string -  represent a color space (three-dimensional object which contains all realizable color combinations) for the purpose of color conversions
-* `colorDepth` number - The number of bits per pixel.
-* `depthPerComponent` number - The number of bits per color component.
-* `displayFrequency` number - The display refresh rate.
-* `bounds` [Rectangle](latest/api/structures/rectangle.md) - the bounds of the display in DIP points.
 * `size` [Size](latest/api/structures/size.md)
 * `workArea` [Rectangle](latest/api/structures/rectangle.md) - the work area of the display in DIP points.
-* `workAreaSize` [Size](latest/api/structures/size.md)
-* `internal` boolean - `true` for an internal display and `false` for an external display
+* `workAreaSize` [Size](latest/api/structures/size.md) - The size of the work area.
 
 The `Display` object represents a physical display connected to the system. A
 fake `Display` may exist on a headless system, or a `Display` may correspond to
diff --git a/docs/latest/api/structures/ipc-renderer-event.md b/docs/latest/api/structures/ipc-renderer-event.md
index 24b042024..9974f0e96 100644
--- a/docs/latest/api/structures/ipc-renderer-event.md
+++ b/docs/latest/api/structures/ipc-renderer-event.md
@@ -8,9 +8,6 @@ hide_title: false
 # IpcRendererEvent Object extends `Event`
 
 * `sender` [IpcRenderer](latest/api/ipc-renderer.md) - The `IpcRenderer` instance that emitted the event originally
-* `senderId` Integer _Deprecated_ - The `webContents.id` that sent the message, you can call `event.sender.sendTo(event.senderId, ...)` to reply to the message, see [ipcRenderer.sendTo][ipc-renderer-sendto] for more information. This only applies to messages sent from a different renderer. Messages sent directly from the main process set `event.senderId` to `0`.
-* `senderIsMainFrame` boolean (optional) _Deprecated_ - Whether the message sent via [ipcRenderer.sendTo][ipc-renderer-sendto] was sent by the main frame. This is relevant when `nodeIntegrationInSubFrames` is enabled in the originating `webContents`.
 * `ports` [MessagePort][][] - A list of MessagePorts that were transferred with this message
 
-[ipc-renderer-sendto]: latest/api/ipc-renderer.md#ipcrenderersendtowebcontentsid-channel-args-deprecated
 [MessagePort]: https://developer.mozilla.org/en-US/docs/Web/API/MessagePort
diff --git a/docs/latest/api/structures/web-preferences.md b/docs/latest/api/structures/web-preferences.md
index e0477f20f..3e7e12421 100644
--- a/docs/latest/api/structures/web-preferences.md
+++ b/docs/latest/api/structures/web-preferences.md
@@ -81,7 +81,11 @@ hide_title: false
 * `defaultEncoding` string (optional) - Defaults to `ISO-8859-1`.
 * `backgroundThrottling` boolean (optional) - Whether to throttle animations and timers
   when the page becomes background. This also affects the
-  [Page Visibility API](latest/api/browser-window.md#page-visibility). Defaults to `true`.
+  [Page Visibility API](latest/api/browser-window.md#page-visibility). When at least one
+  [webContents](latest/api/web-contents.md) displayed in a single
+  [browserWindow](latest/api/browser-window.md) has disabled `backgroundThrottling` then
+  frames will be drawn and swapped for the whole window and other
+  [webContents](latest/api/web-contents.md) displayed by it. Defaults to `true`.
 * `offscreen` boolean (optional) - Whether to enable offscreen rendering for the browser
   window. Defaults to `false`. See the
   [offscreen rendering tutorial](latest/tutorial/offscreen-rendering.md) for
diff --git a/docs/latest/api/system-preferences.md b/docs/latest/api/system-preferences.md
index e8eb629fd..f791d28f3 100644
--- a/docs/latest/api/system-preferences.md
+++ b/docs/latest/api/system-preferences.md
@@ -313,7 +313,7 @@ This API is only available on macOS 10.14 Mojave or newer.
     * `window-background` - The background of a window.
     * `window-frame-text` - The text in the window's titlebar area.
 
-Returns `string` - The system color setting in RGB hexadecimal form (`#ABCDEF`).
+Returns `string` - The system color setting in RGBA hexadecimal form (`#RRGGBBAA`).
 See the [Windows docs][windows-colors] and the [macOS docs][macos-colors] for more details.
 
 The following colors are only available on macOS 10.14: `find-highlight`, `selected-content-background`, `separator`, `unemphasized-selected-content-background`, `unemphasized-selected-text-background`, and `unemphasized-selected-text`.
diff --git a/docs/latest/api/tray.md b/docs/latest/api/tray.md
index 2ad505b1d..850f7289d 100644
--- a/docs/latest/api/tray.md
+++ b/docs/latest/api/tray.md
@@ -118,6 +118,15 @@ Returns:
 
 Emitted when the tray icon is double clicked.
 
+#### Event: 'middle-click' _Windows_
+
+Returns:
+
+* `event` [KeyboardEvent](latest/api/structures/keyboard-event.md)
+* `bounds` [Rectangle](latest/api/structures/rectangle.md) - The bounds of tray icon.
+
+Emitted when the tray icon is middle clicked.
+
 #### Event: 'balloon-show' _Windows_
 
 Emitted when the tray balloon shows.
@@ -185,7 +194,7 @@ Returns:
 
 Emitted when the mouse clicks the tray icon.
 
-#### Event: 'mouse-enter' _macOS_
+#### Event: 'mouse-enter' _macOS_ _Windows_
 
 Returns:
 
@@ -194,7 +203,7 @@ Returns:
 
 Emitted when the mouse enters the tray icon.
 
-#### Event: 'mouse-leave' _macOS_
+#### Event: 'mouse-leave' _macOS_ _Windows_
 
 Returns:
 
diff --git a/docs/latest/api/utility-process.md b/docs/latest/api/utility-process.md
index 803397c2d..a743560f3 100644
--- a/docs/latest/api/utility-process.md
+++ b/docs/latest/api/utility-process.md
@@ -35,7 +35,8 @@ Process: [Main](latest/glossary.md#main-process)<br />
     * `ignore`: equivalent to \['ignore', 'ignore', 'ignore']
     * `inherit`: equivalent to \['ignore', 'inherit', 'inherit']
   * `serviceName` string (optional) - Name of the process that will appear in `name` property of
-    [`child-process-gone` event of `app`](latest/api/app.md#event-child-process-gone).
+    [`ProcessMetric`](latest/api/structures/process-metric.md) returned by [`app.getAppMetrics`](latest/api/app.md#appgetappmetrics)
+    and [`child-process-gone` event of `app`](latest/api/app.md#event-child-process-gone).
     Default is `Node Utility Process`.
   * `allowLoadingUnsignedLibraries` boolean (optional) _macOS_ - With this flag, the utility process will be
     launched via the `Electron Helper (Plugin).app` helper executable on macOS, which can be
diff --git a/docs/latest/api/web-contents.md b/docs/latest/api/web-contents.md
index 7def53c2d..5b92a746c 100644
--- a/docs/latest/api/web-contents.md
+++ b/docs/latest/api/web-contents.md
@@ -790,9 +790,18 @@ Returns:
     word and spellchecker is enabled.
   * `frameCharset` string - The character encoding of the frame on which the
     menu was invoked.
-  * `inputFieldType` string - If the context menu was invoked on an input
-    field, the type of that field. Possible values include `none`, `plainText`,
-    `password`, `other`.
+  * `formControlType` string - The source that the context menu was invoked on.
+    Possible values include `none`, `button-button`, `field-set`,
+    `input-button`, `input-checkbox`, `input-color`, `input-date`,
+    `input-datetime-local`, `input-email`, `input-file`, `input-hidden`,
+    `input-image`, `input-month`, `input-number`, `input-password`, `input-radio`,
+    `input-range`, `input-reset`, `input-search`, `input-submit`, `input-telephone`,
+    `input-text`, `input-time`, `input-url`, `input-week`, `output`, `reset-button`,
+    `select-list`, `select-list`, `select-multiple`, `select-one`, `submit-button`,
+    and `text-area`,
+  * `inputFieldType` string _Deprecated_ - If the context menu was invoked on an
+    input field, the type of that field. Possible values include `none`,
+    `plainText`, `password`, `other`.
   * `spellcheckEnabled` boolean - If the context is editable, whether or not spellchecking is enabled.
   * `menuSourceType` string - Input source that invoked the context menu.
     Can be `none`, `mouse`, `keyboard`, `touch`, `touchMenu`, `longPress`, `longTap`, `touchHandle`, `stylus`, `adjustSelection`, or `adjustSelectionReset`.
@@ -1625,6 +1634,7 @@ win.webContents.print(options, (success, errorType) => {
   * `headerTemplate` string (optional) - HTML template for the print header. Should be valid HTML markup with following classes used to inject printing values into them: `date` (formatted print date), `title` (document title), `url` (document location), `pageNumber` (current page number) and `totalPages` (total pages in the document). For example, `<span class=title></span>` would generate span containing the title.
   * `footerTemplate` string (optional) - HTML template for the print footer. Should use the same format as the `headerTemplate`.
   * `preferCSSPageSize` boolean (optional) - Whether or not to prefer page size as defined by css. Defaults to false, in which case the content will be scaled to fit the paper size.
+  * `generateTaggedPDF` boolean (optional) _Experimental_ - Whether or not to generate a tagged (accessible) PDF. Defaults to false. As this property is experimental, the generated PDF may not adhere fully to PDF/UA and WCAG standards.
 
 Returns `Promise<Buffer>` - Resolves with the generated PDF data.
 
@@ -2067,6 +2077,24 @@ Setting the WebRTC IP handling policy allows you to control which IPs are
 exposed via WebRTC. See [BrowserLeaks](https://browserleaks.com/webrtc) for
 more details.
 
+#### `contents.getWebRTCUDPPortRange()`
+
+Returns `Object`:
+
+* `min` Integer - The minimum UDP port number that WebRTC should use.
+* `max` Integer - The maximum UDP port number that WebRTC should use.
+
+By default this value is `{ min: 0, max: 0 }` , which would apply no restriction on the udp port range.
+
+#### `contents.setWebRTCUDPPortRange(udpPortRange)`
+
+* `udpPortRange` Object
+  * `min` Integer - The minimum UDP port number that WebRTC should use.
+  * `max` Integer - The maximum UDP port number that WebRTC should use.
+
+Setting the WebRTC UDP Port Range allows you to restrict the udp port range used by WebRTC. By default the port range is unrestricted.
+**Note:** To reset to an unrestricted port range this value should be set to `{ min: 0, max: 0 }`.
+
 #### `contents.getMediaSourceId(requestWebContents)`
 
 * `requestWebContents` WebContents - Web contents that the id will be registered to.
diff --git a/docs/latest/api/webview-tag.md b/docs/latest/api/webview-tag.md
index 00019b799..6e21e885a 100644
--- a/docs/latest/api/webview-tag.md
+++ b/docs/latest/api/webview-tag.md
@@ -614,6 +614,7 @@ Prints `webview`'s web page. Same as `webContents.print([options])`.
   * `headerTemplate` string (optional) - HTML template for the print header. Should be valid HTML markup with following classes used to inject printing values into them: `date` (formatted print date), `title` (document title), `url` (document location), `pageNumber` (current page number) and `totalPages` (total pages in the document). For example, `<span class=title></span>` would generate span containing the title.
   * `footerTemplate` string (optional) - HTML template for the print footer. Should use the same format as the `headerTemplate`.
   * `preferCSSPageSize` boolean (optional) - Whether or not to prefer page size as defined by css. Defaults to false, in which case the content will be scaled to fit the paper size.
+  * `generateTaggedPDF` boolean (optional) _Experimental_ - Whether or not to generate a tagged (accessible) PDF. Defaults to false. As this property is experimental, the generated PDF may not adhere fully to PDF/UA and WCAG standards.
 
 Returns `Promise<Uint8Array>` - Resolves with the generated PDF data.
 
@@ -1112,9 +1113,18 @@ Returns:
     word and spellchecker is enabled.
   * `frameCharset` string - The character encoding of the frame on which the
     menu was invoked.
-  * `inputFieldType` string - If the context menu was invoked on an input
-    field, the type of that field. Possible values include `none`, `plainText`,
-    `password`, `other`.
+  * `formControlType` string - The source that the context menu was invoked on.
+    Possible values include `none`, `button-button`, `field-set`,
+    `input-button`, `input-checkbox`, `input-color`, `input-date`,
+    `input-datetime-local`, `input-email`, `input-file`, `input-hidden`,
+    `input-image`, `input-month`, `input-number`, `input-password`, `input-radio`,
+    `input-range`, `input-reset`, `input-search`, `input-submit`, `input-telephone`,
+    `input-text`, `input-time`, `input-url`, `input-week`, `output`, `reset-button`,
+    `select-list`, `select-list`, `select-multiple`, `select-one`, `submit-button`,
+    and `text-area`,
+  * `inputFieldType` string _Deprecated_ - If the context menu was invoked on an
+    input field, the type of that field. Possible values include `none`,
+    `plainText`, `password`, `other`.
   * `spellcheckEnabled` boolean - If the context is editable, whether or not spellchecking is enabled.
   * `menuSourceType` string - Input source that invoked the context menu.
     Can be `none`, `mouse`, `keyboard`, `touch`, `touchMenu`, `longPress`, `longTap`, `touchHandle`, `stylus`, `adjustSelection`, or `adjustSelectionReset`.
diff --git a/docs/latest/breaking-changes.md b/docs/latest/breaking-changes.md
index 2b35ea89e..eb8609d39 100644
--- a/docs/latest/breaking-changes.md
+++ b/docs/latest/breaking-changes.md
@@ -19,6 +19,116 @@ This document uses the following convention to categorize breaking changes:
 * **Deprecated:** An API was marked as deprecated. The API will continue to function, but will emit a deprecation warning, and will be removed in a future release.
 * **Removed:** An API or feature was removed, and is no longer supported by Electron.
 
+## Planned Breaking API Changes (28.0)
+
+### Behavior Changed: `WebContents.backgroundThrottling` set to false affects all `WebContents` in the host `BrowserWindow`
+
+`WebContents.backgroundThrottling` set to false will disable frames throttling
+in the `BrowserWindow` for all `WebContents` displayed by it.
+
+### Removed: `BrowserWindow.setTrafficLightPosition(position)`
+
+`BrowserWindow.setTrafficLightPosition(position)` has been removed, the
+`BrowserWindow.setWindowButtonPosition(position)` API should be used instead
+which accepts `null` instead of `{ x: 0, y: 0 }` to reset the position to
+system default.
+
+```js
+// Removed in Electron 28
+win.setTrafficLightPosition({ x: 10, y: 10 })
+win.setTrafficLightPosition({ x: 0, y: 0 })
+
+// Replace with
+win.setWindowButtonPosition({ x: 10, y: 10 })
+win.setWindowButtonPosition(null)
+```
+
+### Removed: `BrowserWindow.getTrafficLightPosition()`
+
+`BrowserWindow.getTrafficLightPosition()` has been removed, the
+`BrowserWindow.getWindowButtonPosition()` API should be used instead
+which returns `null` instead of `{ x: 0, y: 0 }` when there is no custom
+position.
+
+```js
+// Removed in Electron 28
+const pos = win.getTrafficLightPosition()
+if (pos.x === 0 && pos.y === 0) {
+  // No custom position.
+}
+
+// Replace with
+const ret = win.getWindowButtonPosition()
+if (ret === null) {
+  // No custom position.
+}
+```
+
+### Removed: `ipcRenderer.sendTo()`
+
+The `ipcRenderer.sendTo()` API has been removed. It should be replaced by setting up a [`MessageChannel`](latest/tutorial/message-ports.md#setting-up-a-messagechannel-between-two-renderers) between the renderers.
+
+The `senderId` and `senderIsMainFrame` properties of `IpcRendererEvent` have been removed as well.
+
+### Removed: `app.runningUnderRosettaTranslation`
+
+The `app.runningUnderRosettaTranslation` property has been removed.
+Use `app.runningUnderARM64Translation` instead.
+
+```js
+// Removed
+console.log(app.runningUnderRosettaTranslation)
+// Replace with
+console.log(app.runningUnderARM64Translation)
+```
+
+### Deprecated: `renderer-process-crashed` event on `app`
+
+The `renderer-process-crashed` event on `app` has been deprecated.
+Use the new `render-process-gone` event instead.
+
+```js
+// Deprecated
+app.on('renderer-process-crashed', (event, webContents, killed) => { /* ... */ })
+
+// Replace with
+app.on('render-process-gone', (event, webContents, details) => { /* ... */ })
+```
+
+### Deprecated: `params.inputFormType` property on `context-menu` on `WebContents`
+
+The `inputFormType` property of the params object in the `context-menu`
+event from `WebContents` has been deprecated. Use the new `formControlType`
+property instead.
+
+### Deprecated: `crashed` event on `WebContents` and `<webview>`
+
+The `crashed` events on `WebContents` and `<webview>` have been deprecated.
+Use the new `render-process-gone` event instead.
+
+```js
+// Deprecated
+win.webContents.on('crashed', (event, killed) => { /* ... */ })
+webview.addEventListener('crashed', (event) => { /* ... */ })
+
+// Replace with
+win.webContents.on('render-process-gone', (event, details) => { /* ... */ })
+webview.addEventListener('render-process-gone', (event) => { /* ... */ })
+```
+
+### Deprecated: `gpu-process-crashed` event on `app`
+
+The `gpu-process-crashed` event on `app` has been deprecated.
+Use the new `child-process-gone` event instead.
+
+```js
+// Deprecated
+app.on('gpu-process-crashed', (event, killed) => { /* ... */ })
+
+// Replace with
+app.on('child-process-gone', (event, details) => { /* ... */ })
+```
+
 ## Planned Breaking API Changes (27.0)
 
 ### Removed: macOS 10.13 / 10.14 support
diff --git a/docs/latest/development/build-instructions-gn.md b/docs/latest/development/build-instructions-gn.md
index 77bb3441e..a89da425d 100644
--- a/docs/latest/development/build-instructions-gn.md
+++ b/docs/latest/development/build-instructions-gn.md
@@ -232,7 +232,7 @@ generate build headers for the modules to compile against, run the following
 under `src/` directory.
 
 ```sh
-$ ninja -C out/Testing third_party/electron_node:headers
+$ ninja -C out/Testing electron:node_headers
 ```
 
 You can now [run the tests](latest/development/testing.md#unit-tests).
diff --git a/docs/latest/development/testing.md b/docs/latest/development/testing.md
index f5f9101a1..184a9a7cb 100644
--- a/docs/latest/development/testing.md
+++ b/docs/latest/development/testing.md
@@ -73,7 +73,7 @@ the Node.js source tree.
 2. Node headers have to be compiled for your configuration.
 
    ```powershell
-   ninja -C out\Testing third_party\electron_node:headers
+   ninja -C out\Testing electron:node_headers
    ```
 
 3. The electron.lib has to be copied as node.lib.
diff --git a/docs/latest/fiddles/features/dark-mode/main.js b/docs/latest/fiddles/features/dark-mode/main.js
index f28419afd..00a343c8a 100644
--- a/docs/latest/fiddles/features/dark-mode/main.js
+++ b/docs/latest/fiddles/features/dark-mode/main.js
@@ -1,4 +1,4 @@
-const { app, BrowserWindow, ipcMain, nativeTheme } = require('electron')
+const { app, BrowserWindow, ipcMain, nativeTheme } = require('electron/main')
 const path = require('node:path')
 
 function createWindow () {
diff --git a/docs/latest/fiddles/features/dark-mode/preload.js b/docs/latest/fiddles/features/dark-mode/preload.js
index 3def9e06e..752d9d71a 100644
--- a/docs/latest/fiddles/features/dark-mode/preload.js
+++ b/docs/latest/fiddles/features/dark-mode/preload.js
@@ -1,4 +1,4 @@
-const { contextBridge, ipcRenderer } = require('electron')
+const { contextBridge, ipcRenderer } = require('electron/renderer')
 
 contextBridge.exposeInMainWorld('darkMode', {
   toggle: () => ipcRenderer.invoke('dark-mode:toggle'),
diff --git a/docs/latest/fiddles/features/drag-and-drop/main.js b/docs/latest/fiddles/features/drag-and-drop/main.js
index 9ee443196..0cf045a7c 100644
--- a/docs/latest/fiddles/features/drag-and-drop/main.js
+++ b/docs/latest/fiddles/features/drag-and-drop/main.js
@@ -1,4 +1,4 @@
-const { app, BrowserWindow, ipcMain } = require('electron')
+const { app, BrowserWindow, ipcMain } = require('electron/main')
 const path = require('node:path')
 const fs = require('node:fs')
 const https = require('node:https')
diff --git a/docs/latest/fiddles/features/drag-and-drop/preload.js b/docs/latest/fiddles/features/drag-and-drop/preload.js
index 7e698ebb5..3c02ab61c 100644
--- a/docs/latest/fiddles/features/drag-and-drop/preload.js
+++ b/docs/latest/fiddles/features/drag-and-drop/preload.js
@@ -1,7 +1,5 @@
-const { contextBridge, ipcRenderer } = require('electron')
+const { contextBridge, ipcRenderer } = require('electron/renderer')
 
 contextBridge.exposeInMainWorld('electron', {
-  startDrag: (fileName) => {
-    ipcRenderer.send('ondragstart', fileName)
-  }
+  startDrag: (fileName) => ipcRenderer.send('ondragstart', fileName)
 })
diff --git a/docs/latest/fiddles/features/keyboard-shortcuts/global/main.js b/docs/latest/fiddles/features/keyboard-shortcuts/global/main.js
index 8b43433a4..991c70d25 100644
--- a/docs/latest/fiddles/features/keyboard-shortcuts/global/main.js
+++ b/docs/latest/fiddles/features/keyboard-shortcuts/global/main.js
@@ -1,4 +1,4 @@
-const { app, BrowserWindow, globalShortcut } = require('electron')
+const { app, BrowserWindow, globalShortcut } = require('electron/main')
 
 function createWindow () {
   const win = new BrowserWindow({
diff --git a/docs/latest/fiddles/features/keyboard-shortcuts/interception-from-main/main.js b/docs/latest/fiddles/features/keyboard-shortcuts/interception-from-main/main.js
index 80e4012c8..62df976ea 100644
--- a/docs/latest/fiddles/features/keyboard-shortcuts/interception-from-main/main.js
+++ b/docs/latest/fiddles/features/keyboard-shortcuts/interception-from-main/main.js
@@ -1,4 +1,4 @@
-const { app, BrowserWindow } = require('electron')
+const { app, BrowserWindow } = require('electron/main')
 
 app.whenReady().then(() => {
   const win = new BrowserWindow({ width: 800, height: 600 })
diff --git a/docs/latest/fiddles/features/keyboard-shortcuts/local/main.js b/docs/latest/fiddles/features/keyboard-shortcuts/local/main.js
index 6abd81b1b..6393f27a2 100644
--- a/docs/latest/fiddles/features/keyboard-shortcuts/local/main.js
+++ b/docs/latest/fiddles/features/keyboard-shortcuts/local/main.js
@@ -1,4 +1,4 @@
-const { app, BrowserWindow, Menu, MenuItem } = require('electron')
+const { app, BrowserWindow, Menu, MenuItem } = require('electron/main')
 
 function createWindow () {
   const win = new BrowserWindow({
diff --git a/docs/latest/fiddles/features/keyboard-shortcuts/web-apis/main.js b/docs/latest/fiddles/features/keyboard-shortcuts/web-apis/main.js
index 7803cd859..cf335b4a8 100644
--- a/docs/latest/fiddles/features/keyboard-shortcuts/web-apis/main.js
+++ b/docs/latest/fiddles/features/keyboard-shortcuts/web-apis/main.js
@@ -1,5 +1,5 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow } = require('electron')
+const { app, BrowserWindow } = require('electron/main')
 
 function createWindow () {
   // Create the browser window.
diff --git a/docs/latest/fiddles/features/macos-dock-menu/main.js b/docs/latest/fiddles/features/macos-dock-menu/main.js
index 7809e5459..5b8b154fe 100644
--- a/docs/latest/fiddles/features/macos-dock-menu/main.js
+++ b/docs/latest/fiddles/features/macos-dock-menu/main.js
@@ -1,4 +1,4 @@
-const { app, BrowserWindow, Menu } = require('electron')
+const { app, BrowserWindow, Menu } = require('electron/main')
 
 function createWindow () {
   const win = new BrowserWindow({
diff --git a/docs/latest/fiddles/features/notifications/main/main.js b/docs/latest/fiddles/features/notifications/main/main.js
index f6e6f867c..b092c9a6e 100644
--- a/docs/latest/fiddles/features/notifications/main/main.js
+++ b/docs/latest/fiddles/features/notifications/main/main.js
@@ -1,4 +1,4 @@
-const { app, BrowserWindow, Notification } = require('electron')
+const { app, BrowserWindow, Notification } = require('electron/main')
 
 function createWindow () {
   const win = new BrowserWindow({
diff --git a/docs/latest/fiddles/features/notifications/renderer/main.js b/docs/latest/fiddles/features/notifications/renderer/main.js
index e24a66dd5..9f26d370c 100644
--- a/docs/latest/fiddles/features/notifications/renderer/main.js
+++ b/docs/latest/fiddles/features/notifications/renderer/main.js
@@ -1,4 +1,4 @@
-const { app, BrowserWindow } = require('electron')
+const { app, BrowserWindow } = require('electron/main')
 
 function createWindow () {
   const win = new BrowserWindow({
diff --git a/docs/latest/fiddles/features/offscreen-rendering/main.js b/docs/latest/fiddles/features/offscreen-rendering/main.js
index daf4306b8..6c64afb10 100644
--- a/docs/latest/fiddles/features/offscreen-rendering/main.js
+++ b/docs/latest/fiddles/features/offscreen-rendering/main.js
@@ -1,4 +1,4 @@
-const { app, BrowserWindow } = require('electron')
+const { app, BrowserWindow } = require('electron/main')
 const fs = require('node:fs')
 const path = require('node:path')
 
diff --git a/docs/latest/fiddles/features/online-detection/main.js b/docs/latest/fiddles/features/online-detection/main.js
index 7bc42d772..4e9a092cb 100644
--- a/docs/latest/fiddles/features/online-detection/main.js
+++ b/docs/latest/fiddles/features/online-detection/main.js
@@ -1,4 +1,4 @@
-const { app, BrowserWindow } = require('electron')
+const { app, BrowserWindow } = require('electron/main')
 
 function createWindow () {
   const onlineStatusWindow = new BrowserWindow({
diff --git a/docs/latest/fiddles/features/progress-bar/main.js b/docs/latest/fiddles/features/progress-bar/main.js
index c40063835..4bcc1f553 100644
--- a/docs/latest/fiddles/features/progress-bar/main.js
+++ b/docs/latest/fiddles/features/progress-bar/main.js
@@ -1,4 +1,4 @@
-const { app, BrowserWindow } = require('electron')
+const { app, BrowserWindow } = require('electron/main')
 
 let progressInterval
 
diff --git a/docs/latest/fiddles/features/recent-documents/main.js b/docs/latest/fiddles/features/recent-documents/main.js
index 628f01f0e..c4a399a78 100644
--- a/docs/latest/fiddles/features/recent-documents/main.js
+++ b/docs/latest/fiddles/features/recent-documents/main.js
@@ -1,4 +1,4 @@
-const { app, BrowserWindow } = require('electron')
+const { app, BrowserWindow } = require('electron/main')
 const fs = require('node:fs')
 const path = require('node:path')
 
diff --git a/docs/latest/fiddles/features/represented-file/main.js b/docs/latest/fiddles/features/represented-file/main.js
index 0ff0a6be3..6898a110f 100644
--- a/docs/latest/fiddles/features/represented-file/main.js
+++ b/docs/latest/fiddles/features/represented-file/main.js
@@ -1,4 +1,4 @@
-const { app, BrowserWindow } = require('electron')
+const { app, BrowserWindow } = require('electron/main')
 const os = require('node:os')
 
 function createWindow () {
diff --git a/docs/latest/fiddles/features/web-bluetooth/main.js b/docs/latest/fiddles/features/web-bluetooth/main.js
index 0821de287..103c9891b 100644
--- a/docs/latest/fiddles/features/web-bluetooth/main.js
+++ b/docs/latest/fiddles/features/web-bluetooth/main.js
@@ -1,4 +1,4 @@
-const { app, BrowserWindow, ipcMain } = require('electron')
+const { app, BrowserWindow, ipcMain } = require('electron/main')
 const path = require('node:path')
 
 let bluetoothPinCallback
diff --git a/docs/latest/fiddles/features/web-bluetooth/preload.js b/docs/latest/fiddles/features/web-bluetooth/preload.js
index d10666b7e..1b1c63672 100644
--- a/docs/latest/fiddles/features/web-bluetooth/preload.js
+++ b/docs/latest/fiddles/features/web-bluetooth/preload.js
@@ -1,7 +1,7 @@
-const { contextBridge, ipcRenderer } = require('electron')
+const { contextBridge, ipcRenderer } = require('electron/renderer')
 
 contextBridge.exposeInMainWorld('electronAPI', {
-  cancelBluetoothRequest: (callback) => ipcRenderer.send('cancel-bluetooth-request', callback),
-  bluetoothPairingRequest: (callback) => ipcRenderer.on('bluetooth-pairing-request', callback),
+  cancelBluetoothRequest: () => ipcRenderer.send('cancel-bluetooth-request'),
+  bluetoothPairingRequest: (callback) => ipcRenderer.on('bluetooth-pairing-request', () => callback()),
   bluetoothPairingResponse: (response) => ipcRenderer.send('bluetooth-pairing-response', response)
 })
diff --git a/docs/latest/fiddles/features/web-hid/main.js b/docs/latest/fiddles/features/web-hid/main.js
index b5dcb5aea..315c39da3 100644
--- a/docs/latest/fiddles/features/web-hid/main.js
+++ b/docs/latest/fiddles/features/web-hid/main.js
@@ -1,4 +1,4 @@
-const { app, BrowserWindow } = require('electron')
+const { app, BrowserWindow } = require('electron/main')
 
 function createWindow () {
   const mainWindow = new BrowserWindow({
diff --git a/docs/latest/fiddles/features/web-hid/renderer.js b/docs/latest/fiddles/features/web-hid/renderer.js
index cbb00ab08..133beb520 100644
--- a/docs/latest/fiddles/features/web-hid/renderer.js
+++ b/docs/latest/fiddles/features/web-hid/renderer.js
@@ -1,19 +1,10 @@
-async function testIt () {
-  const grantedDevices = await navigator.hid.getDevices()
-  let grantedDeviceList = ''
-  grantedDevices.forEach(device => {
-    grantedDeviceList += `<hr>${device.productName}</hr>`
-  })
-  document.getElementById('granted-devices').innerHTML = grantedDeviceList
-  const grantedDevices2 = await navigator.hid.requestDevice({
-    filters: []
-  })
+function formatDevices (devices) {
+  return devices.map(device => device.productName).join('<hr>')
+}
 
-  grantedDeviceList = ''
-  grantedDevices2.forEach(device => {
-    grantedDeviceList += `<hr>${device.productName}</hr>`
-  })
-  document.getElementById('granted-devices2').innerHTML = grantedDeviceList
+async function testIt () {
+  document.getElementById('granted-devices').innerHTML = formatDevices(await navigator.hid.getDevices())
+  document.getElementById('granted-devices2').innerHTML = formatDevices(await navigator.hid.requestDevice({ filters: [] }))
 }
 
 document.getElementById('clickme').addEventListener('click', testIt)
diff --git a/docs/latest/fiddles/features/web-serial/main.js b/docs/latest/fiddles/features/web-serial/main.js
index c894fc2e2..1839f4f42 100644
--- a/docs/latest/fiddles/features/web-serial/main.js
+++ b/docs/latest/fiddles/features/web-serial/main.js
@@ -1,4 +1,4 @@
-const { app, BrowserWindow } = require('electron')
+const { app, BrowserWindow } = require('electron/main')
 
 function createWindow () {
   const mainWindow = new BrowserWindow({
diff --git a/docs/latest/fiddles/features/web-usb/main.js b/docs/latest/fiddles/features/web-usb/main.js
index 4ebe41e36..a60de9182 100644
--- a/docs/latest/fiddles/features/web-usb/main.js
+++ b/docs/latest/fiddles/features/web-usb/main.js
@@ -1,4 +1,4 @@
-const { app, BrowserWindow } = require('electron')
+const { app, BrowserWindow } = require('electron/main')
 
 function createWindow () {
   const mainWindow = new BrowserWindow({
diff --git a/docs/latest/fiddles/features/web-usb/renderer.js b/docs/latest/fiddles/features/web-usb/renderer.js
index cf20c24cc..1c217d957 100644
--- a/docs/latest/fiddles/features/web-usb/renderer.js
+++ b/docs/latest/fiddles/features/web-usb/renderer.js
@@ -7,9 +7,9 @@ async function testIt () {
   const grantedDevices = await navigator.usb.getDevices()
   let grantedDeviceList = ''
   if (grantedDevices.length > 0) {
-    grantedDevices.forEach(device => {
+    for (const device of grantedDevices) {
       grantedDeviceList += `<hr>${getDeviceDetails(device)}</hr>`
-    })
+    }
   } else {
     grantedDeviceList = noDevicesFoundMsg
   }
diff --git a/docs/latest/fiddles/ipc/pattern-1/main.js b/docs/latest/fiddles/ipc/pattern-1/main.js
index c43937eda..43799d4cb 100644
--- a/docs/latest/fiddles/ipc/pattern-1/main.js
+++ b/docs/latest/fiddles/ipc/pattern-1/main.js
@@ -1,4 +1,4 @@
-const { app, BrowserWindow, ipcMain } = require('electron')
+const { app, BrowserWindow, ipcMain } = require('electron/main')
 const path = require('node:path')
 
 function createWindow () {
diff --git a/docs/latest/fiddles/ipc/pattern-1/preload.js b/docs/latest/fiddles/ipc/pattern-1/preload.js
index 50b3f3d4b..ce2368824 100644
--- a/docs/latest/fiddles/ipc/pattern-1/preload.js
+++ b/docs/latest/fiddles/ipc/pattern-1/preload.js
@@ -1,4 +1,4 @@
-const { contextBridge, ipcRenderer } = require('electron')
+const { contextBridge, ipcRenderer } = require('electron/renderer')
 
 contextBridge.exposeInMainWorld('electronAPI', {
   setTitle: (title) => ipcRenderer.send('set-title', title)
diff --git a/docs/latest/fiddles/ipc/pattern-2/main.js b/docs/latest/fiddles/ipc/pattern-2/main.js
index 187a6d83b..369ddf655 100644
--- a/docs/latest/fiddles/ipc/pattern-2/main.js
+++ b/docs/latest/fiddles/ipc/pattern-2/main.js
@@ -1,4 +1,4 @@
-const { app, BrowserWindow, ipcMain, dialog } = require('electron')
+const { app, BrowserWindow, ipcMain, dialog } = require('electron/main')
 const path = require('node:path')
 
 async function handleFileOpen () {
diff --git a/docs/latest/fiddles/ipc/pattern-2/preload.js b/docs/latest/fiddles/ipc/pattern-2/preload.js
index 5f2f6e220..32f4acd9d 100644
--- a/docs/latest/fiddles/ipc/pattern-2/preload.js
+++ b/docs/latest/fiddles/ipc/pattern-2/preload.js
@@ -1,4 +1,4 @@
-const { contextBridge, ipcRenderer } = require('electron')
+const { contextBridge, ipcRenderer } = require('electron/renderer')
 
 contextBridge.exposeInMainWorld('electronAPI', {
   openFile: () => ipcRenderer.invoke('dialog:openFile')
diff --git a/docs/latest/fiddles/ipc/pattern-3/main.js b/docs/latest/fiddles/ipc/pattern-3/main.js
index 91c0c1a64..60e08ba80 100644
--- a/docs/latest/fiddles/ipc/pattern-3/main.js
+++ b/docs/latest/fiddles/ipc/pattern-3/main.js
@@ -1,4 +1,4 @@
-const { app, BrowserWindow, Menu, ipcMain } = require('electron')
+const { app, BrowserWindow, Menu, ipcMain } = require('electron/main')
 const path = require('node:path')
 
 function createWindow () {
diff --git a/docs/latest/fiddles/ipc/pattern-3/preload.js b/docs/latest/fiddles/ipc/pattern-3/preload.js
index ad4dd27f1..b8d275650 100644
--- a/docs/latest/fiddles/ipc/pattern-3/preload.js
+++ b/docs/latest/fiddles/ipc/pattern-3/preload.js
@@ -1,5 +1,6 @@
-const { contextBridge, ipcRenderer } = require('electron')
+const { contextBridge, ipcRenderer } = require('electron/renderer')
 
 contextBridge.exposeInMainWorld('electronAPI', {
-  handleCounter: (callback) => ipcRenderer.on('update-counter', callback)
+  onUpdateCounter: (callback) => ipcRenderer.on('update-counter', (_event, value) => callback(value)),
+  counterValue: (value) => ipcRenderer.send('counter-value', value)
 })
diff --git a/docs/latest/fiddles/ipc/pattern-3/renderer.js b/docs/latest/fiddles/ipc/pattern-3/renderer.js
index d7316a5d8..c1d97a848 100644
--- a/docs/latest/fiddles/ipc/pattern-3/renderer.js
+++ b/docs/latest/fiddles/ipc/pattern-3/renderer.js
@@ -1,8 +1,8 @@
 const counter = document.getElementById('counter')
 
-window.electronAPI.handleCounter((event, value) => {
+window.electronAPI.onUpdateCounter((value) => {
   const oldValue = Number(counter.innerText)
   const newValue = oldValue + value
-  counter.innerText = newValue
-  event.sender.send('counter-value', newValue)
+  counter.innerText = newValue.toString()
+  window.electronAPI.counterValue(newValue)
 })
diff --git a/docs/latest/fiddles/ipc/webview-new-window/main.js b/docs/latest/fiddles/ipc/webview-new-window/main.js
index a76c1434c..8b6aa4188 100644
--- a/docs/latest/fiddles/ipc/webview-new-window/main.js
+++ b/docs/latest/fiddles/ipc/webview-new-window/main.js
@@ -1,5 +1,5 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow } = require('electron')
+const { app, BrowserWindow } = require('electron/main')
 const path = require('node:path')
 
 function createWindow () {
diff --git a/docs/latest/fiddles/ipc/webview-new-window/preload.js b/docs/latest/fiddles/ipc/webview-new-window/preload.js
index 5b5b6e70a..99f3e6bc6 100644
--- a/docs/latest/fiddles/ipc/webview-new-window/preload.js
+++ b/docs/latest/fiddles/ipc/webview-new-window/preload.js
@@ -1,4 +1,4 @@
-const { ipcRenderer } = require('electron')
+const { ipcRenderer } = require('electron/renderer')
 const webview = document.getElementById('webview')
 ipcRenderer.on('webview-new-window', (e, webContentsId, details) => {
   console.log('webview-new-window', webContentsId, details)
diff --git a/docs/latest/fiddles/media/screenshot/take-screenshot/index.html b/docs/latest/fiddles/media/screenshot/take-screenshot/index.html
index 264899abd..ca05880ef 100644
--- a/docs/latest/fiddles/media/screenshot/take-screenshot/index.html
+++ b/docs/latest/fiddles/media/screenshot/take-screenshot/index.html
@@ -17,9 +17,6 @@ <h3>Take a Screenshot</h3>
           <p>Clicking the demo button will take a screenshot of your current screen and open it in your default viewer.</p>
         </div>
     </div>
-    <script>
-      // You can also require other files to run in this process
-      require('./renderer.js')
-    </script>
+    <script src="renderer.js"></script>
   </body>
 </html>
diff --git a/docs/latest/fiddles/media/screenshot/take-screenshot/main.js b/docs/latest/fiddles/media/screenshot/take-screenshot/main.js
index cb09498a0..2ce55cd94 100644
--- a/docs/latest/fiddles/media/screenshot/take-screenshot/main.js
+++ b/docs/latest/fiddles/media/screenshot/take-screenshot/main.js
@@ -1,14 +1,38 @@
-const { BrowserWindow, app, screen, ipcMain, desktopCapturer } = require('electron')
+const { BrowserWindow, app, screen, ipcMain, desktopCapturer, shell } = require('electron/main')
+const fs = require('node:fs').promises
+const os = require('node:os')
+const path = require('node:path')
 
 let mainWindow = null
 
-ipcMain.handle('get-screen-size', () => {
-  return screen.getPrimaryDisplay().workAreaSize
-})
+function determineScreenShotSize (devicePixelRatio) {
+  const screenSize = screen.getPrimaryDisplay().workAreaSize
+  const maxDimension = Math.max(screenSize.width, screenSize.height)
+  return {
+    width: maxDimension * devicePixelRatio,
+    height: maxDimension * devicePixelRatio
+  }
+}
 
-ipcMain.handle('get-sources', (event, options) => {
-  return desktopCapturer.getSources(options)
-})
+async function takeScreenshot (devicePixelRatio) {
+  const thumbSize = determineScreenShotSize(devicePixelRatio)
+  const options = { types: ['screen'], thumbnailSize: thumbSize }
+
+  const sources = await desktopCapturer.getSources(options)
+  for (const source of sources) {
+    const sourceName = source.name.toLowerCase()
+    if (sourceName === 'entire screen' || sourceName === 'screen 1') {
+      const screenshotPath = path.join(os.tmpdir(), 'screenshot.png')
+
+      await fs.writeFile(screenshotPath, source.thumbnail.toPNG())
+      shell.openExternal(`file://${screenshotPath}`)
+
+      return `Saved screenshot to: ${screenshotPath}`
+    }
+  }
+}
+
+ipcMain.handle('take-screenshot', (event, devicePixelRatio) => takeScreenshot(devicePixelRatio))
 
 function createWindow () {
   const windowOptions = {
@@ -16,8 +40,7 @@ function createWindow () {
     height: 300,
     title: 'Take a Screenshot',
     webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true
+      preload: path.join(__dirname, 'preload.js')
     }
   }
 
diff --git a/docs/latest/fiddles/media/screenshot/take-screenshot/preload.js b/docs/latest/fiddles/media/screenshot/take-screenshot/preload.js
new file mode 100644
index 000000000..9af9f2faa
--- /dev/null
+++ b/docs/latest/fiddles/media/screenshot/take-screenshot/preload.js
@@ -0,0 +1,5 @@
+const { contextBridge, ipcRenderer } = require('electron/renderer')
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  takeScreenshot: () => ipcRenderer.invoke('take-screenshot', window.devicePixelRatio)
+})
diff --git a/docs/latest/fiddles/media/screenshot/take-screenshot/renderer.js b/docs/latest/fiddles/media/screenshot/take-screenshot/renderer.js
index fd615325b..6b4329e7d 100644
--- a/docs/latest/fiddles/media/screenshot/take-screenshot/renderer.js
+++ b/docs/latest/fiddles/media/screenshot/take-screenshot/renderer.js
@@ -1,37 +1,7 @@
-const { shell, ipcRenderer } = require('electron')
-
-const fs = require('node:fs').promises
-const os = require('node:os')
-const path = require('node:path')
-
 const screenshot = document.getElementById('screen-shot')
 const screenshotMsg = document.getElementById('screenshot-path')
 
 screenshot.addEventListener('click', async (event) => {
   screenshotMsg.textContent = 'Gathering screens...'
-  const thumbSize = await determineScreenShotSize()
-  const options = { types: ['screen'], thumbnailSize: thumbSize }
-
-  const sources = await ipcRenderer.invoke('get-sources', options)
-  for (const source of sources) {
-    const sourceName = source.name.toLowerCase()
-    if (sourceName === 'entire screen' || sourceName === 'screen 1') {
-      const screenshotPath = path.join(os.tmpdir(), 'screenshot.png')
-
-      await fs.writeFile(screenshotPath, source.thumbnail.toPNG())
-      shell.openExternal(`file://${screenshotPath}`)
-
-      const message = `Saved screenshot to: ${screenshotPath}`
-      screenshotMsg.textContent = message
-    }
-  }
+  screenshotMsg.textContent = await window.electronAPI.takeScreenshot()
 })
-
-async function determineScreenShotSize () {
-  const screenSize = await ipcRenderer.invoke('get-screen-size')
-  const maxDimension = Math.max(screenSize.width, screenSize.height)
-  return {
-    width: maxDimension * window.devicePixelRatio,
-    height: maxDimension * window.devicePixelRatio
-  }
-}
diff --git a/docs/latest/fiddles/menus/customize-menus/index.html b/docs/latest/fiddles/menus/customize-menus/index.html
index 798745c17..1fda8f5ec 100644
--- a/docs/latest/fiddles/menus/customize-menus/index.html
+++ b/docs/latest/fiddles/menus/customize-menus/index.html
@@ -119,10 +119,6 @@ <h2>Create a context menu</h2>
         </div>
       </div>
     </div>
-
-    <script>
-      // You can also require other files to run in this process
-      require("./renderer.js");
-    </script>
+    <script src="renderer.js"></script>
   </body>
 </html>
diff --git a/docs/latest/fiddles/menus/customize-menus/main.js b/docs/latest/fiddles/menus/customize-menus/main.js
index 74a700895..a93293afd 100644
--- a/docs/latest/fiddles/menus/customize-menus/main.js
+++ b/docs/latest/fiddles/menus/customize-menus/main.js
@@ -6,8 +6,10 @@ const {
   ipcMain,
   app,
   shell,
-  dialog
-} = require('electron')
+  dialog,
+  autoUpdater
+} = require('electron/main')
+const path = require('node:path')
 
 const menu = new Menu()
 menu.append(new MenuItem({ label: 'Hello' }))
@@ -66,9 +68,9 @@ const template = [
             // on reload, start fresh and close any old
             // open secondary windows
             if (focusedWindow.id === 1) {
-              BrowserWindow.getAllWindows().forEach(win => {
+              for (const win of BrowserWindow.getAllWindows()) {
                 if (win.id > 1) win.close()
-              })
+              }
             }
             focusedWindow.reload()
           }
@@ -185,7 +187,7 @@ function addUpdateMenuItems (items, position) {
       visible: false,
       key: 'checkForUpdate',
       click: () => {
-        require('electron').autoUpdater.checkForUpdates()
+        autoUpdater.checkForUpdates()
       }
     },
     {
@@ -194,7 +196,7 @@ function addUpdateMenuItems (items, position) {
       visible: false,
       key: 'restartToUpdate',
       click: () => {
-        require('electron').autoUpdater.quitAndInstall()
+        autoUpdater.quitAndInstall()
       }
     }
   ]
@@ -207,15 +209,15 @@ function findReopenMenuItem () {
   if (!menu) return
 
   let reopenMenuItem
-  menu.items.forEach(item => {
+  for (const item of menu.items) {
     if (item.submenu) {
-      item.submenu.items.forEach(item => {
-        if (item.key === 'reopenMenuItem') {
-          reopenMenuItem = item
+      for (const subitem of item.submenu.items) {
+        if (subitem.key === 'reopenMenuItem') {
+          reopenMenuItem = subitem
         }
-      })
+      }
     }
-  })
+  }
   return reopenMenuItem
 }
 
@@ -294,8 +296,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true
+      preload: path.join(__dirname, 'preload.js')
     }
   })
 
diff --git a/docs/latest/fiddles/menus/customize-menus/preload.js b/docs/latest/fiddles/menus/customize-menus/preload.js
new file mode 100644
index 000000000..00bc6be37
--- /dev/null
+++ b/docs/latest/fiddles/menus/customize-menus/preload.js
@@ -0,0 +1,5 @@
+const { contextBridge, ipcRenderer } = require('electron/renderer')
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  showContextMenu: () => ipcRenderer.send('show-context-menu')
+})
diff --git a/docs/latest/fiddles/menus/customize-menus/renderer.js b/docs/latest/fiddles/menus/customize-menus/renderer.js
index 5527e1f20..89ba97dcc 100644
--- a/docs/latest/fiddles/menus/customize-menus/renderer.js
+++ b/docs/latest/fiddles/menus/customize-menus/renderer.js
@@ -1,8 +1,6 @@
-const { ipcRenderer } = require('electron')
-
 // Tell main process to show the menu when demo button is clicked
 const contextMenuBtn = document.getElementById('context-menu')
 
 contextMenuBtn.addEventListener('click', () => {
-  ipcRenderer.send('show-context-menu')
+  window.electronAPI.showContextMenu()
 })
diff --git a/docs/latest/fiddles/menus/shortcuts/main.js b/docs/latest/fiddles/menus/shortcuts/main.js
index ff51f59a9..9207702d4 100644
--- a/docs/latest/fiddles/menus/shortcuts/main.js
+++ b/docs/latest/fiddles/menus/shortcuts/main.js
@@ -1,5 +1,5 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow, globalShortcut, dialog, shell } = require('electron')
+const { app, BrowserWindow, globalShortcut, dialog, shell } = require('electron/main')
 
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
@@ -9,11 +9,7 @@ function createWindow () {
   // Create the browser window.
   mainWindow = new BrowserWindow({
     width: 800,
-    height: 600,
-    webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true
-    }
+    height: 600
   })
 
   globalShortcut.register('CommandOrControl+Alt+K', () => {
diff --git a/docs/latest/fiddles/native-ui/dialogs/error-dialog/index.html b/docs/latest/fiddles/native-ui/dialogs/error-dialog/index.html
index bce7d0db8..8f694ed26 100644
--- a/docs/latest/fiddles/native-ui/dialogs/error-dialog/index.html
+++ b/docs/latest/fiddles/native-ui/dialogs/error-dialog/index.html
@@ -73,9 +73,6 @@ <h5>Main Process</h5>
       </div>
     </div>
 
-    <script>
-      // You can also require other files to run in this process
-      require("./renderer.js");
-    </script>
+    <script src="renderer.js"></script>
   </body>
 </html>
diff --git a/docs/latest/fiddles/native-ui/dialogs/error-dialog/main.js b/docs/latest/fiddles/native-ui/dialogs/error-dialog/main.js
index 1e26daacd..149cf4e0f 100644
--- a/docs/latest/fiddles/native-ui/dialogs/error-dialog/main.js
+++ b/docs/latest/fiddles/native-ui/dialogs/error-dialog/main.js
@@ -1,5 +1,6 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow, ipcMain, dialog, shell } = require('electron')
+const { app, BrowserWindow, ipcMain, dialog, shell } = require('electron/main')
+const path = require('node:path')
 
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
@@ -11,8 +12,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true
+      preload: path.join(__dirname, 'preload.js')
     }
   })
 
diff --git a/docs/latest/fiddles/native-ui/dialogs/error-dialog/preload.js b/docs/latest/fiddles/native-ui/dialogs/error-dialog/preload.js
new file mode 100644
index 000000000..e47c74f61
--- /dev/null
+++ b/docs/latest/fiddles/native-ui/dialogs/error-dialog/preload.js
@@ -0,0 +1,5 @@
+const { contextBridge, ipcRenderer } = require('electron/renderer')
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  openErrorDialog: () => ipcRenderer.send('open-error-dialog')
+})
diff --git a/docs/latest/fiddles/native-ui/dialogs/error-dialog/renderer.js b/docs/latest/fiddles/native-ui/dialogs/error-dialog/renderer.js
index e355e7ee9..20ae84f77 100644
--- a/docs/latest/fiddles/native-ui/dialogs/error-dialog/renderer.js
+++ b/docs/latest/fiddles/native-ui/dialogs/error-dialog/renderer.js
@@ -1,7 +1,5 @@
-const { ipcRenderer } = require('electron')
-
 const errorBtn = document.getElementById('error-dialog')
 
-errorBtn.addEventListener('click', event => {
-  ipcRenderer.send('open-error-dialog')
+errorBtn.addEventListener('click', () => {
+  window.electronAPI.openErrorDialog()
 })
diff --git a/docs/latest/fiddles/native-ui/dialogs/information-dialog/index.html b/docs/latest/fiddles/native-ui/dialogs/information-dialog/index.html
index 4823946cb..8e28f8636 100644
--- a/docs/latest/fiddles/native-ui/dialogs/information-dialog/index.html
+++ b/docs/latest/fiddles/native-ui/dialogs/information-dialog/index.html
@@ -96,9 +96,6 @@ <h5>Main Process</h5>
       </div>
     </div>
 
-    <script>
-      // You can also require other files to run in this process
-      require("./renderer.js");
-    </script>
+    <script src="renderer.js"></script>
   </body>
 </html>
diff --git a/docs/latest/fiddles/native-ui/dialogs/information-dialog/main.js b/docs/latest/fiddles/native-ui/dialogs/information-dialog/main.js
index 187abcfce..bbe460464 100644
--- a/docs/latest/fiddles/native-ui/dialogs/information-dialog/main.js
+++ b/docs/latest/fiddles/native-ui/dialogs/information-dialog/main.js
@@ -1,5 +1,6 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow, ipcMain, dialog, shell } = require('electron')
+const { app, BrowserWindow, ipcMain, dialog, shell } = require('electron/main')
+const path = require('node:path')
 
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
@@ -11,8 +12,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true
+      preload: path.join(__dirname, 'preload.js')
     }
   })
 
@@ -59,16 +59,14 @@ app.on('activate', function () {
   }
 })
 
-ipcMain.on('open-information-dialog', event => {
+ipcMain.handle('open-information-dialog', async () => {
   const options = {
     type: 'info',
     title: 'Information',
     message: "This is an information dialog. Isn't it nice?",
     buttons: ['Yes', 'No']
   }
-  dialog.showMessageBox(options, index => {
-    event.sender.send('information-dialog-selection', index)
-  })
+  return (await dialog.showMessageBox(options)).response
 })
 
 // In this file you can include the rest of your app's specific main process
diff --git a/docs/latest/fiddles/native-ui/dialogs/information-dialog/preload.js b/docs/latest/fiddles/native-ui/dialogs/information-dialog/preload.js
new file mode 100644
index 000000000..5191aacea
--- /dev/null
+++ b/docs/latest/fiddles/native-ui/dialogs/information-dialog/preload.js
@@ -0,0 +1,5 @@
+const { contextBridge, ipcRenderer } = require('electron/renderer')
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  openInformationDialog: () => ipcRenderer.invoke('open-information-dialog')
+})
diff --git a/docs/latest/fiddles/native-ui/dialogs/information-dialog/renderer.js b/docs/latest/fiddles/native-ui/dialogs/information-dialog/renderer.js
index 108d8e324..57c8fcc00 100644
--- a/docs/latest/fiddles/native-ui/dialogs/information-dialog/renderer.js
+++ b/docs/latest/fiddles/native-ui/dialogs/information-dialog/renderer.js
@@ -1,14 +1,7 @@
-const { ipcRenderer } = require('electron')
-
 const informationBtn = document.getElementById('information-dialog')
 
-informationBtn.addEventListener('click', event => {
-  ipcRenderer.send('open-information-dialog')
-})
-
-ipcRenderer.on('information-dialog-selection', (event, index) => {
-  let message = 'You selected '
-  if (index === 0) message += 'yes.'
-  else message += 'no.'
+informationBtn.addEventListener('click', async () => {
+  const index = await window.electronAPI.openInformationDialog()
+  const message = `You selected: ${index === 0 ? 'yes' : 'no'}`
   document.getElementById('info-selection').innerHTML = message
 })
diff --git a/docs/latest/fiddles/native-ui/dialogs/open-file-or-directory/index.html b/docs/latest/fiddles/native-ui/dialogs/open-file-or-directory/index.html
index 226888218..9443a62ce 100644
--- a/docs/latest/fiddles/native-ui/dialogs/open-file-or-directory/index.html
+++ b/docs/latest/fiddles/native-ui/dialogs/open-file-or-directory/index.html
@@ -100,9 +100,6 @@ <h2>ProTip</h2>
       </div>
     </div>
 
-    <script>
-      // You can also require other files to run in this process
-      require("./renderer.js");
-    </script>
+    <script src="renderer.js"></script>
   </body>
 </html>
diff --git a/docs/latest/fiddles/native-ui/dialogs/open-file-or-directory/main.js b/docs/latest/fiddles/native-ui/dialogs/open-file-or-directory/main.js
index b3f87183a..5721c6986 100644
--- a/docs/latest/fiddles/native-ui/dialogs/open-file-or-directory/main.js
+++ b/docs/latest/fiddles/native-ui/dialogs/open-file-or-directory/main.js
@@ -1,5 +1,6 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow, ipcMain, dialog, shell } = require('electron')
+const { app, BrowserWindow, ipcMain, dialog, shell } = require('electron/main')
+const path = require('node:path')
 
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
@@ -11,8 +12,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true
+      preload: path.join(__dirname, 'preload.js')
     }
   })
 
@@ -59,17 +59,11 @@ app.on('activate', function () {
   }
 })
 
-ipcMain.on('open-file-dialog', event => {
-  dialog.showOpenDialog(
-    {
-      properties: ['openFile', 'openDirectory']
-    },
-    files => {
-      if (files) {
-        event.sender.send('selected-directory', files)
-      }
-    }
-  )
+ipcMain.handle('open-file-dialog', async () => {
+  const options = {
+    properties: ['openFile', 'openDirectory']
+  }
+  return (await dialog.showOpenDialog(options)).filePaths
 })
 
 // In this file you can include the rest of your app's specific main process
diff --git a/docs/latest/fiddles/native-ui/dialogs/open-file-or-directory/preload.js b/docs/latest/fiddles/native-ui/dialogs/open-file-or-directory/preload.js
new file mode 100644
index 000000000..ace7c2d16
--- /dev/null
+++ b/docs/latest/fiddles/native-ui/dialogs/open-file-or-directory/preload.js
@@ -0,0 +1,5 @@
+const { contextBridge, ipcRenderer } = require('electron/renderer')
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  openFileDialog: () => ipcRenderer.invoke('open-file-dialog')
+})
diff --git a/docs/latest/fiddles/native-ui/dialogs/open-file-or-directory/renderer.js b/docs/latest/fiddles/native-ui/dialogs/open-file-or-directory/renderer.js
index 08333444d..badfd8776 100644
--- a/docs/latest/fiddles/native-ui/dialogs/open-file-or-directory/renderer.js
+++ b/docs/latest/fiddles/native-ui/dialogs/open-file-or-directory/renderer.js
@@ -1,11 +1,6 @@
-const { ipcRenderer } = require('electron')
-
 const selectDirBtn = document.getElementById('select-directory')
 
-selectDirBtn.addEventListener('click', event => {
-  ipcRenderer.send('open-file-dialog')
-})
-
-ipcRenderer.on('selected-directory', (event, path) => {
+selectDirBtn.addEventListener('click', async () => {
+  const path = await window.electronAPI.openFileDialog()
   document.getElementById('selected-file').innerHTML = `You selected: ${path}`
 })
diff --git a/docs/latest/fiddles/native-ui/dialogs/save-dialog/index.html b/docs/latest/fiddles/native-ui/dialogs/save-dialog/index.html
index 6165af46a..d8e97edbf 100644
--- a/docs/latest/fiddles/native-ui/dialogs/save-dialog/index.html
+++ b/docs/latest/fiddles/native-ui/dialogs/save-dialog/index.html
@@ -83,9 +83,6 @@ <h5>Main Process</h5>
       </div>
     </div>
 
-    <script>
-      // You can also require other files to run in this process
-      require("./renderer.js");
-    </script>
+    <script src="renderer.js"></script>
   </body>
 </html>
diff --git a/docs/latest/fiddles/native-ui/dialogs/save-dialog/main.js b/docs/latest/fiddles/native-ui/dialogs/save-dialog/main.js
index b522f27ed..44c8fa1a1 100644
--- a/docs/latest/fiddles/native-ui/dialogs/save-dialog/main.js
+++ b/docs/latest/fiddles/native-ui/dialogs/save-dialog/main.js
@@ -1,5 +1,6 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow, ipcMain, dialog, shell } = require('electron')
+const { app, BrowserWindow, ipcMain, dialog, shell } = require('electron/main')
+const path = require('node:path')
 
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
@@ -11,8 +12,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true
+      preload: path.join(__dirname, 'preload.js')
     }
   })
 
@@ -59,14 +59,12 @@ app.on('activate', function () {
   }
 })
 
-ipcMain.on('save-dialog', event => {
+ipcMain.handle('save-dialog', async () => {
   const options = {
     title: 'Save an Image',
     filters: [{ name: 'Images', extensions: ['jpg', 'png', 'gif'] }]
   }
-  dialog.showSaveDialog(options, filename => {
-    event.sender.send('saved-file', filename)
-  })
+  return (await dialog.showSaveDialog(options)).filePath
 })
 
 // In this file you can include the rest of your app's specific main process
diff --git a/docs/latest/fiddles/native-ui/dialogs/save-dialog/preload.js b/docs/latest/fiddles/native-ui/dialogs/save-dialog/preload.js
new file mode 100644
index 000000000..6d63c2e45
--- /dev/null
+++ b/docs/latest/fiddles/native-ui/dialogs/save-dialog/preload.js
@@ -0,0 +1,5 @@
+const { contextBridge, ipcRenderer } = require('electron/renderer')
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  saveDialog: () => ipcRenderer.invoke('save-dialog')
+})
diff --git a/docs/latest/fiddles/native-ui/dialogs/save-dialog/renderer.js b/docs/latest/fiddles/native-ui/dialogs/save-dialog/renderer.js
index 075b02e17..c36088c77 100644
--- a/docs/latest/fiddles/native-ui/dialogs/save-dialog/renderer.js
+++ b/docs/latest/fiddles/native-ui/dialogs/save-dialog/renderer.js
@@ -1,12 +1,6 @@
-const { ipcRenderer } = require('electron')
-
 const saveBtn = document.getElementById('save-dialog')
 
-saveBtn.addEventListener('click', event => {
-  ipcRenderer.send('save-dialog')
-})
-
-ipcRenderer.on('saved-file', (event, path) => {
-  if (!path) path = 'No path'
+saveBtn.addEventListener('click', async () => {
+  const path = await window.electronAPI.saveDialog()
   document.getElementById('file-saved').innerHTML = `Path selected: ${path}`
 })
diff --git a/docs/latest/fiddles/native-ui/drag-and-drop/index.html b/docs/latest/fiddles/native-ui/drag-and-drop/index.html
index 5f7d4853c..0ed547401 100644
--- a/docs/latest/fiddles/native-ui/drag-and-drop/index.html
+++ b/docs/latest/fiddles/native-ui/drag-and-drop/index.html
@@ -68,9 +68,6 @@ <h5>Main Process</h5>
       </div>
     </div>
 
-    <script>
-      // You can also require other files to run in this process
-      require("./renderer.js");
-    </script>
+    <script src="renderer.js"></script>
   </body>
 </html>
diff --git a/docs/latest/fiddles/native-ui/drag-and-drop/main.js b/docs/latest/fiddles/native-ui/drag-and-drop/main.js
index 1137ef176..b4dce1a66 100644
--- a/docs/latest/fiddles/native-ui/drag-and-drop/main.js
+++ b/docs/latest/fiddles/native-ui/drag-and-drop/main.js
@@ -1,5 +1,7 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow, ipcMain, nativeImage, shell } = require('electron')
+const { app, BrowserWindow, ipcMain, nativeImage, shell } = require('electron/main')
+const path = require('node:path')
+
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
 let mainWindow
@@ -10,8 +12,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true
+      preload: path.join(__dirname, 'preload.js')
     }
   })
 
@@ -58,7 +59,8 @@ app.on('activate', function () {
   }
 })
 
-ipcMain.on('ondragstart', (event, filepath) => {
+ipcMain.on('ondragstart', (event) => {
+  const filepath = path.join(__dirname, 'renderer.js')
   const icon = nativeImage.createFromDataURL('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAVlpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KTMInWQAACsZJREFUWAmtWFlsXFcZ/u82++Jt7IyT2Em6ZFHTpAtWIzspEgjEUhA8VNAiIYEQUvuABBIUwUMkQIVKPCIoEiABLShISEBbhFJwIGRpIKRpbNeJ7bh2HHvssR3PPnPnLnzfmRlju6EQqUc+c++c8y/fv54z1uQOh+/7Glh0TD59TE/TND7lnfa4/64OKsM071QoeZpA/y9WWvk/B4XCC06TUC+Xyw8HTXNQ1+Ww6PpOrMebewXxvBueJ6/XHOdMJBL5J9Y97m2R0SS/wweE6JxkGx5dilWr1S/7dXsEa2o4+LyFmcFcaL5zbX3Y9gh5hpeWYpSB9XV5/H678V89BGYDXnHJlCsWn4gHrGc1K9CXxferOdvPOOKUfF8cH7nUyCtklQZXih/VNNlmirk3GdBSoIcRswW7/vVkLPYi5W2Uze8bh7J+4wLfh4dViFx5/nmrUi7/MhGNvrCkBfpeWqnW/7BUdadqntQ8zwr6vhUV34xpYnDynWvcmwQNaclDXsqgLMqkocPDw7fNx7d5qIX+/PmJxKGD6VdDkeh7ztyqOFfrokGCEWiiZ1mp0uITnuKAosaT7+pNxMYTyefutcQfbA+b1XLpH5fnF97/yD335Fu6mqTqsclDINBVmI4fDxw80KPAvJSt1MZtMcLiGxYUu83p4UkgnJZlqcl3LAj3WnTkIS9lUBYNPJjueVWgg7qocyOgliFqjZsg8gq5tRdiieQTf1gq15Y8CUbRZtyWOzZwc8lEqS3PTCtgqd13ieO68BQ2uNl64tXAewktrFuX2mPdkWAxn3sxnmx7sqUTJGqso8MGS9tbXFz8DMH8bblUX3T9QARVi8RV8qljfcJy0zRlaf6mzHEuzEtmekqCoZB4rqp0OmudHtUnlEWZlE0d1EWd1N3EozourcO65pw4eTIZQTW9VazJtbqvw9XwKVFQMsKDBuNhtp4uvGGFI+IDgKnpMjYyIis3ZsQMBIR7pONsIaMsyqRs6ohY1rPUSd3EQFDqo+kdZ3Fh4aupbdu+99uFQr2A1CBs4uEAjZjIFUMHi4dVxMXzCdCXQj4vBrwVCofl0ulTcv/DAxJJJBUPc8mpoyI2JDw7bFyT+ifTcSubyXytJ51+roWBxwG9Q73WWjZ7eSUU3//nXM0NI+x0PBGrTSgsLS9JFuFxHFrvSqIrJV279gi6tjiVspTza3JjZhY+0CQZj0mlWJSeHTslCro6eFqymCcVVN77kkGjs1p4sy2VOoSlOrFwT+XR+PjkgGaZ+ycKVbRTYUdVrmaImCvzk1dlFCEJdHRJ284+ie/ol0h7p7jFvExcvCCXzp2Rqem3pAMAiqWS6JGYhFI9Mjo6KjevXVUyKEuFHrKpY6JQ8TXT3D8+OTkAHBw6o6LCFo9ag3o4JtlCyTHEt5AxKvS6YUi5kJeZG3Py0NAxlLcJ9xti+K7Mjo/JfGZRuvv6Ze+9+yWEhDZAvzg3JyhX2d6/S7q6e+TimdOS7ElLKBZDwqvmj6rztayr1fVI1IoXi4PAcYZY1tPEEO1wEVlXgRFBDcmIXTqJsS+XyhKLJ5A/OpIVXXptWUYv/UvaenfIocEhMQ2EzHHErlXFCgQl3paU1eVl6QAY8sQTCSmVihKJx1V/ogvgIYF/pACdcMBhqONoHhF88/2d+bojyA6cRvje2IdFjoSjUSnBS8hgyS9lZOzKFdmPxO3o6gQIGzwuDn1dVSCtCKPy1pZXlATXqUsVYMLRmKo87vP4Y1ioqwCdCegmMYx3W/VPn8RrSDwwIMMbcEjkYo29JZVOy+ybI7K4eksODx1VSqvligpReSVLgySM/FI5h2q062jNyL3s7FtoAyGJIlx1225UmwJF6aJRJ3XzHXO9bWvsJa3jQFlBJkz6iuXdu32HzM7MyP0PPNgAU6ko4Qzp6b+flr8MD9OYJg9CwtzL5+T65ITs2bsP3mGxN/ZbBcOn0sk20gAkLQ+huXpFi8vkoY9AoyDjxTR1mbo6Ltt275HpN0dlNxQE40mVM8Ajjxx9VAGhAvQR1akZFCq799ADysMuQqOxh2FNmamEaz51ItGLfFD9+oUJoZkLowHoFA2mljUacqOMflKuVmHpfmnfvlMuvXZeStmMBIMhcWEdjgFJtrUjXI0KchAuAg0ilxLJNoRVBxhIBm0TjjKAuqjTqTs3CQZ6QUUMGFW7eiWMUg6w+yo8YMW7DqtqlZLkUDV2ISfd29KyDwk9MjYmMyOXxQIIKuShqo4VGFNBEgeDQYqVam5N5tEePFQgURIUBCsd1EWd1XrtDUUMLARD9bKaK5ytQ2Gb75g8WMiEP6VkfnZGevv6UF1vSBW5E0PFDAweFRvlfun8WVmamhDNrkmweQ0pwaPt6M4m8mgKTTFXqcrV0ZH1FKBg6qAu6qTuJiCV1Cp2Q0NDr9Uq5Ym+oMEDlSewsoRwrVBEaij7AJ4s7zrOpumxEdm15y6558GHJVe1Zezy6zJx6aJkpq5JFB4z6zVZmBiX1VWUP0IY4CFMYcpQdZ3xqIs6oftCE5DHKwd0q/tzOV8svdDb3nk8VnG9qmgQC0ZURz8Ur91alXgSByZ6ES9kZZTr/PR16UOCh+7dq0CWyyXJ4xqCQ0nKt9YQSlPue2gAeYZzD7yNLk0wmqAreb2WYSxAJ8Dget64wxtEBlDaqVOn/K5dB67t6+t5MhoMJuc8w8UPKiQ9CQR9JK5czhZAQxPt7TKF3OiAIisUViAD2Lg5d0P2HDgoKeRaW0enyqVwBJcO5fFG5dqa7h406qaeX8384uTZL5w9+UqxhYHFp0YLIYA9ddfu3T+4UJF6Rg+YAc9D0+RoIGP1ULhpWspr10evyK7+ftWTrk9PS/++A9KZSm26cih2mMOErem6n/ZsZwA2TM/MPHXs2LEftnSTbh0Q36mIIbx44cLvOnu3f+xUwbWLmoHTCUlF6g2jBQo/GnFrnGNqSHdvr+rIKGMW1KahwEBdzHft98aNwMr8zd8/NDDwccihc0hLi3GubRjY0Bm6H19fPvnZI4c/fHd7PJ2peXYZ+WQ26JufZELjQ6lbAQtnWre0d3apY8TFIdtAo+Qri6mupsB49lBMC+QXF0YefObZT8j0eKWlswVjEyCCOXHihPGb575VCvVuf3lvetsH9rXF0rla3cnhpoIGjgsUPhR3I4TMKYJQV1Z6WO02aEjHa5mNe3OPW3OPRHVrbXFh9Ocvv/KR1372owx1Pf3005uc35Ddgtd8rsf06IdS5777zZ+mUqmPzjm6TPpmvayZOq4LyATeCzkanmiy4qEuC/yXiO8CSMRzvLs1x9phepLNZl868sy3Pyen/5hd1/EfRvWmuvSWNeaRS/RkPDI4+NjE1NSXEoXlpaNB1zqo20abi59/vu/UfM2pie7WUDVq8l3wTwnskeZ+zTbIQ17KoCzKpGzq2KqX32/roRbh8ePHdUzl0s9/5Rv9n/7go19MxCKfCkZiu3V06wrO5gocxL7Dgd/IEobEMH6rejg+auXidL5Y/vWv/vTX53/y/e/MkGajTH7fOt4RUJOY1df4RdtY6ICFRzqTySOhUOA+3Ai3o31H1ZbnlXBruFmt2iMrudy5xx9//BzWV7nXDBGN2xpjbt/5oGUEdhtO3iD47xZOvm8a5CHvpsV38wsUaMwBWsz3rbK5xr0mzdv2t9Jv/f5vhsF4J+Q63IUAAAAASUVORK5CYII=')
 
   event.sender.startDrag({
diff --git a/docs/latest/fiddles/native-ui/drag-and-drop/preload.js b/docs/latest/fiddles/native-ui/drag-and-drop/preload.js
new file mode 100644
index 000000000..bad5ed4c8
--- /dev/null
+++ b/docs/latest/fiddles/native-ui/drag-and-drop/preload.js
@@ -0,0 +1,5 @@
+const { contextBridge, ipcRenderer } = require('electron/renderer')
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  dragStart: () => ipcRenderer.send('ondragstart')
+})
diff --git a/docs/latest/fiddles/native-ui/drag-and-drop/renderer.js b/docs/latest/fiddles/native-ui/drag-and-drop/renderer.js
index 859348551..031601023 100644
--- a/docs/latest/fiddles/native-ui/drag-and-drop/renderer.js
+++ b/docs/latest/fiddles/native-ui/drag-and-drop/renderer.js
@@ -1,8 +1,6 @@
-const { ipcRenderer } = require('electron')
-
 const dragFileLink = document.getElementById('drag-file-link')
 
 dragFileLink.addEventListener('dragstart', event => {
   event.preventDefault()
-  ipcRenderer.send('ondragstart', __filename)
+  window.electronAPI.dragStart()
 })
diff --git a/docs/latest/fiddles/native-ui/external-links-file-manager/index.html b/docs/latest/fiddles/native-ui/external-links-file-manager/index.html
index 32e6dd1da..83788b8e4 100644
--- a/docs/latest/fiddles/native-ui/external-links-file-manager/index.html
+++ b/docs/latest/fiddles/native-ui/external-links-file-manager/index.html
@@ -95,10 +95,6 @@ <h5>Renderer Process</h5>
         </div>
       </div>
     </div>
-
-    <script>
-      // You can also require other files to run in this process
-      require("./renderer.js");
-    </script>
+    <script src="renderer.js"></script>
   </body>
 </html>
diff --git a/docs/latest/fiddles/native-ui/external-links-file-manager/main.js b/docs/latest/fiddles/native-ui/external-links-file-manager/main.js
index a2de1b97c..b98a8669b 100644
--- a/docs/latest/fiddles/native-ui/external-links-file-manager/main.js
+++ b/docs/latest/fiddles/native-ui/external-links-file-manager/main.js
@@ -1,5 +1,15 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow, shell } = require('electron')
+const { app, BrowserWindow, shell, ipcMain } = require('electron/main')
+const path = require('node:path')
+const os = require('node:os')
+
+ipcMain.on('open-home-dir', () => {
+  shell.showItemInFolder(os.homedir())
+})
+
+ipcMain.on('open-external', (event, url) => {
+  shell.openExternal(url)
+})
 
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
@@ -11,8 +21,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true
+      preload: path.join(__dirname, 'preload.js')
     }
   })
 
diff --git a/docs/latest/fiddles/native-ui/external-links-file-manager/preload.js b/docs/latest/fiddles/native-ui/external-links-file-manager/preload.js
new file mode 100644
index 000000000..9be85a13e
--- /dev/null
+++ b/docs/latest/fiddles/native-ui/external-links-file-manager/preload.js
@@ -0,0 +1,6 @@
+const { contextBridge, ipcRenderer } = require('electron/renderer')
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  openHomeDir: () => ipcRenderer.send('open-home-dir'),
+  openExternal: (url) => ipcRenderer.send('open-external', url)
+})
diff --git a/docs/latest/fiddles/native-ui/external-links-file-manager/renderer.js b/docs/latest/fiddles/native-ui/external-links-file-manager/renderer.js
index 2a059092c..6903268fd 100644
--- a/docs/latest/fiddles/native-ui/external-links-file-manager/renderer.js
+++ b/docs/latest/fiddles/native-ui/external-links-file-manager/renderer.js
@@ -1,13 +1,10 @@
-const { shell } = require('electron')
-const os = require('node:os')
-
 const exLinksBtn = document.getElementById('open-ex-links')
 const fileManagerBtn = document.getElementById('open-file-manager')
 
 fileManagerBtn.addEventListener('click', (event) => {
-  shell.showItemInFolder(os.homedir())
+  window.electronAPI.openHomeDir()
 })
 
 exLinksBtn.addEventListener('click', (event) => {
-  shell.openExternal('https://electronjs.org')
+  window.electronAPI.openExternal('https://electronjs.org')
 })
diff --git a/docs/latest/fiddles/native-ui/notifications/index.html b/docs/latest/fiddles/native-ui/notifications/index.html
index 27725a448..0eb9e213d 100644
--- a/docs/latest/fiddles/native-ui/notifications/index.html
+++ b/docs/latest/fiddles/native-ui/notifications/index.html
@@ -59,9 +59,6 @@ <h2>Notification with image</h2>
       </div>
     </div>
 
-    <script>
-      // You can also require other files to run in this process
-      require("./renderer.js");
-    </script>
+    <script src="renderer.js"></script>
   </body>
 </html>
diff --git a/docs/latest/fiddles/native-ui/notifications/main.js b/docs/latest/fiddles/native-ui/notifications/main.js
index a2de1b97c..f880a67a4 100644
--- a/docs/latest/fiddles/native-ui/notifications/main.js
+++ b/docs/latest/fiddles/native-ui/notifications/main.js
@@ -1,5 +1,5 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow, shell } = require('electron')
+const { app, BrowserWindow, shell } = require('electron/main')
 
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
@@ -9,11 +9,7 @@ function createWindow () {
   // Create the browser window.
   mainWindow = new BrowserWindow({
     width: 800,
-    height: 600,
-    webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true
-    }
+    height: 600
   })
 
   // and load the index.html of the app.
diff --git a/docs/latest/fiddles/native-ui/tray/main.js b/docs/latest/fiddles/native-ui/tray/main.js
index 3d5ce65e0..2a238a265 100644
--- a/docs/latest/fiddles/native-ui/tray/main.js
+++ b/docs/latest/fiddles/native-ui/tray/main.js
@@ -1,4 +1,4 @@
-const { app, Tray, Menu, nativeImage } = require('electron')
+const { app, Tray, Menu, nativeImage } = require('electron/main')
 
 let tray
 
diff --git a/docs/latest/fiddles/quick-start/main.js b/docs/latest/fiddles/quick-start/main.js
index 6fda959b7..c614294e0 100644
--- a/docs/latest/fiddles/quick-start/main.js
+++ b/docs/latest/fiddles/quick-start/main.js
@@ -1,4 +1,4 @@
-const { app, BrowserWindow } = require('electron')
+const { app, BrowserWindow } = require('electron/main')
 const path = require('node:path')
 
 function createWindow () {
diff --git a/docs/latest/fiddles/screen/fit-screen/main.js b/docs/latest/fiddles/screen/fit-screen/main.js
index 559e0f24e..9b1ffcbbe 100644
--- a/docs/latest/fiddles/screen/fit-screen/main.js
+++ b/docs/latest/fiddles/screen/fit-screen/main.js
@@ -3,14 +3,11 @@
 // For more info, see:
 // https://www.electronjs.org/docs/latest/api/screen
 
-const { app, BrowserWindow } = require('electron')
+const { app, BrowserWindow, screen } = require('electron/main')
 
 let mainWindow = null
 
 app.whenReady().then(() => {
-  // We cannot require the screen module until the app is ready.
-  const { screen } = require('electron')
-
   // Create a window that fills the screen's available work area.
   const primaryDisplay = screen.getPrimaryDisplay()
   const { width, height } = primaryDisplay.workAreaSize
diff --git a/docs/latest/fiddles/system/clipboard/copy/main.js b/docs/latest/fiddles/system/clipboard/copy/main.js
index c68becbd8..1c76f9d50 100644
--- a/docs/latest/fiddles/system/clipboard/copy/main.js
+++ b/docs/latest/fiddles/system/clipboard/copy/main.js
@@ -1,4 +1,4 @@
-const { app, BrowserWindow, ipcMain, clipboard } = require('electron')
+const { app, BrowserWindow, ipcMain, clipboard } = require('electron/main')
 const path = require('node:path')
 
 let mainWindow = null
diff --git a/docs/latest/fiddles/system/clipboard/copy/preload.js b/docs/latest/fiddles/system/clipboard/copy/preload.js
index f97bfe1fc..580d38665 100644
--- a/docs/latest/fiddles/system/clipboard/copy/preload.js
+++ b/docs/latest/fiddles/system/clipboard/copy/preload.js
@@ -1,4 +1,4 @@
-const { contextBridge, ipcRenderer } = require('electron')
+const { contextBridge, ipcRenderer } = require('electron/renderer')
 
 contextBridge.exposeInMainWorld('clipboard', {
   writeText: (text) => ipcRenderer.invoke('clipboard:writeText', text)
diff --git a/docs/latest/fiddles/system/clipboard/paste/main.js b/docs/latest/fiddles/system/clipboard/paste/main.js
index 43f73a14c..58c2fbb3e 100644
--- a/docs/latest/fiddles/system/clipboard/paste/main.js
+++ b/docs/latest/fiddles/system/clipboard/paste/main.js
@@ -1,4 +1,4 @@
-const { app, BrowserWindow, ipcMain, clipboard } = require('electron')
+const { app, BrowserWindow, ipcMain, clipboard } = require('electron/main')
 const path = require('node:path')
 
 let mainWindow = null
diff --git a/docs/latest/fiddles/system/clipboard/paste/preload.js b/docs/latest/fiddles/system/clipboard/paste/preload.js
index 7ea394192..31ce72145 100644
--- a/docs/latest/fiddles/system/clipboard/paste/preload.js
+++ b/docs/latest/fiddles/system/clipboard/paste/preload.js
@@ -1,4 +1,4 @@
-const { contextBridge, ipcRenderer } = require('electron')
+const { contextBridge, ipcRenderer } = require('electron/renderer')
 
 contextBridge.exposeInMainWorld('clipboard', {
   readText: () => ipcRenderer.invoke('clipboard:readText'),
diff --git a/docs/latest/fiddles/system/protocol-handler/launch-app-from-URL-in-another-app/index.html b/docs/latest/fiddles/system/protocol-handler/launch-app-from-URL-in-another-app/index.html
index bc0e8c569..17e326b6c 100644
--- a/docs/latest/fiddles/system/protocol-handler/launch-app-from-URL-in-another-app/index.html
+++ b/docs/latest/fiddles/system/protocol-handler/launch-app-from-URL-in-another-app/index.html
@@ -44,7 +44,7 @@ <h3>Demo</h3>
   <h3>Packaging</h3>
   <p>This feature will only work on macOS when your app is packaged. It will not work when you're launching it in
     development from the command-line. When you package your app you'll need to make sure the macOS <code>plist</code>
-    for the app is updated to include the new protocol handler. If you're using <code>electron-packager</code> then you
+    for the app is updated to include the new protocol handler. If you're using <code>@electron/packager</code> then you
     can add the flag <code>--extend-info</code> with a path to the <code>plist</code> you've created. The one for this
     app is below:</p>
 
diff --git a/docs/latest/fiddles/system/protocol-handler/launch-app-from-URL-in-another-app/main.js b/docs/latest/fiddles/system/protocol-handler/launch-app-from-URL-in-another-app/main.js
index 6459985a1..84efd0cb9 100644
--- a/docs/latest/fiddles/system/protocol-handler/launch-app-from-URL-in-another-app/main.js
+++ b/docs/latest/fiddles/system/protocol-handler/launch-app-from-URL-in-another-app/main.js
@@ -1,5 +1,5 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow, ipcMain, shell, dialog } = require('electron')
+const { app, BrowserWindow, ipcMain, shell, dialog } = require('electron/main')
 const path = require('node:path')
 
 let mainWindow
diff --git a/docs/latest/fiddles/system/protocol-handler/launch-app-from-URL-in-another-app/preload.js b/docs/latest/fiddles/system/protocol-handler/launch-app-from-URL-in-another-app/preload.js
index 13e803ad9..eda1d8c72 100644
--- a/docs/latest/fiddles/system/protocol-handler/launch-app-from-URL-in-another-app/preload.js
+++ b/docs/latest/fiddles/system/protocol-handler/launch-app-from-URL-in-another-app/preload.js
@@ -1,11 +1,5 @@
-// All of the Node.js APIs are available in the preload process.
-// It has the same sandbox as a Chrome extension.
-const { contextBridge, ipcRenderer } = require('electron')
+const { contextBridge, ipcRenderer } = require('electron/renderer')
 
-// Set up context bridge between the renderer process and the main process
-contextBridge.exposeInMainWorld(
-  'shell',
-  {
-    open: () => ipcRenderer.send('shell:open')
-  }
-)
+contextBridge.exposeInMainWorld('shell', {
+  open: () => ipcRenderer.send('shell:open')
+})
diff --git a/docs/latest/fiddles/system/system-app-user-information/app-information/index.html b/docs/latest/fiddles/system/system-app-user-information/app-information/index.html
index b08a8d0c8..f8b0e38c3 100644
--- a/docs/latest/fiddles/system/system-app-user-information/app-information/index.html
+++ b/docs/latest/fiddles/system/system-app-user-information/app-information/index.html
@@ -18,9 +18,6 @@ <h1>App Information</h1>
         </div>
       </div>
     </div>
-    <script>
-      // You can also require other files to run in this process
-      require('./renderer.js')
-    </script>
+    <script src="renderer.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/docs/latest/fiddles/system/system-app-user-information/app-information/main.js b/docs/latest/fiddles/system/system-app-user-information/app-information/main.js
index bfbfcfac5..247bad8f5 100644
--- a/docs/latest/fiddles/system/system-app-user-information/app-information/main.js
+++ b/docs/latest/fiddles/system/system-app-user-information/app-information/main.js
@@ -1,4 +1,5 @@
-const { app, BrowserWindow, ipcMain, shell } = require('electron')
+const { app, BrowserWindow, ipcMain, shell } = require('electron/main')
+const path = require('node:path')
 
 let mainWindow = null
 
@@ -10,8 +11,7 @@ function createWindow () {
     height: 400,
     title: 'Get app information',
     webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true
+      preload: path.join(__dirname, 'preload.js')
     }
   }
 
diff --git a/docs/latest/fiddles/system/system-app-user-information/app-information/preload.js b/docs/latest/fiddles/system/system-app-user-information/app-information/preload.js
new file mode 100644
index 000000000..92e3efa32
--- /dev/null
+++ b/docs/latest/fiddles/system/system-app-user-information/app-information/preload.js
@@ -0,0 +1,5 @@
+const { contextBridge, ipcRenderer } = require('electron/renderer')
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  getAppPath: () => ipcRenderer.invoke('get-app-path')
+})
diff --git a/docs/latest/fiddles/system/system-app-user-information/app-information/renderer.js b/docs/latest/fiddles/system/system-app-user-information/app-information/renderer.js
index e8a9b1b74..35b201bf4 100644
--- a/docs/latest/fiddles/system/system-app-user-information/app-information/renderer.js
+++ b/docs/latest/fiddles/system/system-app-user-information/app-information/renderer.js
@@ -1,9 +1,7 @@
-const { ipcRenderer } = require('electron')
-
 const appInfoBtn = document.getElementById('app-info')
 
 appInfoBtn.addEventListener('click', async () => {
-  const path = await ipcRenderer.invoke('get-app-path')
+  const path = await window.electronAPI.getAppPath()
   const message = `This app is located at: ${path}`
   document.getElementById('got-app-info').innerHTML = message
 })
diff --git a/docs/latest/fiddles/system/system-information/get-version-information/index.html b/docs/latest/fiddles/system/system-information/get-version-information/index.html
index de0a39b42..3bd06b382 100644
--- a/docs/latest/fiddles/system/system-information/get-version-information/index.html
+++ b/docs/latest/fiddles/system/system-information/get-version-information/index.html
@@ -20,7 +20,5 @@ <h1>Get version information</h1>
       </div>
     </div>
   </body>
-  <script>
-    require('./renderer.js')
-  </script>
+  <script src="renderer.js"></script>
 </html>
diff --git a/docs/latest/fiddles/system/system-information/get-version-information/main.js b/docs/latest/fiddles/system/system-information/get-version-information/main.js
index 34bdd9e32..e1a7434a5 100644
--- a/docs/latest/fiddles/system/system-information/get-version-information/main.js
+++ b/docs/latest/fiddles/system/system-information/get-version-information/main.js
@@ -1,4 +1,5 @@
-const { app, BrowserWindow, shell } = require('electron')
+const { app, BrowserWindow, shell } = require('electron/main')
+const path = require('node:path')
 
 let mainWindow = null
 
@@ -8,8 +9,7 @@ function createWindow () {
     height: 400,
     title: 'Get version information',
     webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true
+      preload: path.join(__dirname, 'preload.js')
     }
   }
 
diff --git a/docs/latest/fiddles/system/system-information/get-version-information/preload.js b/docs/latest/fiddles/system/system-information/get-version-information/preload.js
new file mode 100644
index 000000000..fa4eab915
--- /dev/null
+++ b/docs/latest/fiddles/system/system-information/get-version-information/preload.js
@@ -0,0 +1,3 @@
+const { contextBridge } = require('electron/renderer')
+
+contextBridge.exposeInMainWorld('electronVersion', process.versions.electron)
diff --git a/docs/latest/fiddles/system/system-information/get-version-information/renderer.js b/docs/latest/fiddles/system/system-information/get-version-information/renderer.js
index 40f7f2cf2..3e7c22e5c 100644
--- a/docs/latest/fiddles/system/system-information/get-version-information/renderer.js
+++ b/docs/latest/fiddles/system/system-information/get-version-information/renderer.js
@@ -1,8 +1,6 @@
 const versionInfoBtn = document.getElementById('version-info')
 
-const electronVersion = process.versions.electron
-
 versionInfoBtn.addEventListener('click', () => {
-  const message = `This app is using Electron version: ${electronVersion}`
+  const message = `This app is using Electron version: ${window.electronVersion}`
   document.getElementById('got-version-info').innerHTML = message
 })
diff --git a/docs/latest/fiddles/tutorial-first-app/main.js b/docs/latest/fiddles/tutorial-first-app/main.js
index fdb092a9d..8e92734f2 100644
--- a/docs/latest/fiddles/tutorial-first-app/main.js
+++ b/docs/latest/fiddles/tutorial-first-app/main.js
@@ -1,4 +1,4 @@
-const { app, BrowserWindow } = require('electron')
+const { app, BrowserWindow } = require('electron/main')
 
 const createWindow = () => {
   const win = new BrowserWindow({
diff --git a/docs/latest/fiddles/tutorial-preload/main.js b/docs/latest/fiddles/tutorial-preload/main.js
index 32e5c10d4..f62f40135 100644
--- a/docs/latest/fiddles/tutorial-preload/main.js
+++ b/docs/latest/fiddles/tutorial-preload/main.js
@@ -1,4 +1,4 @@
-const { app, BrowserWindow } = require('electron')
+const { app, BrowserWindow } = require('electron/main')
 const path = require('node:path')
 
 const createWindow = () => {
diff --git a/docs/latest/fiddles/tutorial-preload/preload.js b/docs/latest/fiddles/tutorial-preload/preload.js
index 4d0213eed..561df488d 100644
--- a/docs/latest/fiddles/tutorial-preload/preload.js
+++ b/docs/latest/fiddles/tutorial-preload/preload.js
@@ -1,4 +1,4 @@
-const { contextBridge } = require('electron')
+const { contextBridge } = require('electron/renderer')
 
 contextBridge.exposeInMainWorld('versions', {
   node: () => process.versions.node,
diff --git a/docs/latest/fiddles/windows/manage-windows/frameless-window/index.html b/docs/latest/fiddles/windows/manage-windows/frameless-window/index.html
index 5041b1939..69ef074f2 100644
--- a/docs/latest/fiddles/windows/manage-windows/frameless-window/index.html
+++ b/docs/latest/fiddles/windows/manage-windows/frameless-window/index.html
@@ -68,10 +68,6 @@ <h2>Create a frameless window</h2>
         </div>
       </div>
     </div>
-
-    <script>
-      // You can also require other files to run in this process
-      require("./renderer.js");
-    </script>
+    <script src="renderer.js"></script>
   </body>
 </html>
diff --git a/docs/latest/fiddles/windows/manage-windows/frameless-window/main.js b/docs/latest/fiddles/windows/manage-windows/frameless-window/main.js
index b60f99d22..507242962 100644
--- a/docs/latest/fiddles/windows/manage-windows/frameless-window/main.js
+++ b/docs/latest/fiddles/windows/manage-windows/frameless-window/main.js
@@ -1,5 +1,6 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow, ipcMain, shell } = require('electron')
+const { app, BrowserWindow, ipcMain, shell } = require('electron/main')
+const path = require('node:path')
 
 ipcMain.on('create-frameless-window', (event, { url }) => {
   const win = new BrowserWindow({ frame: false })
@@ -12,8 +13,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true
+      preload: path.join(__dirname, 'preload.js')
     }
   })
 
diff --git a/docs/latest/fiddles/windows/manage-windows/frameless-window/preload.js b/docs/latest/fiddles/windows/manage-windows/frameless-window/preload.js
new file mode 100644
index 000000000..0feaa6767
--- /dev/null
+++ b/docs/latest/fiddles/windows/manage-windows/frameless-window/preload.js
@@ -0,0 +1,5 @@
+const { contextBridge, ipcRenderer } = require('electron/renderer')
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  createFramelessWindow: (args) => ipcRenderer.send('create-frameless-window', args)
+})
diff --git a/docs/latest/fiddles/windows/manage-windows/frameless-window/renderer.js b/docs/latest/fiddles/windows/manage-windows/frameless-window/renderer.js
index 21f91ad56..7638f5609 100644
--- a/docs/latest/fiddles/windows/manage-windows/frameless-window/renderer.js
+++ b/docs/latest/fiddles/windows/manage-windows/frameless-window/renderer.js
@@ -1,8 +1,6 @@
-const { ipcRenderer } = require('electron')
-
 const newWindowBtn = document.getElementById('frameless-window')
 
 newWindowBtn.addEventListener('click', () => {
   const url = 'data:text/html,<h2>Hello World!</h2><a id="close" href="javascript:window.close()">Close this Window</a>'
-  ipcRenderer.send('create-frameless-window', { url })
+  window.electronAPI.createFramelessWindow({ url })
 })
diff --git a/docs/latest/fiddles/windows/manage-windows/manage-window-state/index.html b/docs/latest/fiddles/windows/manage-windows/manage-window-state/index.html
index eca1d0a47..9c6236dd7 100644
--- a/docs/latest/fiddles/windows/manage-windows/manage-window-state/index.html
+++ b/docs/latest/fiddles/windows/manage-windows/manage-window-state/index.html
@@ -55,10 +55,6 @@ <h2>Manage window state</h2>
         </div>
       </div>
     </div>
-
-    <script>
-      // You can also require other files to run in this process
-      require("./renderer.js");
-    </script>
+    <script src="renderer.js"></script>
   </body>
 </html>
diff --git a/docs/latest/fiddles/windows/manage-windows/manage-window-state/main.js b/docs/latest/fiddles/windows/manage-windows/manage-window-state/main.js
index 05fcdd704..afb422339 100644
--- a/docs/latest/fiddles/windows/manage-windows/manage-window-state/main.js
+++ b/docs/latest/fiddles/windows/manage-windows/manage-window-state/main.js
@@ -1,5 +1,6 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow, ipcMain, shell } = require('electron')
+const { app, BrowserWindow, ipcMain, shell } = require('electron/main')
+const path = require('node:path')
 
 ipcMain.on('create-demo-window', (event) => {
   const win = new BrowserWindow({ width: 400, height: 275 })
@@ -22,8 +23,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true
+      preload: path.join(__dirname, 'preload.js')
     }
   })
 
diff --git a/docs/latest/fiddles/windows/manage-windows/manage-window-state/preload.js b/docs/latest/fiddles/windows/manage-windows/manage-window-state/preload.js
new file mode 100644
index 000000000..d604ee529
--- /dev/null
+++ b/docs/latest/fiddles/windows/manage-windows/manage-window-state/preload.js
@@ -0,0 +1,6 @@
+const { contextBridge, ipcRenderer } = require('electron/renderer')
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  createDemoWindow: () => ipcRenderer.send('create-demo-window'),
+  onBoundsChanged: (callback) => ipcRenderer.on('bounds-changed', () => callback())
+})
diff --git a/docs/latest/fiddles/windows/manage-windows/manage-window-state/renderer.js b/docs/latest/fiddles/windows/manage-windows/manage-window-state/renderer.js
index bdf6a54c1..c152fd5ae 100644
--- a/docs/latest/fiddles/windows/manage-windows/manage-window-state/renderer.js
+++ b/docs/latest/fiddles/windows/manage-windows/manage-window-state/renderer.js
@@ -1,13 +1,11 @@
-const { ipcRenderer } = require('electron')
-
 const manageWindowBtn = document.getElementById('manage-window')
 
-ipcRenderer.on('bounds-changed', (event, bounds) => {
+window.electronAPI.onBoundsChanged((event, bounds) => {
   const manageWindowReply = document.getElementById('manage-window-reply')
   const message = `Size: ${bounds.size} Position: ${bounds.position}`
   manageWindowReply.textContent = message
 })
 
 manageWindowBtn.addEventListener('click', (event) => {
-  ipcRenderer.send('create-demo-window')
+  window.electronAPI.createDemoWindow()
 })
diff --git a/docs/latest/fiddles/windows/manage-windows/new-window/index.html b/docs/latest/fiddles/windows/manage-windows/new-window/index.html
index 19e3c33e0..3cd5df4a1 100644
--- a/docs/latest/fiddles/windows/manage-windows/new-window/index.html
+++ b/docs/latest/fiddles/windows/manage-windows/new-window/index.html
@@ -9,17 +9,14 @@ <h3>Supports: Win, macOS, Linux <span>|</span> Process: Main</h3>
   <button id="new-window">View Demo</button>
   <p>The <code>BrowserWindow</code> module gives you the ability to create new windows in your app.</p>
   <p>There are a lot of options when creating a new window. A few are in this demo, but visit the <a href="https://www.electronjs.org/docs/latest/api/browser-window">documentation<span>(opens in new window)</span></a>
-<div>
-            <h2>ProTip</h2>
-            <strong>Use an invisible browser window to run background tasks.</strong>
-            <p>You can set a new browser window to not be shown (be invisible) in order to use that additional renderer process as a kind of new thread in which to run JavaScript in the background of your app. You do this by setting the <code>show</code> property to <code>false</code> when defining the new window.</p>
-            <pre><code><span>var</span> win = <span>new</span> BrowserWindow({
+  <div>
+    <h2>ProTip</h2>
+    <strong>Use an invisible browser window to run background tasks.</strong>
+    <p>You can set a new browser window to not be shown (be invisible) in order to use that additional renderer process as a kind of new thread in which to run JavaScript in the background of your app. You do this by setting the <code>show</code> property to <code>false</code> when defining the new window.</p>
+    <pre><code><span>var</span> win = <span>new</span> BrowserWindow({
   <span>width</span>: <span>400</span>, <span>height</span>: <span>225</span>, <span>show</span>: <span>false</span>
 })</code></pre>
-          </div>
-    <script>
-    // You can also require other files to run in this process
-    require('./renderer.js')
-  </script>
+  </div>
+  <script src="renderer.js"></script>
 </body>
 </html>
diff --git a/docs/latest/fiddles/windows/manage-windows/new-window/main.js b/docs/latest/fiddles/windows/manage-windows/new-window/main.js
index 4e4a4e0ad..109055ac8 100644
--- a/docs/latest/fiddles/windows/manage-windows/new-window/main.js
+++ b/docs/latest/fiddles/windows/manage-windows/new-window/main.js
@@ -1,5 +1,6 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow, ipcMain, shell } = require('electron')
+const { app, BrowserWindow, ipcMain, shell } = require('electron/main')
+const path = require('node:path')
 
 ipcMain.on('new-window', (event, { url, width, height }) => {
   const win = new BrowserWindow({ width, height })
@@ -12,8 +13,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true
+      preload: path.join(__dirname, 'preload.js')
     }
   })
 
diff --git a/docs/latest/fiddles/windows/manage-windows/new-window/preload.js b/docs/latest/fiddles/windows/manage-windows/new-window/preload.js
new file mode 100644
index 000000000..53019d908
--- /dev/null
+++ b/docs/latest/fiddles/windows/manage-windows/new-window/preload.js
@@ -0,0 +1,5 @@
+const { contextBridge, ipcRenderer } = require('electron/renderer')
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  newWindow: (args) => ipcRenderer.send('new-window', args)
+})
diff --git a/docs/latest/fiddles/windows/manage-windows/new-window/renderer.js b/docs/latest/fiddles/windows/manage-windows/new-window/renderer.js
index 0d80d2ee2..22caea84a 100644
--- a/docs/latest/fiddles/windows/manage-windows/new-window/renderer.js
+++ b/docs/latest/fiddles/windows/manage-windows/new-window/renderer.js
@@ -1,8 +1,6 @@
-const { ipcRenderer } = require('electron')
-
 const newWindowBtn = document.getElementById('new-window')
 
 newWindowBtn.addEventListener('click', (event) => {
   const url = 'https://electronjs.org'
-  ipcRenderer.send('new-window', { url, width: 400, height: 320 })
+  window.electronAPI.newWindow({ url, width: 400, height: 320 })
 })
diff --git a/docs/latest/fiddles/windows/manage-windows/window-events/index.html b/docs/latest/fiddles/windows/manage-windows/window-events/index.html
index 028a70b6c..5c05a3c9a 100644
--- a/docs/latest/fiddles/windows/manage-windows/window-events/index.html
+++ b/docs/latest/fiddles/windows/manage-windows/window-events/index.html
@@ -49,10 +49,6 @@ <h2>Window events</h2>
         </div>
       </div>
     </div>
-
-    <script>
-      // You can also require other files to run in this process
-      require("./renderer.js");
-    </script>
+    <script src="renderer.js"></script>
   </body>
 </html>
diff --git a/docs/latest/fiddles/windows/manage-windows/window-events/main.js b/docs/latest/fiddles/windows/manage-windows/window-events/main.js
index 5abf2cc25..5f10651d2 100644
--- a/docs/latest/fiddles/windows/manage-windows/window-events/main.js
+++ b/docs/latest/fiddles/windows/manage-windows/window-events/main.js
@@ -1,5 +1,6 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow, ipcMain, shell } = require('electron')
+const { app, BrowserWindow, ipcMain, shell } = require('electron/main')
+const path = require('node:path')
 
 function createWindow () {
   // Create the browser window.
@@ -7,8 +8,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true
+      preload: path.join(__dirname, 'preload.js')
     }
   })
 
@@ -30,6 +30,7 @@ function createWindow () {
     demoWindow = new BrowserWindow({ width: 600, height: 400 })
     demoWindow.loadURL('https://electronjs.org')
     demoWindow.on('close', () => {
+      demoWindow = undefined
       mainWindow.webContents.send('window-close')
     })
     demoWindow.on('focus', () => {
diff --git a/docs/latest/fiddles/windows/manage-windows/window-events/preload.js b/docs/latest/fiddles/windows/manage-windows/window-events/preload.js
new file mode 100644
index 000000000..b33f860a6
--- /dev/null
+++ b/docs/latest/fiddles/windows/manage-windows/window-events/preload.js
@@ -0,0 +1,9 @@
+const { contextBridge, ipcRenderer } = require('electron/renderer')
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  showDemoWindow: () => ipcRenderer.send('show-demo-window'),
+  focusDemoWindow: () => ipcRenderer.send('focus-demo-window'),
+  onWindowFocus: (callback) => ipcRenderer.on('window-focus', () => callback()),
+  onWindowBlur: (callback) => ipcRenderer.on('window-blur', () => callback()),
+  onWindowClose: (callback) => ipcRenderer.on('window-close', () => callback())
+})
diff --git a/docs/latest/fiddles/windows/manage-windows/window-events/renderer.js b/docs/latest/fiddles/windows/manage-windows/window-events/renderer.js
index 85460df93..814605ecb 100644
--- a/docs/latest/fiddles/windows/manage-windows/window-events/renderer.js
+++ b/docs/latest/fiddles/windows/manage-windows/window-events/renderer.js
@@ -1,5 +1,3 @@
-const { ipcRenderer } = require('electron')
-
 const listenToWindowBtn = document.getElementById('listen-to-window')
 const focusModalBtn = document.getElementById('focus-on-modal-window')
 
@@ -15,13 +13,13 @@ const showFocusBtn = (btn) => {
   focusModalBtn.addEventListener('click', focusWindow)
 }
 const focusWindow = () => {
-  ipcRenderer.send('focus-demo-window')
+  window.electronAPI.focusDemoWindow()
 }
 
-ipcRenderer.on('window-focus', hideFocusBtn)
-ipcRenderer.on('window-close', hideFocusBtn)
-ipcRenderer.on('window-blur', showFocusBtn)
+window.electronAPI.onWindowFocus(hideFocusBtn)
+window.electronAPI.onWindowClose(hideFocusBtn)
+window.electronAPI.onWindowBlur(showFocusBtn)
 
 listenToWindowBtn.addEventListener('click', () => {
-  ipcRenderer.send('show-demo-window')
+  window.electronAPI.showDemoWindow()
 })
diff --git a/docs/latest/tutorial/asar-integrity.md b/docs/latest/tutorial/asar-integrity.md
index 4ee3370c3..d2dc1e647 100644
--- a/docs/latest/tutorial/asar-integrity.md
+++ b/docs/latest/tutorial/asar-integrity.md
@@ -13,7 +13,7 @@ Currently ASAR integrity checking is only supported on macOS.
 
 ### Electron Forge / Electron Packager
 
-If you are using `>= electron-packager@15.4.0` or `>= @electron-forge/core@6.0.0-beta.61` then all these requirements are met for you automatically and you can skip to [Toggling the Fuse](#toggling-the-fuse).
+If you are using `>= @electron/packager`, `>= electron-packager@15.4.0` or `>= @electron-forge/core@6.0.0-beta.61` then all these requirements are met for you automatically and you can skip to [Toggling the Fuse](#toggling-the-fuse).
 
 ### Other build systems
 
diff --git a/docs/latest/tutorial/boilerplates-and-clis.md b/docs/latest/tutorial/boilerplates-and-clis.md
index fe87c906d..99340a878 100644
--- a/docs/latest/tutorial/boilerplates-and-clis.md
+++ b/docs/latest/tutorial/boilerplates-and-clis.md
@@ -37,7 +37,7 @@ Electron Forge is a tool for packaging and publishing Electron applications. It
 into a single extensible interface so that anyone can jump right into making Electron apps.
 
 Forge comes with [a ready-to-use template](https://electronforge.io/templates) using Webpack as a bundler. It includes an example typescript configuration and provides two configuration files to enable easy customization. It uses the same core modules used by the
-greater Electron community (like [`electron-packager`](https://github.com/electron/electron-packager)) –
+greater Electron community (like [`@electron/packager`](https://github.com/electron/packager)) –
 changes made by Electron maintainers (like Slack) benefit Forge's users, too.
 
 You can find more information and documentation on [electronforge.io](https://electronforge.io/).
diff --git a/docs/latest/tutorial/code-signing.md b/docs/latest/tutorial/code-signing.md
index 73035a32c..21d58ab03 100644
--- a/docs/latest/tutorial/code-signing.md
+++ b/docs/latest/tutorial/code-signing.md
@@ -51,7 +51,7 @@ ways to get your application signed and notarized.
 
 If you're using Electron's favorite build tool, getting your application signed
 and notarized requires a few additions to your configuration. [Forge](https://electronforge.io) is a
-collection of the official Electron tools, using [`electron-packager`][],
+collection of the official Electron tools, using [`@electron/packager`][],
 [`@electron/osx-sign`][], and [`@electron/notarize`][] under the hood.
 
 Detailed instructions on how to configure your application can be found in the
@@ -61,14 +61,14 @@ the Electron Forge docs.
 ### Using Electron Packager
 
 If you're not using an integrated build pipeline like Forge, you
-are likely using [`electron-packager`][], which includes [`@electron/osx-sign`][] and
+are likely using [`@electron/packager`][], which includes [`@electron/osx-sign`][] and
 [`@electron/notarize`][].
 
 If you're using Packager's API, you can pass [in configuration that both signs
-and notarizes your application](https://electron.github.io/electron-packager/main/interfaces/electronpackager.options.html).
+and notarizes your application](https://electron.github.io/packager/main/interfaces/electronpackager.options.html).
 
 ```js @ts-nocheck
-const packager = require('electron-packager')
+const packager = require('@electron/packager')
 
 packager({
   dir: '/path/to/my/app',
@@ -169,11 +169,11 @@ const supportBinaries = await msiCreator.create()
 
 // 🆕 Step 2a: optionally sign support binaries if you
 // sign you binaries as part of of your packaging script
-supportBinaries.forEach(async (binary) => {
+for (const binary of supportBinaries) {
   // Binaries are the new stub executable and optionally
   // the Squirrel auto updater.
   await signFile(binary)
-})
+}
 
 // Step 3: Compile the template to a .msi file
 await msiCreator.compile()
@@ -192,7 +192,7 @@ See the [Windows Store Guide][].
 
 [apple developer program]: https://developer.apple.com/programs/
 [`@electron/osx-sign`]: https://github.com/electron/osx-sign
-[`electron-packager`]: https://github.com/electron/electron-packager
+[`@electron/packager`]: https://github.com/electron/packager
 [`@electron/notarize`]: https://github.com/electron/notarize
 [`electron-winstaller`]: https://github.com/electron/windows-installer
 [`electron-wix-msi`]: https://github.com/electron-userland/electron-wix-msi
diff --git a/docs/latest/tutorial/dark-mode.md b/docs/latest/tutorial/dark-mode.md
index b4a578c6c..6cb649b1c 100644
--- a/docs/latest/tutorial/dark-mode.md
+++ b/docs/latest/tutorial/dark-mode.md
@@ -206,7 +206,7 @@ Run the example using Electron Fiddle and then click the "Toggle Dark Mode" butt
 
 [system-wide-dark-mode]: https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/dark-mode/
 [electron-forge]: https://www.electronforge.io/
-[electron-packager]: https://github.com/electron/electron-packager
-[packager-darwindarkmode-api]: https://electron.github.io/electron-packager/main/interfaces/electronpackager.options.html#darwindarkmodesupport
+[electron-packager]: https://github.com/electron/packager
+[packager-darwindarkmode-api]: https://electron.github.io/packager/main/interfaces/electronpackager.options.html#darwindarkmodesupport
 [prefers-color-scheme]: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
 [event-listeners]: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
diff --git a/docs/latest/tutorial/electron-timelines.md b/docs/latest/tutorial/electron-timelines.md
index 260e95b8c..527491b59 100644
--- a/docs/latest/tutorial/electron-timelines.md
+++ b/docs/latest/tutorial/electron-timelines.md
@@ -16,10 +16,11 @@ check out our [Electron Versioning](latest/tutorial/electron-versioning.md) doc.
 
 | Electron | Alpha | Beta | Stable | EOL | Chrome | Node | Supported |
 | ------- | ----- | ------- | ------ | ------ | ---- | ---- | ---- |
-| 28.0.0 |  2023-Oct-11 | 2023-Nov-6 | 2023-Dec-5 | TBD | M120 | TBD | ✅ |
+| 29.0.0 |  2023-Dec-07 | 2023-Jan-24 | 2023-Feb-20 | 2024-Aug-20 | M122 | v18.19 | ✅ |
+| 28.0.0 |  2023-Oct-11 | 2023-Nov-06 | 2023-Dec-05 | 2024-Jun-11 | M120 | v18.18 | ✅ |
 | 27.0.0 |  2023-Aug-17 | 2023-Sep-13 | 2023-Oct-10 | 2024-Apr-16 | M118 | v18.17 | ✅ |
-| 26.0.0 | 2023-Jun-01 | 2023-Jun-27 | 2023-Aug-15 | 2024-Feb-27 | M116 | v18.16 | ✅ |
-| 25.0.0 | 2023-Apr-10 | 2023-May-02 | 2023-May-30 | 2024-Jan-02 | M114 | v18.15 | ✅ |
+| 26.0.0 | 2023-Jun-01 | 2023-Jun-27 | 2023-Aug-15 | 2024-Feb-20 | M116 | v18.16 | ✅ |
+| 25.0.0 | 2023-Apr-10 | 2023-May-02 | 2023-May-30 | 2023-Dec-05 | M114 | v18.15 | 🚫 |
 | 24.0.0 | 2023-Feb-09 | 2023-Mar-07 | 2023-Apr-04 | 2023-Oct-10 | M112 | v18.14 | 🚫 |
 | 23.0.0 | 2022-Dec-01 | 2023-Jan-10 | 2023-Feb-07 | 2023-Aug-15 | M110 | v18.12 | 🚫 |
 | 22.0.0 | 2022-Sep-29 | 2022-Oct-25 | 2022-Nov-29 | 2023-Oct-10 | M108 | v16.17 | 🚫 |
diff --git a/docs/latest/tutorial/esm.md b/docs/latest/tutorial/esm.md
new file mode 100644
index 000000000..4761883e1
--- /dev/null
+++ b/docs/latest/tutorial/esm.md
@@ -0,0 +1,172 @@
+---
+title: "ES Modules (ESM) in Electron"
+description: "The ES module (ESM) format is the standard way of loading JavaScript packages."
+slug: esm
+hide_title: false
+---
+
+# ES Modules (ESM) in Electron
+
+## Introduction
+
+The ECMAScript module (ESM) format is [the standard way of loading JavaScript packages](https://tc39.es/ecma262/#sec-modules).
+
+Chromium and Node.js have their own implementations of the ESM specification, and Electron
+chooses which module loader to use depending on the context.
+
+This document serves to outline the limitations of ESM in Electron and the differences between
+ESM in Electron and ESM in Node.js and Chromium.
+
+:::info
+
+This feature was added in `electron@28.0.0`.
+
+:::
+
+## Summary: ESM support matrix
+
+This table gives a general overview of where ESM is supported and which ESM loader is used.
+
+| Process              | ESM Loader | ESM Loader in Preload | Applicable Requirements |
+|----------------------|------------|-----------------------|-------------------------|
+| Main                 | Node.js    | N/A                   | <ul><li> [You must use `await` generously before the app's `ready` event](#you-must-use-await-generously-before-the-apps-ready-event) </li></ul> |
+| Renderer (Sandboxed) | Chromium   | Unsupported           | <ul><li> [Sandboxed preload scripts can't use ESM imports](#sandboxed-preload-scripts-cant-use-esm-imports) </li></ul> |
+| Renderer (Unsandboxed & Context Isolated) | Chromium | Node.js | <ul><li> [Unsandboxed ESM preload scripts will run after page load on pages with no content](#unsandboxed-esm-preload-scripts-will-run-after-page-load-on-pages-with-no-content) </li> <li>[ESM Preload Scripts must have the `.mjs` extension](#esm-preload-scripts-must-have-the-mjs-extension)</li></ul> |
+| Renderer (Unsandboxed & Non Context Isolated) | Chromium | Node.js | <ul><li>[Unsandboxed ESM preload scripts will run after page load on pages with no content](#unsandboxed-esm-preload-scripts-will-run-after-page-load-on-pages-with-no-content)</li><li>[ESM Preload Scripts must have the `.mjs` extension](#esm-preload-scripts-must-have-the-mjs-extension)</li><li>[ESM preload scripts must be context isolated to use dynamic Node.js ESM imports](#esm-preload-scripts-must-be-context-isolated-to-use-dynamic-nodejs-esm-imports)</li></ul> |
+
+## Main process
+
+Electron's main process runs in a Node.js context and uses its ESM loader. Usage should follow
+[Node's ESM documentation](https://nodejs.org/api/esm.html). To enable ESM in a file in the
+main process, one of the following conditions must be met:
+
+- The file ends with the `.mjs` extension
+- The nearest parent package.json has `"type": "module"` set
+
+See Node's [Determining Module System](https://nodejs.org/api/packages.html#determining-module-system)
+doc for more details.
+
+### Caveats
+
+#### You must use `await` generously before the app's `ready` event
+
+ES Modules are loaded **asynchronously**. This means that only side effects
+from the main process entry point's imports will execute before the `ready` event.
+
+This is important because certain Electron APIs (e.g. [`app.setPath`](latest/api/app.md#appsetpathname-path))
+need to be called **before** the app's `ready` event is emitted.
+
+With top-level `await` available in Node.js ESM, make sure to `await` every Promise that you need to
+execute before the `ready` event. Otherwise, your app may be `ready` before your code executes.
+
+This is particularly important to keep in mind for dynamic ESM import statmements (static imports are unaffected).
+For example, if `index.mjs` calls `import('./set-up-paths.mjs')` at the top level, the app will
+likely already be `ready` by the time that dynamic import resolves.
+
+```js @ts-expect-error=[2] title='index.mjs (Main Process)'
+// add an await call here to guarantee that path setup will finish before `ready`
+import('./set-up-paths.mjs')
+
+app.whenReady().then(() => {
+  console.log('This code may execute before the above import')
+})
+```
+
+:::caution Transpiler translations
+
+JavaScript transpilers (e.g. Babel, TypeScript) have historically supported ES Module
+syntax before Node.js supported ESM imports by turning these calls to CommonJS
+`require` calls.
+
+<details><summary>Example: @babel/plugin-transform-modules-commonjs</summary>
+
+The `@babel/plugin-transform-modules-commonjs` plugin will transform
+ESM imports down to `require` calls. The exact syntax will depend on the
+[`importInterop` setting](https://babeljs.io/docs/babel-plugin-transform-modules-commonjs#importinterop).
+
+```js @nolint @ts-nocheck title='@babel/plugin-transform-modules-commonjs'
+import foo from "foo";
+import { bar } from "bar";
+foo;
+bar;
+
+// with "importInterop: node", compiles to ...
+
+"use strict";
+
+var _foo = require("foo");
+var _bar = require("bar");
+
+_foo;
+_bar.bar;
+```
+
+</details>
+
+These CommonJS calls load module code synchronously. If you are migrating transpiled CJS code
+to native ESM, be careful about the timing differences between CJS and ESM.
+
+:::
+
+## Renderer process
+
+Electron's renderer processes run in a Chromium context and will use Chromium's ESM loader.
+In practice, this means that `import` statements:
+
+- will not have access to Node.js built-in modules
+- will not be able to load npm packages from `node_modules`
+
+```html
+<script type="module">
+    import { exists } from 'node:fs' // ❌ will not work!
+</script>
+```
+
+If you wish to load JavaScript packages via npm directly into the renderer process, we recommend
+using a bundler such as webpack or Vite to compile your code for client-side consumption.
+
+## Preload scripts
+
+A renderer's preload script will use the Node.js ESM loader _when available_.
+ESM availability will depend on the values of its renderer's `sandbox` and `contextIsolation`
+preferences, and comes with a few other caveats due to the asynchronous nature of ESM loading.
+
+### Caveats
+
+#### ESM preload scripts must have the `.mjs` extension
+
+Preload scripts will ignore `"type": "module"` fields, so you _must_ use the `.mjs` file
+extension in your ESM preload scripts.
+
+#### Sandboxed preload scripts can't use ESM imports
+
+Sandboxed preload scripts are run as plain JavaScript without an ESM context. If you need to
+use external modules, we recommend using a bundler for your preload code. Loading the
+`electron` API is still done via `require('electron')`.
+
+For more information on sandboxing, see the [Process Sandboxing](latest/tutorial/sandbox.md) docs.
+
+#### Unsandboxed ESM preload scripts will run after page load on pages with no content
+
+If the response body for a renderer's loaded page is _completely_ empty (i.e. `Content-Length: 0`),
+its preload script will not block the page load, which may result in race conditions.
+
+If this impacts you, change your response body to have _something_ in it
+(e.g. an empty `html` tag (`<html></html>`)) or swap back to using a CommonJS preload script
+(`.js` or `.cjs`), which will block the page load.
+
+### ESM preload scripts must be context isolated to use dynamic Node.js ESM imports
+
+If your unsandboxed renderer process does not have the `contextIsolation` flag enabled,
+you cannot dynamically `import()` files via Node's ESM loader.
+
+```js @ts-nocheck title='preload.mjs'
+// ❌ these won't work without context isolation
+const fs = await import('node:fs')
+await import('./foo')
+```
+
+This is because Chromium's dynamic ESM `import()` function usually takes precedence in the
+renderer process and without context isolation, there is no way of knowing if Node.js is available
+in a dynamic import statement. If you enable context isolation, `import()` statements
+from the renderer's isolated preload context can be routed to the Node.js module loader.
diff --git a/docs/latest/tutorial/in-app-purchases.md b/docs/latest/tutorial/in-app-purchases.md
index 3e87e8972..d84ed08c8 100644
--- a/docs/latest/tutorial/in-app-purchases.md
+++ b/docs/latest/tutorial/in-app-purchases.md
@@ -46,7 +46,7 @@ inAppPurchase.on('transactions-updated', (event, transactions) => {
   }
 
   // Check each transaction.
-  transactions.forEach((transaction) => {
+  for (const transaction of transactions) {
     const payment = transaction.payment
 
     switch (transaction.transactionState) {
@@ -95,7 +95,7 @@ inAppPurchase.on('transactions-updated', (event, transactions) => {
       default:
         break
     }
-  })
+  }
 })
 
 // Check if the user is allowed to make in-app purchase.
@@ -112,9 +112,9 @@ inAppPurchase.getProducts(PRODUCT_IDS).then(products => {
   }
 
   // Display the name and price of each product.
-  products.forEach(product => {
+  for (const product of products) {
     console.log(`The price of ${product.localizedTitle} is ${product.formattedPrice}.`)
-  })
+  }
 
   // Ask the user which product they want to purchase.
   const selectedProduct = products[0]
diff --git a/docs/latest/tutorial/ipc.md b/docs/latest/tutorial/ipc.md
index e9c289de2..d7323fa82 100644
--- a/docs/latest/tutorial/ipc.md
+++ b/docs/latest/tutorial/ipc.md
@@ -447,7 +447,7 @@ modules in the preload script to expose IPC functionality to the renderer proces
 const { contextBridge, ipcRenderer } = require('electron')
 
 contextBridge.exposeInMainWorld('electronAPI', {
-  onUpdateCounter: (callback) => ipcRenderer.on('update-counter', callback)
+  onUpdateCounter: (callback) => ipcRenderer.on('update-counter', (_event, value) => callback(value))
 })
 ```
 
@@ -458,6 +458,8 @@ After loading the preload script, your renderer process should have access to th
 
 We don't directly expose the whole `ipcRenderer.on` API for [security reasons][]. Make sure to
 limit the renderer's access to Electron APIs as much as possible.
+Also don't just pass the callback to `ipcRenderer.on` as this will leak `ipcRenderer` via `event.sender`.
+Use a custom handler that invoke the `callback` only with the desired arguments.
 
 :::
 
@@ -508,10 +510,10 @@ To tie it all together, we'll create an interface in the loaded HTML file that c
 Finally, to make the values update in the HTML document, we'll add a few lines of DOM manipulation
 so that the value of the `#counter` element is updated whenever we fire an `update-counter` event.
 
-```js title='renderer.js (Renderer Process)' @ts-window-type={electronAPI:{onUpdateCounter:(callback:(event:Electron.IpcRendererEvent,value:number)=>void)=>void}}
+```js title='renderer.js (Renderer Process)' @ts-window-type={electronAPI:{onUpdateCounter:(callback:(value:number)=>void)=>void}}
 const counter = document.getElementById('counter')
 
-window.electronAPI.onUpdateCounter((_event, value) => {
+window.electronAPI.onUpdateCounter((value) => {
   const oldValue = Number(counter.innerText)
   const newValue = oldValue + value
   counter.innerText = newValue.toString()
@@ -528,17 +530,26 @@ There's no equivalent for `ipcRenderer.invoke` for main-to-renderer IPC. Instead
 send a reply back to the main process from within the `ipcRenderer.on` callback.
 
 We can demonstrate this with slight modifications to the code from the previous example. In the
-renderer process, use the `event` parameter to send a reply back to the main process through the
+renderer process, expose another API to send a reply back to the main process through the
 `counter-value` channel.
 
-```js title='renderer.js (Renderer Process)' @ts-window-type={electronAPI:{onUpdateCounter:(callback:(event:Electron.IpcRendererEvent,value:number)=>void)=>void}}
+```js title='preload.js (Preload Script)'
+const { contextBridge, ipcRenderer } = require('electron')
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  onUpdateCounter: (callback) => ipcRenderer.on('update-counter', (_event, value) => callback(value)),
+  counterValue: (value) => ipcRenderer.send('counter-value', value)
+})
+```
+
+```js title='renderer.js (Renderer Process)' @ts-window-type={electronAPI:{onUpdateCounter:(callback:(value:number)=>void)=>void,counterValue:(value:number)=>void}}
 const counter = document.getElementById('counter')
 
-window.electronAPI.onUpdateCounter((event, value) => {
+window.electronAPI.onUpdateCounter((value) => {
   const oldValue = Number(counter.innerText)
   const newValue = oldValue + value
   counter.innerText = newValue.toString()
-  event.sender.send('counter-value', newValue)
+  window.electronAPI.counterValue(newValue)
 })
 ```
 
diff --git a/docs/latest/tutorial/keyboard-shortcuts.md b/docs/latest/tutorial/keyboard-shortcuts.md
index ce692dd22..24198842d 100644
--- a/docs/latest/tutorial/keyboard-shortcuts.md
+++ b/docs/latest/tutorial/keyboard-shortcuts.md
@@ -24,7 +24,7 @@ Starting with a working application from the
 [Quick Start Guide](latest/tutorial/quick-start.md), update the `main.js` to be:
 
 ```fiddle docs/latest/fiddles/features/keyboard-shortcuts/local
-const { app, BrowserWindow, Menu, MenuItem } = require('electron')
+const { app, BrowserWindow, Menu, MenuItem } = require('electron/main')
 
 function createWindow () {
   const win = new BrowserWindow({
@@ -85,7 +85,7 @@ Starting with a working application from the
 [Quick Start Guide](latest/tutorial/quick-start.md), update the `main.js` to be:
 
 ```fiddle docs/latest/fiddles/features/keyboard-shortcuts/global
-const { app, BrowserWindow, globalShortcut } = require('electron')
+const { app, BrowserWindow, globalShortcut } = require('electron/main')
 
 function createWindow () {
   const win = new BrowserWindow({
@@ -155,7 +155,7 @@ Starting with a working application from the
 following lines:
 
 ```fiddle docs/latest/fiddles/features/keyboard-shortcuts/interception-from-main
-const { app, BrowserWindow } = require('electron')
+const { app, BrowserWindow } = require('electron/main')
 
 app.whenReady().then(() => {
   const win = new BrowserWindow({ width: 800, height: 600 })
diff --git a/docs/latest/tutorial/launch-app-from-url-in-another-app.md b/docs/latest/tutorial/launch-app-from-url-in-another-app.md
index fed9f2ea7..49cf3c49a 100644
--- a/docs/latest/tutorial/launch-app-from-url-in-another-app.md
+++ b/docs/latest/tutorial/launch-app-from-url-in-another-app.md
@@ -159,7 +159,7 @@ shows the bare minimum needed to add the configuration changes)_:
 }
 ```
 
-#### [Electron Packager](https://github.com/electron/electron-packager)
+#### [Electron Packager](https://github.com/electron/packager)
 
 For macOS support:
 
@@ -168,7 +168,7 @@ Electron Forge is handled, except
 `protocols` is part of the Packager options passed to the `packager` function.
 
 ```js @ts-nocheck
-const packager = require('electron-packager')
+const packager = require('@electron/packager')
 
 packager({
   // ...other options...
diff --git a/docs/latest/tutorial/macos-dock.md b/docs/latest/tutorial/macos-dock.md
index 0f5c384a6..6316d0160 100644
--- a/docs/latest/tutorial/macos-dock.md
+++ b/docs/latest/tutorial/macos-dock.md
@@ -24,7 +24,7 @@ To set your custom dock menu, you need to use the
 which is only available on macOS.
 
 ```fiddle docs/latest/fiddles/features/macos-dock-menu
-const { app, BrowserWindow, Menu } = require('electron')
+const { app, BrowserWindow, Menu } = require('electron/main')
 
 function createWindow () {
   const win = new BrowserWindow({
diff --git a/docs/latest/tutorial/message-ports.md b/docs/latest/tutorial/message-ports.md
index 1612d0826..b8da14a88 100644
--- a/docs/latest/tutorial/message-ports.md
+++ b/docs/latest/tutorial/message-ports.md
@@ -372,7 +372,7 @@ window.onmessage = (event) => {
     // process.
     port.onmessage = (event) => {
       console.log('from main process:', event.data)
-      port.postMessage(event.data * 2)
+      port.postMessage(event.data.test * 2)
     }
   }
 }
diff --git a/docs/latest/tutorial/native-file-drag-drop.md b/docs/latest/tutorial/native-file-drag-drop.md
index 330e9622f..a94483ad9 100644
--- a/docs/latest/tutorial/native-file-drag-drop.md
+++ b/docs/latest/tutorial/native-file-drag-drop.md
@@ -64,7 +64,7 @@ In the Main process (`main.js` file), expand the received event with a path to t
 being dragged and an icon:
 
 ```fiddle docs/latest/fiddles/features/drag-and-drop
-const { app, BrowserWindow, ipcMain } = require('electron')
+const { app, BrowserWindow, ipcMain } = require('electron/main')
 const path = require('node:path')
 const fs = require('node:fs')
 const https = require('node:https')
diff --git a/docs/latest/tutorial/notifications.md b/docs/latest/tutorial/notifications.md
index 13090539d..3f0f3a970 100644
--- a/docs/latest/tutorial/notifications.md
+++ b/docs/latest/tutorial/notifications.md
@@ -38,7 +38,7 @@ new Notification({
 Here's a full example that you can open with Electron Fiddle:
 
 ```fiddle docs/latest/fiddles/features/notifications/main
-const { app, BrowserWindow, Notification } = require('electron')
+const { app, BrowserWindow, Notification } = require('electron/main')
 
 function createWindow () {
   const win = new BrowserWindow({
diff --git a/docs/latest/tutorial/offscreen-rendering.md b/docs/latest/tutorial/offscreen-rendering.md
index 92380e027..605c9ae71 100644
--- a/docs/latest/tutorial/offscreen-rendering.md
+++ b/docs/latest/tutorial/offscreen-rendering.md
@@ -47,7 +47,7 @@ To enable this mode, GPU acceleration has to be disabled by calling the
 ## Example
 
 ```fiddle docs/latest/fiddles/features/offscreen-rendering
-const { app, BrowserWindow } = require('electron')
+const { app, BrowserWindow } = require('electron/main')
 const fs = require('node:fs')
 const path = require('node:path')
 
diff --git a/docs/latest/tutorial/progress-bar.md b/docs/latest/tutorial/progress-bar.md
index 0e6add7d0..69ad21b49 100644
--- a/docs/latest/tutorial/progress-bar.md
+++ b/docs/latest/tutorial/progress-bar.md
@@ -51,7 +51,7 @@ In this example, we add a progress bar to the main window that increments over t
 using Node.js timers.
 
 ```fiddle docs/latest/fiddles/features/progress-bar
-const { app, BrowserWindow } = require('electron')
+const { app, BrowserWindow } = require('electron/main')
 
 let progressInterval
 
diff --git a/docs/latest/tutorial/quick-start.md b/docs/latest/tutorial/quick-start.md
index 442129d2e..8cf3ac471 100644
--- a/docs/latest/tutorial/quick-start.md
+++ b/docs/latest/tutorial/quick-start.md
@@ -466,7 +466,14 @@ To summarize all the steps we've done:
 The fastest way to distribute your newly created app is using
 [Electron Forge](https://www.electronforge.io).
 
-1. Add Electron Forge as a development dependency of your app, and use its `import` command to set up
+:::info
+
+To build an RPM package for Linux, you will need to [install its required system dependencies](https://www.electronforge.io/config/makers/rpm).
+
+:::
+
+1. Add a description to your `package.json` file, otherwise rpmbuild will fail. Blank description are not valid.
+2. Add Electron Forge as a development dependency of your app, and use its `import` command to set up
 Forge's scaffolding:
 
    ```sh npm2yarn
@@ -485,7 +492,7 @@ Forge's scaffolding:
    Thanks for using "electron-forge"!!!
    ```
 
-2. Create a distributable using Forge's `make` command:
+3. Create a distributable using Forge's `make` command:
 
    ```sh npm2yarn
    npm run make
diff --git a/docs/latest/tutorial/recent-documents.md b/docs/latest/tutorial/recent-documents.md
index 50eec4fc5..5a8024f9e 100644
--- a/docs/latest/tutorial/recent-documents.md
+++ b/docs/latest/tutorial/recent-documents.md
@@ -25,7 +25,7 @@ the application via JumpList or dock menu, respectively.
 ### Managing recent documents
 
 ```fiddle docs/latest/fiddles/features/recent-documents
-const { app, BrowserWindow } = require('electron')
+const { app, BrowserWindow } = require('electron/main')
 const fs = require('node:fs')
 const path = require('node:path')
 
diff --git a/docs/latest/tutorial/represented-file.md b/docs/latest/tutorial/represented-file.md
index 424331e0f..0c0020ac2 100644
--- a/docs/latest/tutorial/represented-file.md
+++ b/docs/latest/tutorial/represented-file.md
@@ -28,7 +28,7 @@ To set the represented file of window, you can use the
 ## Example
 
 ```fiddle docs/latest/fiddles/features/represented-file
-const { app, BrowserWindow } = require('electron')
+const { app, BrowserWindow } = require('electron/main')
 const os = require('node:os')
 
 function createWindow () {
diff --git a/docs/latest/tutorial/snapcraft.md b/docs/latest/tutorial/snapcraft.md
index 9fdc47724..474cae1d2 100644
--- a/docs/latest/tutorial/snapcraft.md
+++ b/docs/latest/tutorial/snapcraft.md
@@ -23,7 +23,7 @@ There are three ways to create a `.snap` file:
 1) Using [Electron Forge][electron-forge] or
    [`electron-builder`][electron-builder], both tools that come with `snap`
    support out of the box. This is the easiest option.
-2) Using `electron-installer-snap`, which takes `electron-packager`'s output.
+2) Using `electron-installer-snap`, which takes `@electron/packager`'s output.
 3) Using an already created `.deb` package.
 
 In some cases, you will need to have the `snapcraft` tool installed.
@@ -42,7 +42,7 @@ npm install --save-dev electron-installer-snap
 
 ### Step 1: Package Your Electron Application
 
-Package the application using [electron-packager][electron-packager] (or a
+Package the application using [@electron/packager][electron-packager] (or a
 similar tool). Make sure to remove `node_modules` that you don't need in your
 final application, since any module you don't actually need will increase
 your application's size.
@@ -86,7 +86,7 @@ snap(options)
   .then(snapPath => console.log(`Created snap at ${snapPath}!`))
 ```
 
-## Using `snapcraft` with `electron-packager`
+## Using `snapcraft` with `@electron/packager`
 
 ### Step 1: Create Sample Snapcraft Project
 
@@ -120,7 +120,7 @@ parts:
     plugin: nil
     source: https://github.com/electron/electron-quick-start.git
     override-build: |
-        npm install electron electron-packager
+        npm install electron @electron/packager
         npx electron-packager . --overwrite --platform=linux --output=release-build --prune=true
         cp -rv ./electron-quick-start-linux-* $SNAPCRAFT_PART_INSTALL/electron-quick-start
     build-snaps:
@@ -273,7 +273,7 @@ Finally, configure your application's environment for PipeWire:
 ```
 
 [snapcraft-syntax]: https://docs.snapcraft.io/build-snaps/syntax
-[electron-packager]: https://github.com/electron/electron-packager
+[electron-packager]: https://github.com/electron/packager
 [electron-forge]: https://github.com/electron/forge
 [electron-builder]: https://github.com/electron-userland/electron-builder
 [electron-installer-debian]: https://github.com/electron-userland/electron-installer-debian
diff --git a/docs/latest/tutorial/tutorial-2-first-app.md b/docs/latest/tutorial/tutorial-2-first-app.md
index 388eb6d03..29d91dbad 100644
--- a/docs/latest/tutorial/tutorial-2-first-app.md
+++ b/docs/latest/tutorial/tutorial-2-first-app.md
@@ -243,11 +243,11 @@ const { app, BrowserWindow } = require('electron/main')
 For more information, see the [Process Model docs](latest/tutorial/process-model.md#process-specific-module-aliases-typescript).
 </details>
 
-:::warning ES Modules in Electron
+:::info ES Modules in Electron
 
 [ECMAScript modules](https://nodejs.org/api/esm.html) (i.e. using `import` to load a module)
-are currently not directly supported in Electron. You can find more information about the
-state of ESM in Electron in [electron/electron#21457](https://github.com/electron/electron/issues/21457).
+are supported in Electron as of Electron 28. You can find more information about the
+state of ESM in Electron and how to use them in our app in [our ESM guide](latest/tutorial/esm.md).
 
 :::
 
diff --git a/docs/latest/tutorial/tutorial-5-packaging.md b/docs/latest/tutorial/tutorial-5-packaging.md
index 41378ef09..86de5605d 100644
--- a/docs/latest/tutorial/tutorial-5-packaging.md
+++ b/docs/latest/tutorial/tutorial-5-packaging.md
@@ -35,7 +35,7 @@ as a **distributable**). Distributables can be either installers (e.g. MSI on Wi
 portable executable files (e.g. `.app` on macOS).
 
 Electron Forge is an all-in-one tool that handles the packaging and distribution of Electron
-apps. Under the hood, it combines a lot of existing Electron tools (e.g. [`electron-packager`][],
+apps. Under the hood, it combines a lot of existing Electron tools (e.g. [`@electron/packager`][],
 [`@electron/osx-sign`][], [`electron-winstaller`][], etc.) into a single interface so you do not
 have to worry about wiring them all together.
 
@@ -200,7 +200,7 @@ information.
 
 [`@electron/osx-sign`]: https://github.com/electron/osx-sign
 [application packaging]: latest/tutorial/application-distribution.md
-[`electron-packager`]: https://github.com/electron/electron-packager
+[`@electron/packager`]: https://github.com/electron/packager
 [`electron-winstaller`]: https://github.com/electron/windows-installer
 [electron forge]: https://www.electronforge.io
 [electron forge cli documentation]: https://www.electronforge.io/cli#commands
diff --git a/docs/latest/tutorial/using-native-node-modules.md b/docs/latest/tutorial/using-native-node-modules.md
index b2f119963..c2fbe49bc 100644
--- a/docs/latest/tutorial/using-native-node-modules.md
+++ b/docs/latest/tutorial/using-native-node-modules.md
@@ -176,5 +176,5 @@ environment variable.
 [abi]: https://en.wikipedia.org/wiki/Application_binary_interface
 [@electron/rebuild]: https://github.com/electron/rebuild
 [electron-forge]: https://electronforge.io/
-[electron-packager]: https://github.com/electron/electron-packager
+[electron-packager]: https://github.com/electron/packager
 [node-pre-gyp]: https://github.com/mapbox/node-pre-gyp
diff --git a/docs/latest/tutorial/windows-store-guide.md b/docs/latest/tutorial/windows-store-guide.md
index 20e37577a..6a1b45551 100644
--- a/docs/latest/tutorial/windows-store-guide.md
+++ b/docs/latest/tutorial/windows-store-guide.md
@@ -49,7 +49,7 @@ npm install -g electron-windows-store
 
 ## Step 1: Package Your Electron Application
 
-Package the application using [electron-packager][electron-packager] (or a similar tool).
+Package the application using [`@electron/packager`][electron-packager] (or a similar tool).
 Make sure to remove `node_modules` that you don't need in your final application, since
 any module you don't actually need will increase your application's size.
 
@@ -158,7 +158,7 @@ Once installation succeeded, you can move on to compiling your Electron app.
 [windows-sdk]: https://developer.microsoft.com/en-us/windows/downloads/windows-sdk/
 [app-converter]: https://learn.microsoft.com/en-us/windows/msix/packaging-tool/tool-overview
 [add-appxpackage]: https://learn.microsoft.com/en-us/previous-versions//hh856048(v=technet.10)?redirectedfrom=MSDN
-[electron-packager]: https://github.com/electron/electron-packager
+[electron-packager]: https://github.com/electron/packager
 [electron-windows-store]: https://github.com/electron-userland/electron-windows-store
 [background-task]: https://github.com/felixrieseberg/electron-uwp-background
 [centennial-campaigns]: https://developer.microsoft.com/en-us/windows/projects/campaigns/desktop-bridge
diff --git a/sidebars.js b/sidebars.js
index f9e3a81a3..9e60d7bab 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -207,6 +207,7 @@ module.exports = {
         },
       ],
     },
+    { type: 'category', label: 'Tutorial', items: ['latest/tutorial/esm'] },
   ],
   api: [
     {