Examples Overview | Electron Skip to main content Electron Docs API Blog Tools * Electron Forge * Electron Fiddle Community * Governance * Showcase * Resources Releases English * English * Deutsch * Español * Français * 日本語 * Português * Русский * 中文 Search * Get Started * Processes in Electron * Best Practices * Examples * Dark Mode * Device Access * In-App Purchases * * Keyboard Shortcuts * Deep Links * Desktop Launcher Actions * * Menus * Multithreading * Native File Drag & Drop * Navigation History * Notifications * Offscreen Rendering * Online/Offline Event Detection * Progress Bars * Recent Documents * * * Representing Files in a BrowserWindow * * SpellChecker * Web Embeds * Taskbar Customization * * Window Customization * Development * Native Node Modules * Distribution * Testing And Debugging * References * Contributing * * Examples On this page Examples Overview In this section, we have collected a set of guides for common features that you may want to implement in your Electron application. Each guide contains a practical example in a minimal, self-contained example app. The easiest way to run these examples is by downloading Electron Fiddle . Once Fiddle is installed, you can press on the "Open in Fiddle" button that you will find below code samples like the following one: docs/fiddles/quick-start ( 44.3.0 ) Open in Fiddle * main.js * preload.js * index.html const { app , BrowserWindow } = require ( 'electron/main' ) const path = require ( 'node:path' ) function createWindow ( ) { const win = new BrowserWindow ( { width : 800 , height : 600 , webPreferences : { preload : path . join ( __dirname , 'preload.js' ) } } ) win . loadFile ( 'index.html' ) } app . whenReady ( ) . then ( ( ) => { createWindow ( ) app . on ( 'activate' , ( ) => { if ( BrowserWindow . getAllWindows ( ) . length === 0 ) { createWindow ( ) } } ) } ) app . on ( 'window-all-closed' , ( ) => { if ( process . platform !== 'darwin' ) { app . quit ( ) } } ) window . addEventListener ( 'DOMContentLoaded' , ( ) => { const replaceText = ( selector , text ) => { const element = document . getElementById ( selector ) if ( element ) element . innerText = text } for ( const type of [ 'chrome' , 'node' , 'electron' ] ) { replaceText ( ` ${ type } -version ` , process . versions [ type ] ) } } ) <! DOCTYPE html > < html > < head > < meta charset = " UTF-8 " > < title > Hello World! </ title > < meta http-equiv = " Content-Security-Policy " content = " script-src 'self' 'unsafe-inline'; " /> </ head > < body > < h1 > Hello World! </ h1 > < p > We are using Node.js < span id = " node-version " > </ span > , Chromium < span id = " chrome-version " > </ span > , and Electron < span id = " electron-version " > </ span > . </ p > </ body > </ html > How to...? ​ You can find the full list of "How to?" in the sidebar. If there is something that you would like to do that is not documented, please join our Discord server and let us know! Edit this page Previous Security Next Dark Mode * How to...? Docs * Getting Started * API Reference Checklists * Performance * Security Tools * Electron Forge * Electron Fiddle Community * Governance * Resources * Discord * Bluesky * X * Mastodon * Stack Overflow More * GitHub * Open Collective * Infrastructure Dashboard Copyright OpenJS Foundation and Electron contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation , please see our Trademark Policy and Trademark List . Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them. The OpenJS Foundation | Terms of Use | Privacy Policy | Bylaws | Code of Conduct | Trademark Policy | Trademark List | Cookie Policy Hosting and infrastructure graciously provided by