The ipc
(inter-process communication) module allows you to send
- Using ipc
to send messages between processes asynchronously is the preferred method since it will return when finished without blocking other operations in the same process.
+
Using ipc
to send messages between processes asynchronously is the preferred method since it will return when finished without blocking other operations in the same process.
This example sends a "ping" from this process (renderer) to the main process. The main process then replies with "pong".
Renderer Process
-
+
Main Process
@@ -37,7 +37,7 @@ Main Process
@@ -47,7 +47,7 @@ Main Process
You can use the ipc
module to send synchronous messages between processes as well, but note that the synchronous nature of this method means that it will block other operations while completing its task.
This example sends a synchronous message, "ping", from this process (renderer) to the main process. The main process then replies with "pong".
Renderer Process
-
+
Main Process
@@ -57,7 +57,7 @@ Main Process
@@ -66,9 +66,9 @@ Main Process
It is common practice to create a new invisible browser window (renderer process) in order to run tasks without impacting performance in the main app's window.
In this example we use the remote
module to create a new invisible browser window from this renderer process. When the new page is loaded we send a message with ipc
that the new window is listening for.
- The new window then computes the factorial and sends the result to be recieved by this, the original, window and added to the page above.
+ The new window then computes the factorial and sends the result to be received by this, the original, window and added to the page above.
Renderer Process
-
+
Invisible Window Page HTML
diff --git a/sections/media/desktop-capturer.html b/sections/media/desktop-capturer.html
index 6efa0dcd..eb30558e 100644
--- a/sections/media/desktop-capturer.html
+++ b/sections/media/desktop-capturer.html
@@ -15,7 +15,7 @@ The desktopCapturer
module in Electron can be used to access an
@@ -25,7 +25,7 @@ The desktopCapturer
module in Electron can be used to access an
This demo uses the desktopCapturer
module to gather screens in use and select the entire screen and take a snapshot of what is visible.
Clicking the demo button will take a screenshot of your current screen and open it in your default viewer.
Renderer Process
-
+
diff --git a/sections/media/pdf.html b/sections/media/pdf.html
deleted file mode 100644
index 8e1165f0..00000000
--- a/sections/media/pdf.html
+++ /dev/null
@@ -1,47 +0,0 @@
-
-
-
-
-
-
- Print to PDF
-
- The browser window
module in Electron has a property, webContents
, which allows your app to print as well as print to PDF.
-
- Open the full API documentation(opens in new window) in your browser.
-
-
-
-
-
-
-
-
-
-
-
- To demonstrate the print to PDF functionality, the demo button above will save this page as a PDF and, if you have a PDF viewer, open the file.
- In a real-world application you're more likely to add this to application menu, but for the purposes of the demo we've set it to the demo button.
- Renderer Process
-
- Main Process
-
-
-
- ProTip
- Use a print style sheet.
- You can create a stylesheet targeting printing to optimize the look of what your users print. Below is the stylesheet used in this app, located in assets/css/print.css
.
-
-
-
-
-
-
-
-
-
-
diff --git a/sections/menus/menus.html b/sections/menus/menus.html
index fb811f4e..ce97c6ad 100644
--- a/sections/menus/menus.html
+++ b/sections/menus/menus.html
@@ -17,7 +17,7 @@ The Menu
and MenuItem
modules can be used to creat
The Menu
and MenuItem
modules allow you to customize your application menu. If you don't set any menu, Electron will generate a minimal menu for your app by default.
@@ -32,9 +32,9 @@ ProTip
When designing an app for multiple operating systems it's important to be mindful of the ways application menu conventions differ on each operating system.
For instance, on Windows, accelerators are set with an &
. Naming conventions also vary, like between "Settings" or "Preferences". Below are resources for learning operating system specific standards.
@@ -44,7 +44,7 @@ ProTip
@@ -55,9 +55,9 @@ ProTip
In this demo we use the ipcRenderer
module to show the context menu when explicitly calling it from the renderer process.
See the full context-menu event documentation for all the available properties.
Main Process
-
+
Renderer Process
-
+
diff --git a/sections/menus/shortcuts.html b/sections/menus/shortcuts.html
index a42c4925..8e92bb17 100644
--- a/sections/menus/shortcuts.html
+++ b/sections/menus/shortcuts.html
@@ -31,7 +31,7 @@ The globalShortcut
and Menu
modules can be used to
@@ -45,7 +45,7 @@
The globalShortcut
and Menu
modules can be used to
Main Process
-
+
ProTip
@@ -58,7 +58,7 @@ ProTip
diff --git a/sections/native-ui/dialogs.html b/sections/native-ui/dialogs.html
index 3d38d468..dcba6218 100644
--- a/sections/native-ui/dialogs.html
+++ b/sections/native-ui/dialogs.html
@@ -8,7 +8,7 @@
The dialog
module in Electron allows you to use native system dialogs for opening files or directories, saving a file or displaying informational messages.
- This is a main process module because this process is more efficient with native utilities and it allows the call to happen without interupting the visible elements in your page's renderer process.
+ This is a main process module because this process is more efficient with native utilities and it allows the call to happen without interrupting the visible elements in your page's renderer process.
Open the full API documentation(opens in new window) in your browser.
@@ -17,7 +17,7 @@ The dialog
module in Electron allows you to use native system d
@@ -26,14 +26,14 @@ The dialog
module in Electron allows you to use native system d
In this demo, the ipc
module is used to send a message from the renderer process instructing the main process to launch the open file (or directory) dialog. If a file is selected, the main process can send that information back to the renderer process.
Renderer Process
-
+
Main Process
ProTip
- The sheet-style dialog on OS X.
- On OS X you can choose between a "sheet" dialog or a default dialog. The sheet version descends from the top of the window. To use sheet version, pass the window
as the first argument in the dialog method.
+ The sheet-style dialog on macOS.
+ On macOS you can choose between a "sheet" dialog or a default dialog. The sheet version descends from the top of the window. To use sheet version, pass the window
as the first argument in the dialog method.
const ipc = require('electron').ipcMain
const dialog = require('electron').dialog
const BrowserWindow = require('electron').BrowserWindow
@@ -51,7 +51,7 @@ ProTip
@@ -61,7 +61,7 @@ ProTip
You can use an error dialog before the app's ready
event, which is useful for showing errors upon startup.
Renderer Process
-
+
Main Process
@@ -71,7 +71,7 @@ Main Process
@@ -80,11 +80,11 @@ Main Process
In this demo, the ipc
module is used to send a message from the renderer process instructing the main process to launch the information dialog. Options may be provided for responses which can then be relayed back to the renderer process.
- Note: The title
property is not displayed in OS X.
+ Note: The title
property is not displayed in macOS.
An information dialog can contain an icon, your choice of buttons, title and message.
Renderer Process
-
+
Main Process
@@ -94,7 +94,7 @@ Main Process
@@ -103,7 +103,7 @@ Main Process
In this demo, the ipc
module is used to send a message from the renderer process instructing the main process to launch the save dialog. It returns the path selected by the user which can be relayed back to the renderer process.
Renderer Process
-
+
Main Process
diff --git a/sections/native-ui/drag.html b/sections/native-ui/drag.html
new file mode 100644
index 00000000..69844d70
--- /dev/null
+++ b/sections/native-ui/drag.html
@@ -0,0 +1,42 @@
+
+
+
+
+
+
+ Drag and drop files
+
+ Electron supports dragging files and content out from web content into the operating system's world.
+
+ Open the full API documentation(opens in new window) in your browser.
+
+
+
+
+
+
+
+
+ Drag Demo
+
+ Click and drag the link above to copy the renderer process javascript file on to your machine.
+
+ In this demo, the webContents.startDrag()
API is called in response to the ondragstart
event.
+ Renderer Process
+
+ Main Process
+
+
+
+
+
+
+
+
+
+
+
diff --git a/sections/native-ui/ex-links-file-manager.html b/sections/native-ui/ex-links-file-manager.html
index 86983779..da49e7b0 100644
--- a/sections/native-ui/ex-links-file-manager.html
+++ b/sections/native-ui/ex-links-file-manager.html
@@ -16,7 +16,7 @@ The shell
module in Electron allows you to access certain nativ
@@ -25,7 +25,7 @@ The shell
module in Electron allows you to access certain nativ
This demonstrates using the shell
module to open the system file manager at a particular location.
Clicking the demo button will open your file manager at the root.
Renderer Process
-
+
@@ -33,7 +33,7 @@ Renderer Process
@@ -42,14 +42,14 @@ Renderer Process
If you do not want your app to open website links within the app, you can use the shell
module to open them externally. When clicked, the links will open outside of your app and in the user's default web browser.
When the demo button is clicked, the electron website will open in your browser.
Renderer Process
-
+
ProTip
Open all outbound links externally.
- You may want to open all http
and https
links outside of your app. To do this, query the document and loop through each link and add a listener. This app uses the code below which is located in assets/ex-links.js
.
+
You may want to open all http
and https
links outside of your app. To do this, query the document and loop through each link and add a listener. This app uses the code below which is located in assets/ex-links.js
.
Renderer Process
-
+
diff --git a/sections/native-ui/notifications.html b/sections/native-ui/notifications.html
new file mode 100644
index 00000000..46ebcb01
--- /dev/null
+++ b/sections/native-ui/notifications.html
@@ -0,0 +1,57 @@
+
+
+
+
+
+
+ Desktop notifications
+
+ The notification
module in Electron allows you to add basic desktop notifications.
+
+ Electron conveniently allows developers to send notifications with the HTML5 Notification API, using the currently running operating system’s native notification APIs to display it.
+
+ Note: Since this is an HTML5 API it is only available in the renderer process.
+
+ Open the full API documentation(opens in new window) in your browser.
+
+
+
+
+
+
+
+
+
+
+ This demo demonstrates a basic notification. Text only.
+ Renderer Process
+
+
+
+
+
+
+
+
+
+
+
+
+ This demo demonstrates a basic notification. Both text and a image
+ Renderer Process
+
+
+
+
+
+
+
+
+
diff --git a/sections/native-ui/tray.html b/sections/native-ui/tray.html
index a2dc436f..715b2aa0 100644
--- a/sections/native-ui/tray.html
+++ b/sections/native-ui/tray.html
@@ -16,7 +16,7 @@ The tray
module allows you to create an icon in the operating s
@@ -27,9 +27,9 @@ The tray
module allows you to create an icon in the operating s
In this example the tray icon can be removed by clicking 'Remove' in the context menu or selecting the demo button again.
Main Process
-
+
Renderer Process
-
+
ProTip
diff --git a/sections/system/app-sys-information.html b/sections/system/app-sys-information.html
index bee181d6..b60f808a 100644
--- a/sections/system/app-sys-information.html
+++ b/sections/system/app-sys-information.html
@@ -14,7 +14,7 @@ With a few Node.js and Electron modules you can gather information about the
@@ -25,17 +25,17 @@ With a few Node.js and Electron modules you can gather information about the
In this example, to get that information from the renderer process, we use the ipc
module to send a message to the main process requesting the app's path.
See the app module documentation(opens in new window) for more.
Renderer Process
-
+
Main Process
-
+
-
Using ipc
to send messages between processes asynchronously is the preferred method since it will return when finished without blocking other operations in the same process.
+
Using ipc
to send messages between processes asynchronously is the preferred method since it will return when finished without blocking other operations in the same process.
This example sends a "ping" from this process (renderer) to the main process. The main process then replies with "pong".
Renderer Process
-
+
Main Process
Main Process
Main Process
You can use the ipc
module to send synchronous messages between processes as well, but note that the synchronous nature of this method means that it will block other operations while completing its task.
This example sends a synchronous message, "ping", from this process (renderer) to the main process. The main process then replies with "pong".
Renderer Process
-
+
Main Process
Main Process
Main Process
It is common practice to create a new invisible browser window (renderer process) in order to run tasks without impacting performance in the main app's window.
In this example we use the remote
module to create a new invisible browser window from this renderer process. When the new page is loaded we send a message with ipc
that the new window is listening for.
The new window then computes the factorial and sends the result to be recieved by this, the original, window and added to the page above.
+The new window then computes the factorial and sends the result to be received by this, the original, window and added to the page above.
Renderer Process
-
+
Invisible Window Page HTML
The desktopCapturer
module in Electron can be used to access an
@@ -25,7 +25,7 @@ The desktopCapturer
module in Electron can be used to access an
This demo uses the desktopCapturer
module to gather screens in use and select the entire screen and take a snapshot of what is visible.
Clicking the demo button will take a screenshot of your current screen and open it in your default viewer.
Renderer Process
-
+
diff --git a/sections/media/pdf.html b/sections/media/pdf.html
deleted file mode 100644
index 8e1165f0..00000000
--- a/sections/media/pdf.html
+++ /dev/null
@@ -1,47 +0,0 @@
-
-
-
-
-
-
- Print to PDF
-
- The browser window
module in Electron has a property, webContents
, which allows your app to print as well as print to PDF.
-
- Open the full API documentation(opens in new window) in your browser.
-
-
-
-
-
-
-
-
-
-
-
- To demonstrate the print to PDF functionality, the demo button above will save this page as a PDF and, if you have a PDF viewer, open the file.
- In a real-world application you're more likely to add this to application menu, but for the purposes of the demo we've set it to the demo button.
- Renderer Process
-
- Main Process
-
-
-
- ProTip
- Use a print style sheet.
- You can create a stylesheet targeting printing to optimize the look of what your users print. Below is the stylesheet used in this app, located in assets/css/print.css
.
-
-
-
-
-
-
-
-
-
-
diff --git a/sections/menus/menus.html b/sections/menus/menus.html
index fb811f4e..ce97c6ad 100644
--- a/sections/menus/menus.html
+++ b/sections/menus/menus.html
@@ -17,7 +17,7 @@ The Menu
and MenuItem
modules can be used to creat
The Menu
and MenuItem
modules allow you to customize your application menu. If you don't set any menu, Electron will generate a minimal menu for your app by default.
@@ -32,9 +32,9 @@ ProTip
When designing an app for multiple operating systems it's important to be mindful of the ways application menu conventions differ on each operating system.
For instance, on Windows, accelerators are set with an &
. Naming conventions also vary, like between "Settings" or "Preferences". Below are resources for learning operating system specific standards.
@@ -44,7 +44,7 @@ ProTip
@@ -55,9 +55,9 @@ ProTip
In this demo we use the ipcRenderer
module to show the context menu when explicitly calling it from the renderer process.
See the full context-menu event documentation for all the available properties.
Main Process
-
+
Renderer Process
-
+
diff --git a/sections/menus/shortcuts.html b/sections/menus/shortcuts.html
index a42c4925..8e92bb17 100644
--- a/sections/menus/shortcuts.html
+++ b/sections/menus/shortcuts.html
@@ -31,7 +31,7 @@ The globalShortcut
and Menu
modules can be used to
@@ -45,7 +45,7 @@
The globalShortcut
and Menu
modules can be used to
Main Process
-
+
ProTip
@@ -58,7 +58,7 @@ ProTip
diff --git a/sections/native-ui/dialogs.html b/sections/native-ui/dialogs.html
index 3d38d468..dcba6218 100644
--- a/sections/native-ui/dialogs.html
+++ b/sections/native-ui/dialogs.html
@@ -8,7 +8,7 @@
The dialog
module in Electron allows you to use native system dialogs for opening files or directories, saving a file or displaying informational messages.
- This is a main process module because this process is more efficient with native utilities and it allows the call to happen without interupting the visible elements in your page's renderer process.
+ This is a main process module because this process is more efficient with native utilities and it allows the call to happen without interrupting the visible elements in your page's renderer process.
Open the full API documentation(opens in new window) in your browser.
@@ -17,7 +17,7 @@ The dialog
module in Electron allows you to use native system d
@@ -26,14 +26,14 @@ The dialog
module in Electron allows you to use native system d
In this demo, the ipc
module is used to send a message from the renderer process instructing the main process to launch the open file (or directory) dialog. If a file is selected, the main process can send that information back to the renderer process.
Renderer Process
-
+
Main Process
ProTip
- The sheet-style dialog on OS X.
- On OS X you can choose between a "sheet" dialog or a default dialog. The sheet version descends from the top of the window. To use sheet version, pass the window
as the first argument in the dialog method.
+ The sheet-style dialog on macOS.
+ On macOS you can choose between a "sheet" dialog or a default dialog. The sheet version descends from the top of the window. To use sheet version, pass the window
as the first argument in the dialog method.
const ipc = require('electron').ipcMain
const dialog = require('electron').dialog
const BrowserWindow = require('electron').BrowserWindow
@@ -51,7 +51,7 @@ ProTip
@@ -61,7 +61,7 @@ ProTip
You can use an error dialog before the app's ready
event, which is useful for showing errors upon startup.
Renderer Process
-
+
Main Process
@@ -71,7 +71,7 @@ Main Process
@@ -80,11 +80,11 @@ Main Process
In this demo, the ipc
module is used to send a message from the renderer process instructing the main process to launch the information dialog. Options may be provided for responses which can then be relayed back to the renderer process.
- Note: The title
property is not displayed in OS X.
+ Note: The title
property is not displayed in macOS.
An information dialog can contain an icon, your choice of buttons, title and message.
Renderer Process
-
+
Main Process
@@ -94,7 +94,7 @@ Main Process
@@ -103,7 +103,7 @@ Main Process
In this demo, the ipc
module is used to send a message from the renderer process instructing the main process to launch the save dialog. It returns the path selected by the user which can be relayed back to the renderer process.
Renderer Process
-
+
Main Process
diff --git a/sections/native-ui/drag.html b/sections/native-ui/drag.html
new file mode 100644
index 00000000..69844d70
--- /dev/null
+++ b/sections/native-ui/drag.html
@@ -0,0 +1,42 @@
+
+
+
+
+
+
+ Drag and drop files
+
+ Electron supports dragging files and content out from web content into the operating system's world.
+
+ Open the full API documentation(opens in new window) in your browser.
+
+
+
+
+
+
+
+
+ Drag Demo
+
+ Click and drag the link above to copy the renderer process javascript file on to your machine.
+
+ In this demo, the webContents.startDrag()
API is called in response to the ondragstart
event.
+ Renderer Process
+
+ Main Process
+
+
+
+
+
+
+
+
+
+
+
diff --git a/sections/native-ui/ex-links-file-manager.html b/sections/native-ui/ex-links-file-manager.html
index 86983779..da49e7b0 100644
--- a/sections/native-ui/ex-links-file-manager.html
+++ b/sections/native-ui/ex-links-file-manager.html
@@ -16,7 +16,7 @@ The shell
module in Electron allows you to access certain nativ
@@ -25,7 +25,7 @@ The shell
module in Electron allows you to access certain nativ
This demonstrates using the shell
module to open the system file manager at a particular location.
Clicking the demo button will open your file manager at the root.
Renderer Process
-
+
@@ -33,7 +33,7 @@ Renderer Process
@@ -42,14 +42,14 @@ Renderer Process
If you do not want your app to open website links within the app, you can use the shell
module to open them externally. When clicked, the links will open outside of your app and in the user's default web browser.
When the demo button is clicked, the electron website will open in your browser.
Renderer Process
-
+
ProTip
Open all outbound links externally.
- You may want to open all http
and https
links outside of your app. To do this, query the document and loop through each link and add a listener. This app uses the code below which is located in assets/ex-links.js
.
+
You may want to open all http
and https
links outside of your app. To do this, query the document and loop through each link and add a listener. This app uses the code below which is located in assets/ex-links.js
.
Renderer Process
-
+
diff --git a/sections/native-ui/notifications.html b/sections/native-ui/notifications.html
new file mode 100644
index 00000000..46ebcb01
--- /dev/null
+++ b/sections/native-ui/notifications.html
@@ -0,0 +1,57 @@
+
+
+
+
+
+
+ Desktop notifications
+
+ The notification
module in Electron allows you to add basic desktop notifications.
+
+ Electron conveniently allows developers to send notifications with the HTML5 Notification API, using the currently running operating system’s native notification APIs to display it.
+
+ Note: Since this is an HTML5 API it is only available in the renderer process.
+
+ Open the full API documentation(opens in new window) in your browser.
+
+
+
+
+
+
+
+
+
+
+ This demo demonstrates a basic notification. Text only.
+ Renderer Process
+
+
+
+
+
+
+
+
+
+
+
+
+ This demo demonstrates a basic notification. Both text and a image
+ Renderer Process
+
+
+
+
+
+
+
+
+
diff --git a/sections/native-ui/tray.html b/sections/native-ui/tray.html
index a2dc436f..715b2aa0 100644
--- a/sections/native-ui/tray.html
+++ b/sections/native-ui/tray.html
@@ -16,7 +16,7 @@ The tray
module allows you to create an icon in the operating s
@@ -27,9 +27,9 @@ The tray
module allows you to create an icon in the operating s
In this example the tray icon can be removed by clicking 'Remove' in the context menu or selecting the demo button again.
Main Process
-
+
Renderer Process
-
+
ProTip
diff --git a/sections/system/app-sys-information.html b/sections/system/app-sys-information.html
index bee181d6..b60f808a 100644
--- a/sections/system/app-sys-information.html
+++ b/sections/system/app-sys-information.html
@@ -14,7 +14,7 @@ With a few Node.js and Electron modules you can gather information about the
@@ -25,17 +25,17 @@ With a few Node.js and Electron modules you can gather information about the
In this example, to get that information from the renderer process, we use the ipc
module to send a message to the main process requesting the app's path.
See the app module documentation(opens in new window) for more.
Renderer Process
-
+
Main Process
-
+
-
The desktopCapturer
module in Electron can be used to access an
This demo uses the desktopCapturer
module to gather screens in use and select the entire screen and take a snapshot of what is visible.
Clicking the demo button will take a screenshot of your current screen and open it in your default viewer.
Renderer Process
-
+
- - Print to PDF -
-The browser window
module in Electron has a property, webContents
, which allows your app to print as well as print to PDF.
-
- Open the full API documentation(opens in new window) in your browser.
-To demonstrate the print to PDF functionality, the demo button above will save this page as a PDF and, if you have a PDF viewer, open the file.
-In a real-world application you're more likely to add this to application menu, but for the purposes of the demo we've set it to the demo button.
-Renderer Process
-
- Main Process
-
-
- ProTip
- Use a print style sheet. -You can create a stylesheet targeting printing to optimize the look of what your users print. Below is the stylesheet used in this app, located in assets/css/print.css
.
- The Menu
and MenuItem
modules can be used to creat
The Menu
and MenuItem
modules allow you to customize your application menu. If you don't set any menu, Electron will generate a minimal menu for your app by default.
@@ -32,9 +32,9 @@ ProTip
When designing an app for multiple operating systems it's important to be mindful of the ways application menu conventions differ on each operating system.
For instance, on Windows, accelerators are set with an &
. Naming conventions also vary, like between "Settings" or "Preferences". Below are resources for learning operating system specific standards.
@@ -44,7 +44,7 @@ ProTip
@@ -55,9 +55,9 @@ ProTip
In this demo we use the ipcRenderer
module to show the context menu when explicitly calling it from the renderer process.
See the full context-menu event documentation for all the available properties.
Main Process
-
+
Renderer Process
-
+
diff --git a/sections/menus/shortcuts.html b/sections/menus/shortcuts.html
index a42c4925..8e92bb17 100644
--- a/sections/menus/shortcuts.html
+++ b/sections/menus/shortcuts.html
@@ -31,7 +31,7 @@ The globalShortcut
and Menu
modules can be used to
@@ -45,7 +45,7 @@
The globalShortcut
and Menu
modules can be used to
Main Process
-
+
ProTip
@@ -58,7 +58,7 @@ ProTip
diff --git a/sections/native-ui/dialogs.html b/sections/native-ui/dialogs.html
index 3d38d468..dcba6218 100644
--- a/sections/native-ui/dialogs.html
+++ b/sections/native-ui/dialogs.html
@@ -8,7 +8,7 @@
The dialog
module in Electron allows you to use native system dialogs for opening files or directories, saving a file or displaying informational messages.
- This is a main process module because this process is more efficient with native utilities and it allows the call to happen without interupting the visible elements in your page's renderer process.
+ This is a main process module because this process is more efficient with native utilities and it allows the call to happen without interrupting the visible elements in your page's renderer process.
Open the full API documentation(opens in new window) in your browser.
@@ -17,7 +17,7 @@ The dialog
module in Electron allows you to use native system d
@@ -26,14 +26,14 @@ The dialog
module in Electron allows you to use native system d
In this demo, the ipc
module is used to send a message from the renderer process instructing the main process to launch the open file (or directory) dialog. If a file is selected, the main process can send that information back to the renderer process.
Renderer Process
-
+
Main Process
ProTip
- The sheet-style dialog on OS X.
- On OS X you can choose between a "sheet" dialog or a default dialog. The sheet version descends from the top of the window. To use sheet version, pass the window
as the first argument in the dialog method.
+ The sheet-style dialog on macOS.
+ On macOS you can choose between a "sheet" dialog or a default dialog. The sheet version descends from the top of the window. To use sheet version, pass the window
as the first argument in the dialog method.
const ipc = require('electron').ipcMain
const dialog = require('electron').dialog
const BrowserWindow = require('electron').BrowserWindow
@@ -51,7 +51,7 @@ ProTip
@@ -61,7 +61,7 @@ ProTip
You can use an error dialog before the app's ready
event, which is useful for showing errors upon startup.
Renderer Process
-
+
Main Process
@@ -71,7 +71,7 @@ Main Process
@@ -80,11 +80,11 @@ Main Process
In this demo, the ipc
module is used to send a message from the renderer process instructing the main process to launch the information dialog. Options may be provided for responses which can then be relayed back to the renderer process.
- Note: The title
property is not displayed in OS X.
+ Note: The title
property is not displayed in macOS.
An information dialog can contain an icon, your choice of buttons, title and message.
Renderer Process
-
+
Main Process
@@ -94,7 +94,7 @@ Main Process
@@ -103,7 +103,7 @@ Main Process
In this demo, the ipc
module is used to send a message from the renderer process instructing the main process to launch the save dialog. It returns the path selected by the user which can be relayed back to the renderer process.
Renderer Process
-
+
Main Process
diff --git a/sections/native-ui/drag.html b/sections/native-ui/drag.html
new file mode 100644
index 00000000..69844d70
--- /dev/null
+++ b/sections/native-ui/drag.html
@@ -0,0 +1,42 @@
+
+
+
+
+
+
+ Drag and drop files
+
+ Electron supports dragging files and content out from web content into the operating system's world.
+
+ Open the full API documentation(opens in new window) in your browser.
+
+
+
+
+
+
+
+
+ Drag Demo
+
+ Click and drag the link above to copy the renderer process javascript file on to your machine.
+
+ In this demo, the webContents.startDrag()
API is called in response to the ondragstart
event.
+ Renderer Process
+
+ Main Process
+
+
+
+
+
+
+
+
+
+
+
diff --git a/sections/native-ui/ex-links-file-manager.html b/sections/native-ui/ex-links-file-manager.html
index 86983779..da49e7b0 100644
--- a/sections/native-ui/ex-links-file-manager.html
+++ b/sections/native-ui/ex-links-file-manager.html
@@ -16,7 +16,7 @@ The shell
module in Electron allows you to access certain nativ
@@ -25,7 +25,7 @@ The shell
module in Electron allows you to access certain nativ
This demonstrates using the shell
module to open the system file manager at a particular location.
Clicking the demo button will open your file manager at the root.
Renderer Process
-
+
@@ -33,7 +33,7 @@ Renderer Process
@@ -42,14 +42,14 @@ Renderer Process
If you do not want your app to open website links within the app, you can use the shell
module to open them externally. When clicked, the links will open outside of your app and in the user's default web browser.
When the demo button is clicked, the electron website will open in your browser.
Renderer Process
-
+
ProTip
Open all outbound links externally.
- You may want to open all http
and https
links outside of your app. To do this, query the document and loop through each link and add a listener. This app uses the code below which is located in assets/ex-links.js
.
+
You may want to open all http
and https
links outside of your app. To do this, query the document and loop through each link and add a listener. This app uses the code below which is located in assets/ex-links.js
.
Renderer Process
-
+
diff --git a/sections/native-ui/notifications.html b/sections/native-ui/notifications.html
new file mode 100644
index 00000000..46ebcb01
--- /dev/null
+++ b/sections/native-ui/notifications.html
@@ -0,0 +1,57 @@
+
+
+
+
+
+
+ Desktop notifications
+
+ The notification
module in Electron allows you to add basic desktop notifications.
+
+ Electron conveniently allows developers to send notifications with the HTML5 Notification API, using the currently running operating system’s native notification APIs to display it.
+
+ Note: Since this is an HTML5 API it is only available in the renderer process.
+
+ Open the full API documentation(opens in new window) in your browser.
+
+
+
+
+
+
+
+
+
+
+ This demo demonstrates a basic notification. Text only.
+ Renderer Process
+
+
+
+
+
+
+
+
+
+
+
+
+ This demo demonstrates a basic notification. Both text and a image
+ Renderer Process
+
+
+
+
+
+
+
+
+
diff --git a/sections/native-ui/tray.html b/sections/native-ui/tray.html
index a2dc436f..715b2aa0 100644
--- a/sections/native-ui/tray.html
+++ b/sections/native-ui/tray.html
@@ -16,7 +16,7 @@ The tray
module allows you to create an icon in the operating s
@@ -27,9 +27,9 @@ The tray
module allows you to create an icon in the operating s
In this example the tray icon can be removed by clicking 'Remove' in the context menu or selecting the demo button again.
Main Process
-
+
Renderer Process
-
+
ProTip
diff --git a/sections/system/app-sys-information.html b/sections/system/app-sys-information.html
index bee181d6..b60f808a 100644
--- a/sections/system/app-sys-information.html
+++ b/sections/system/app-sys-information.html
@@ -14,7 +14,7 @@ With a few Node.js and Electron modules you can gather information about the
@@ -25,17 +25,17 @@ With a few Node.js and Electron modules you can gather information about the
In this example, to get that information from the renderer process, we use the ipc
module to send a message to the main process requesting the app's path.
See the app module documentation(opens in new window) for more.
Renderer Process
-
+
Main Process
-
+
-
The Menu
and MenuItem
modules allow you to customize your application menu. If you don't set any menu, Electron will generate a minimal menu for your app by default.
ProTip
When designing an app for multiple operating systems it's important to be mindful of the ways application menu conventions differ on each operating system.
For instance, on Windows, accelerators are set with an &
. Naming conventions also vary, like between "Settings" or "Preferences". Below are resources for learning operating system specific standards.
ProTip
ProTip
In this demo we use the ipcRenderer
module to show the context menu when explicitly calling it from the renderer process.
See the full context-menu event documentation for all the available properties.
Main Process
-
+
Renderer Process
-
+
The globalShortcut
and Menu
modules can be used to
@@ -45,7 +45,7 @@
The globalShortcut
and Menu
modules can be used to
Main Process
-
+
ProTip
@@ -58,7 +58,7 @@ ProTip
diff --git a/sections/native-ui/dialogs.html b/sections/native-ui/dialogs.html
index 3d38d468..dcba6218 100644
--- a/sections/native-ui/dialogs.html
+++ b/sections/native-ui/dialogs.html
@@ -8,7 +8,7 @@
The dialog
module in Electron allows you to use native system dialogs for opening files or directories, saving a file or displaying informational messages.
- This is a main process module because this process is more efficient with native utilities and it allows the call to happen without interupting the visible elements in your page's renderer process.
+ This is a main process module because this process is more efficient with native utilities and it allows the call to happen without interrupting the visible elements in your page's renderer process.
Open the full API documentation(opens in new window) in your browser.
@@ -17,7 +17,7 @@ The dialog
module in Electron allows you to use native system d
@@ -26,14 +26,14 @@ The dialog
module in Electron allows you to use native system d
In this demo, the ipc
module is used to send a message from the renderer process instructing the main process to launch the open file (or directory) dialog. If a file is selected, the main process can send that information back to the renderer process.
Renderer Process
-
+
Main Process
ProTip
- The sheet-style dialog on OS X.
- On OS X you can choose between a "sheet" dialog or a default dialog. The sheet version descends from the top of the window. To use sheet version, pass the window
as the first argument in the dialog method.
+ The sheet-style dialog on macOS.
+ On macOS you can choose between a "sheet" dialog or a default dialog. The sheet version descends from the top of the window. To use sheet version, pass the window
as the first argument in the dialog method.
const ipc = require('electron').ipcMain
const dialog = require('electron').dialog
const BrowserWindow = require('electron').BrowserWindow
@@ -51,7 +51,7 @@ ProTip
@@ -61,7 +61,7 @@ ProTip
You can use an error dialog before the app's ready
event, which is useful for showing errors upon startup.
Renderer Process
-
+
Main Process
@@ -71,7 +71,7 @@ Main Process
@@ -80,11 +80,11 @@ Main Process
In this demo, the ipc
module is used to send a message from the renderer process instructing the main process to launch the information dialog. Options may be provided for responses which can then be relayed back to the renderer process.
- Note: The title
property is not displayed in OS X.
+ Note: The title
property is not displayed in macOS.
An information dialog can contain an icon, your choice of buttons, title and message.
Renderer Process
-
+
Main Process
@@ -94,7 +94,7 @@ Main Process
@@ -103,7 +103,7 @@ Main Process
In this demo, the ipc
module is used to send a message from the renderer process instructing the main process to launch the save dialog. It returns the path selected by the user which can be relayed back to the renderer process.
Renderer Process
-
+
Main Process
diff --git a/sections/native-ui/drag.html b/sections/native-ui/drag.html
new file mode 100644
index 00000000..69844d70
--- /dev/null
+++ b/sections/native-ui/drag.html
@@ -0,0 +1,42 @@
+
+
+
+
+
+
+ Drag and drop files
+
+ Electron supports dragging files and content out from web content into the operating system's world.
+
+ Open the full API documentation(opens in new window) in your browser.
+
+
+
+
+
+
+
+
+ Drag Demo
+
+ Click and drag the link above to copy the renderer process javascript file on to your machine.
+
+ In this demo, the webContents.startDrag()
API is called in response to the ondragstart
event.
+ Renderer Process
+
+ Main Process
+
+
+
+
+
+
+
+
+
+
+
diff --git a/sections/native-ui/ex-links-file-manager.html b/sections/native-ui/ex-links-file-manager.html
index 86983779..da49e7b0 100644
--- a/sections/native-ui/ex-links-file-manager.html
+++ b/sections/native-ui/ex-links-file-manager.html
@@ -16,7 +16,7 @@ The shell
module in Electron allows you to access certain nativ
@@ -25,7 +25,7 @@ The shell
module in Electron allows you to access certain nativ
This demonstrates using the shell
module to open the system file manager at a particular location.
Clicking the demo button will open your file manager at the root.
Renderer Process
-
+
@@ -33,7 +33,7 @@ Renderer Process
@@ -42,14 +42,14 @@ Renderer Process
If you do not want your app to open website links within the app, you can use the shell
module to open them externally. When clicked, the links will open outside of your app and in the user's default web browser.
When the demo button is clicked, the electron website will open in your browser.
Renderer Process
-
+
ProTip
Open all outbound links externally.
- You may want to open all http
and https
links outside of your app. To do this, query the document and loop through each link and add a listener. This app uses the code below which is located in assets/ex-links.js
.
+
You may want to open all http
and https
links outside of your app. To do this, query the document and loop through each link and add a listener. This app uses the code below which is located in assets/ex-links.js
.
Renderer Process
-
+
diff --git a/sections/native-ui/notifications.html b/sections/native-ui/notifications.html
new file mode 100644
index 00000000..46ebcb01
--- /dev/null
+++ b/sections/native-ui/notifications.html
@@ -0,0 +1,57 @@
+
+
+
+
+
+
+ Desktop notifications
+
+ The notification
module in Electron allows you to add basic desktop notifications.
+
+ Electron conveniently allows developers to send notifications with the HTML5 Notification API, using the currently running operating system’s native notification APIs to display it.
+
+ Note: Since this is an HTML5 API it is only available in the renderer process.
+
+ Open the full API documentation(opens in new window) in your browser.
+
+
+
+
+
+
+
+
+
+
+ This demo demonstrates a basic notification. Text only.
+ Renderer Process
+
+
+
+
+
+
+
+
+
+
+
+
+ This demo demonstrates a basic notification. Both text and a image
+ Renderer Process
+
+
+
+
+
+
+
+
+
diff --git a/sections/native-ui/tray.html b/sections/native-ui/tray.html
index a2dc436f..715b2aa0 100644
--- a/sections/native-ui/tray.html
+++ b/sections/native-ui/tray.html
@@ -16,7 +16,7 @@ The tray
module allows you to create an icon in the operating s
@@ -27,9 +27,9 @@ The tray
module allows you to create an icon in the operating s
In this example the tray icon can be removed by clicking 'Remove' in the context menu or selecting the demo button again.
Main Process
-
+
Renderer Process
-
+
ProTip
diff --git a/sections/system/app-sys-information.html b/sections/system/app-sys-information.html
index bee181d6..b60f808a 100644
--- a/sections/system/app-sys-information.html
+++ b/sections/system/app-sys-information.html
@@ -14,7 +14,7 @@ With a few Node.js and Electron modules you can gather information about the
@@ -25,17 +25,17 @@ With a few Node.js and Electron modules you can gather information about the
In this example, to get that information from the renderer process, we use the ipc
module to send a message to the main process requesting the app's path.
See the app module documentation(opens in new window) for more.
Renderer Process
-
+
Main Process
-
+
-
@@ -45,7 +45,7 @@
The globalShortcut
and Menu
modules can be used to
Main Process
-
+
ProTip
@@ -58,7 +58,7 @@ ProTip
diff --git a/sections/native-ui/dialogs.html b/sections/native-ui/dialogs.html
index 3d38d468..dcba6218 100644
--- a/sections/native-ui/dialogs.html
+++ b/sections/native-ui/dialogs.html
@@ -8,7 +8,7 @@
The dialog
module in Electron allows you to use native system dialogs for opening files or directories, saving a file or displaying informational messages.
- This is a main process module because this process is more efficient with native utilities and it allows the call to happen without interupting the visible elements in your page's renderer process.
+ This is a main process module because this process is more efficient with native utilities and it allows the call to happen without interrupting the visible elements in your page's renderer process.
Open the full API documentation(opens in new window) in your browser.
@@ -17,7 +17,7 @@ The dialog
module in Electron allows you to use native system d
@@ -26,14 +26,14 @@ The dialog
module in Electron allows you to use native system d
In this demo, the ipc
module is used to send a message from the renderer process instructing the main process to launch the open file (or directory) dialog. If a file is selected, the main process can send that information back to the renderer process.
Renderer Process
-
+
Main Process
ProTip
- The sheet-style dialog on OS X.
- On OS X you can choose between a "sheet" dialog or a default dialog. The sheet version descends from the top of the window. To use sheet version, pass the window
as the first argument in the dialog method.
+ The sheet-style dialog on macOS.
+ On macOS you can choose between a "sheet" dialog or a default dialog. The sheet version descends from the top of the window. To use sheet version, pass the window
as the first argument in the dialog method.
const ipc = require('electron').ipcMain
const dialog = require('electron').dialog
const BrowserWindow = require('electron').BrowserWindow
@@ -51,7 +51,7 @@ ProTip
@@ -61,7 +61,7 @@ ProTip
You can use an error dialog before the app's ready
event, which is useful for showing errors upon startup.
Renderer Process
-
+
Main Process
@@ -71,7 +71,7 @@ Main Process
@@ -80,11 +80,11 @@ Main Process
In this demo, the ipc
module is used to send a message from the renderer process instructing the main process to launch the information dialog. Options may be provided for responses which can then be relayed back to the renderer process.
- Note: The title
property is not displayed in OS X.
+ Note: The title
property is not displayed in macOS.
An information dialog can contain an icon, your choice of buttons, title and message.
Renderer Process
-
+
Main Process
@@ -94,7 +94,7 @@ Main Process
@@ -103,7 +103,7 @@ Main Process
In this demo, the ipc
module is used to send a message from the renderer process instructing the main process to launch the save dialog. It returns the path selected by the user which can be relayed back to the renderer process.
Renderer Process
-
+
Main Process
diff --git a/sections/native-ui/drag.html b/sections/native-ui/drag.html
new file mode 100644
index 00000000..69844d70
--- /dev/null
+++ b/sections/native-ui/drag.html
@@ -0,0 +1,42 @@
+
+
+
+
+
+
+ Drag and drop files
+
+ Electron supports dragging files and content out from web content into the operating system's world.
+
+ Open the full API documentation(opens in new window) in your browser.
+
+
+
+
+
+
+
+
+ Drag Demo
+
+ Click and drag the link above to copy the renderer process javascript file on to your machine.
+
+ In this demo, the webContents.startDrag()
API is called in response to the ondragstart
event.
+ Renderer Process
+
+ Main Process
+
+
+
+
+
+
+
+
+
+
+
diff --git a/sections/native-ui/ex-links-file-manager.html b/sections/native-ui/ex-links-file-manager.html
index 86983779..da49e7b0 100644
--- a/sections/native-ui/ex-links-file-manager.html
+++ b/sections/native-ui/ex-links-file-manager.html
@@ -16,7 +16,7 @@ The shell
module in Electron allows you to access certain nativ
@@ -25,7 +25,7 @@ The shell
module in Electron allows you to access certain nativ
This demonstrates using the shell
module to open the system file manager at a particular location.
Clicking the demo button will open your file manager at the root.
Renderer Process
-
+
@@ -33,7 +33,7 @@ Renderer Process
@@ -42,14 +42,14 @@ Renderer Process
If you do not want your app to open website links within the app, you can use the shell
module to open them externally. When clicked, the links will open outside of your app and in the user's default web browser.
When the demo button is clicked, the electron website will open in your browser.
Renderer Process
-
+
ProTip
Open all outbound links externally.
- You may want to open all http
and https
links outside of your app. To do this, query the document and loop through each link and add a listener. This app uses the code below which is located in assets/ex-links.js
.
+
You may want to open all http
and https
links outside of your app. To do this, query the document and loop through each link and add a listener. This app uses the code below which is located in assets/ex-links.js
.
Renderer Process
-
+
diff --git a/sections/native-ui/notifications.html b/sections/native-ui/notifications.html
new file mode 100644
index 00000000..46ebcb01
--- /dev/null
+++ b/sections/native-ui/notifications.html
@@ -0,0 +1,57 @@
+
+
+
+
+
+
+ Desktop notifications
+
+ The notification
module in Electron allows you to add basic desktop notifications.
+
+ Electron conveniently allows developers to send notifications with the HTML5 Notification API, using the currently running operating system’s native notification APIs to display it.
+
+ Note: Since this is an HTML5 API it is only available in the renderer process.
+
+ Open the full API documentation(opens in new window) in your browser.
+
+
+
+
+
+
+
+
+
+
+ This demo demonstrates a basic notification. Text only.
+ Renderer Process
+
+
+
+
+
+
+
+
+
+
+
+
+ This demo demonstrates a basic notification. Both text and a image
+ Renderer Process
+
+
+
+
+
+
+
+
+
diff --git a/sections/native-ui/tray.html b/sections/native-ui/tray.html
index a2dc436f..715b2aa0 100644
--- a/sections/native-ui/tray.html
+++ b/sections/native-ui/tray.html
@@ -16,7 +16,7 @@ The tray
module allows you to create an icon in the operating s
@@ -27,9 +27,9 @@ The tray
module allows you to create an icon in the operating s
In this example the tray icon can be removed by clicking 'Remove' in the context menu or selecting the demo button again.
Main Process
-
+
Renderer Process
-
+
ProTip
diff --git a/sections/system/app-sys-information.html b/sections/system/app-sys-information.html
index bee181d6..b60f808a 100644
--- a/sections/system/app-sys-information.html
+++ b/sections/system/app-sys-information.html
@@ -14,7 +14,7 @@ With a few Node.js and Electron modules you can gather information about the
@@ -25,17 +25,17 @@ With a few Node.js and Electron modules you can gather information about the
In this example, to get that information from the renderer process, we use the ipc
module to send a message to the main process requesting the app's path.
See the app module documentation(opens in new window) for more.
Renderer Process
-
+
Main Process
-
+
-
ProTip
@@ -58,7 +58,7 @@ProTip
diff --git a/sections/native-ui/dialogs.html b/sections/native-ui/dialogs.html index 3d38d468..dcba6218 100644 --- a/sections/native-ui/dialogs.html +++ b/sections/native-ui/dialogs.html @@ -8,7 +8,7 @@The dialog
module in Electron allows you to use native system dialogs for opening files or directories, saving a file or displaying informational messages.
- This is a main process module because this process is more efficient with native utilities and it allows the call to happen without interupting the visible elements in your page's renderer process.
+This is a main process module because this process is more efficient with native utilities and it allows the call to happen without interrupting the visible elements in your page's renderer process.
Open the full API documentation(opens in new window) in your browser.
dialog
module in Electron allows you to use native system d
The dialog
module in Electron allows you to use native system d
In this demo, the ipc
module is used to send a message from the renderer process instructing the main process to launch the open file (or directory) dialog. If a file is selected, the main process can send that information back to the renderer process.
Renderer Process
-
+
Main Process
ProTip
- The sheet-style dialog on OS X. -On OS X you can choose between a "sheet" dialog or a default dialog. The sheet version descends from the top of the window. To use sheet version, pass the window
as the first argument in the dialog method.
On macOS you can choose between a "sheet" dialog or a default dialog. The sheet version descends from the top of the window. To use sheet version, pass the window
as the first argument in the dialog method.
const ipc = require('electron').ipcMain
const dialog = require('electron').dialog
const BrowserWindow = require('electron').BrowserWindow
@@ -51,7 +51,7 @@ ProTip
@@ -61,7 +61,7 @@ ProTip
You can use an error dialog before the app's ready
event, which is useful for showing errors upon startup.
Renderer Process
-
+
Main Process
@@ -71,7 +71,7 @@ Main Process
@@ -80,11 +80,11 @@ Main Process
In this demo, the ipc
module is used to send a message from the renderer process instructing the main process to launch the information dialog. Options may be provided for responses which can then be relayed back to the renderer process.
- Note: The title
property is not displayed in OS X.
+ Note: The title
property is not displayed in macOS.
An information dialog can contain an icon, your choice of buttons, title and message.
Renderer Process
-
+
Main Process
@@ -94,7 +94,7 @@ Main Process
@@ -103,7 +103,7 @@ Main Process
In this demo, the ipc
module is used to send a message from the renderer process instructing the main process to launch the save dialog. It returns the path selected by the user which can be relayed back to the renderer process.
Renderer Process
-
+
Main Process
diff --git a/sections/native-ui/drag.html b/sections/native-ui/drag.html
new file mode 100644
index 00000000..69844d70
--- /dev/null
+++ b/sections/native-ui/drag.html
@@ -0,0 +1,42 @@
+
+
+
+
+
+
+ Drag and drop files
+
+ Electron supports dragging files and content out from web content into the operating system's world.
+
+ Open the full API documentation(opens in new window) in your browser.
+
+
+
+
+
+
+
+
+ Drag Demo
+
+ Click and drag the link above to copy the renderer process javascript file on to your machine.
+
+ In this demo, the webContents.startDrag()
API is called in response to the ondragstart
event.
+ Renderer Process
+
+ Main Process
+
+
+
+
+
+
+
+
+
+
+
diff --git a/sections/native-ui/ex-links-file-manager.html b/sections/native-ui/ex-links-file-manager.html
index 86983779..da49e7b0 100644
--- a/sections/native-ui/ex-links-file-manager.html
+++ b/sections/native-ui/ex-links-file-manager.html
@@ -16,7 +16,7 @@ The shell
module in Electron allows you to access certain nativ
@@ -25,7 +25,7 @@ The shell
module in Electron allows you to access certain nativ
This demonstrates using the shell
module to open the system file manager at a particular location.
Clicking the demo button will open your file manager at the root.
Renderer Process
-
+
@@ -33,7 +33,7 @@ Renderer Process
@@ -42,14 +42,14 @@ Renderer Process
If you do not want your app to open website links within the app, you can use the shell
module to open them externally. When clicked, the links will open outside of your app and in the user's default web browser.
When the demo button is clicked, the electron website will open in your browser.
Renderer Process
-
+
ProTip
Open all outbound links externally.
- You may want to open all http
and https
links outside of your app. To do this, query the document and loop through each link and add a listener. This app uses the code below which is located in assets/ex-links.js
.
+
You may want to open all http
and https
links outside of your app. To do this, query the document and loop through each link and add a listener. This app uses the code below which is located in assets/ex-links.js
.
Renderer Process
-
+
diff --git a/sections/native-ui/notifications.html b/sections/native-ui/notifications.html
new file mode 100644
index 00000000..46ebcb01
--- /dev/null
+++ b/sections/native-ui/notifications.html
@@ -0,0 +1,57 @@
+
+
+
+
+
+
+ Desktop notifications
+
+ The notification
module in Electron allows you to add basic desktop notifications.
+
+ Electron conveniently allows developers to send notifications with the HTML5 Notification API, using the currently running operating system’s native notification APIs to display it.
+
+ Note: Since this is an HTML5 API it is only available in the renderer process.
+
+ Open the full API documentation(opens in new window) in your browser.
+
+
+
+
+
+
+
+
+
+
+ This demo demonstrates a basic notification. Text only.
+ Renderer Process
+
+
+
+
+
+
+
+
+
+
+
+
+ This demo demonstrates a basic notification. Both text and a image
+ Renderer Process
+
+
+
+
+
+
+
+
+
diff --git a/sections/native-ui/tray.html b/sections/native-ui/tray.html
index a2dc436f..715b2aa0 100644
--- a/sections/native-ui/tray.html
+++ b/sections/native-ui/tray.html
@@ -16,7 +16,7 @@ The tray
module allows you to create an icon in the operating s
@@ -27,9 +27,9 @@ The tray
module allows you to create an icon in the operating s
In this example the tray icon can be removed by clicking 'Remove' in the context menu or selecting the demo button again.
Main Process
-
+
Renderer Process
-
+
ProTip
diff --git a/sections/system/app-sys-information.html b/sections/system/app-sys-information.html
index bee181d6..b60f808a 100644
--- a/sections/system/app-sys-information.html
+++ b/sections/system/app-sys-information.html
@@ -14,7 +14,7 @@ With a few Node.js and Electron modules you can gather information about the
@@ -25,17 +25,17 @@ With a few Node.js and Electron modules you can gather information about the
In this example, to get that information from the renderer process, we use the ipc
module to send a message to the main process requesting the app's path.
See the app module documentation(opens in new window) for more.
Renderer Process
-
+
Main Process
-
+
-