</button>

<div class="demo-box">

<div class="demo-controls">

</div>

<p>A context, or right-click, menu can be created with the <code>menu</code> and <code>menuitem</code> modules as well. You can right-click anywhere in this app or click the demo button to see an example context menu.</p>

</button>

<div class="demo-box">

<div class="demo-controls">

<span class="demo-response" id="selected-file"></span>

</div>

<p>In this demo, the <code>ipc</code> 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.</p>

</button>

<div class="demo-box">

<div class="demo-controls">

</div>

<p>In this demo, the <code>ipc</code> module is used to send a message from the renderer process instructing the main process to launch the error dialog.</p>

</button>

<div class="demo-box">

<div class="demo-controls">

<span class="demo-response" id="info-selection"></span>

</div>

<p>In this demo, the <code>ipc</code> 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.</p>

</button>

<div class="demo-box">

<div class="demo-controls">

<span class="demo-response" id="file-saved"></span>

</div>

<p>In this demo, the <code>ipc</code> 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.</p>

</button>

<div class="demo-box">

<div class="demo-controls">

</div>

<p>This demonstrates using the <code>shell</code> module to open the system file manager at a particular location.</p>

<p>Clicking the demo button will open your file manager at the root.</p>

</button>

<div class="demo-box">

<div class="demo-controls">

</div>

<p>If you do not want your app to open website links <em>within</em> the app, you can use the <code>shell</code> module to open them externally. When clicked, the links will open outside of your app and in the user's default web browser.</p>

<p>When the demo button is clicked, the electron website will open in your browser.<p>

</button>

<div class="demo-box">

<div class="demo-controls">

<span class="demo-response" id="tray-countdown"></span>

</div>

<p>The demo button sends a message to the main process using the <code>ipc</code> module. In the main process the app is told to place an icon, with a context menu, in the tray.</p>

</button>

<div class="demo-box">

<div class="demo-controls">

<span class="demo-response" id="pdf-path"></span>

</div>

<p>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.</p>

</button>

<div class="demo-box">

<div class="demo-controls">

<span class="demo-response" id="got-app-info"></span>

</div>

<p>The <code>process</code> module is built into Node.js (therefore you can use this in both the main and renderer processes) and in Electron apps this object has a few more useful properties on it.</p>

</button>

<div class="demo-box">

<div class="demo-controls">

<span class="demo-response" id="got-sys-info"></span>

</div>

<p>The Node.js <code>os</code> module provides useful information about the user's operating system. It's built into Node.js and can be used in both the main and renderer proesses.</p>

</button>

<div class="demo-box">

<div class="demo-controls">

<span class="demo-response" id="got-screen-info"></span>

</div>

<p>The Electron <code>screen</code> module retrieves information about screen size, displays, cursor position, etc. In the example below we retrieve the dimensions of the monitor in use.</p>

</button>

<div class="demo-box">

<div class="demo-controls">

</div>

<p>The <code>BrowserWindow</code> module gives you the ability to create new windows in your app. This main process module can be used from the renderer process with the <code>remote</code> module, as is shown in this demo.</p>

</button>

<div class="demo-box">

<div class="demo-controls">

<span class="demo-response" id="manage-window-reply"></span>

</div>

<p>In this demo we create a new window and listen for <code>move</code> and <code>resize</code> events on it. Click the demo button, change the new window and see the dimenions and poisition update here, above.</p>

</button>

<div class="demo-box">

<div class="demo-controls">

</div>

<p>

A frameless window is a window that has no <a href="https://developer.mozilla.org/en-US/docs/Glossary/Chrome">"chrome"</a>,