CINXE.COM
<!doctype html><html lang=en dir=ltr class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-latest/tutorial/introduction" data-has-hydrated=false><meta charset=UTF-8><meta name=generator content="Docusaurus v3.7.0"><title data-rh=true>Introduction | Electron</title><meta data-rh=true name=viewport content="width=device-width, initial-scale=1.0"><meta data-rh=true name=twitter:card content=summary_large_image><meta data-rh=true property=og:url content=https://electronjs.org/docs/latest/><meta data-rh=true property=og:locale content=en><meta data-rh=true property=og:locale:alternate content=de><meta data-rh=true property=og:locale:alternate content=es><meta data-rh=true property=og:locale:alternate content=fr><meta data-rh=true property=og:locale:alternate content=ja><meta data-rh=true property=og:locale:alternate content=pt><meta data-rh=true property=og:locale:alternate content=ru><meta data-rh=true property=og:locale:alternate content=zh><meta data-rh=true name=docusaurus_locale content=en><meta data-rh=true name=docsearch:language content=en><meta data-rh=true name=docusaurus_version content=current><meta data-rh=true name=docusaurus_tag content=docs-default-current><meta data-rh=true name=docsearch:version content=current><meta data-rh=true name=docsearch:docusaurus_tag content=docs-default-current><meta data-rh=true property=og:title content="Introduction | Electron"><meta data-rh=true name=description content="Welcome to the Electron documentation! If this is your first time developing an Electron app, read through this Getting Started section to get familiar with the basics. Otherwise, feel free to explore our guides and API documentation!"><meta data-rh=true property=og:description content="Welcome to the Electron documentation! If this is your first time developing an Electron app, read through this Getting Started section to get familiar with the basics. Otherwise, feel free to explore our guides and API documentation!"><link data-rh=true rel=icon href=/assets/img/favicon.ico><link data-rh=true rel=canonical href=https://electronjs.org/docs/latest/><link data-rh=true rel=alternate href=https://electronjs.org/docs/latest/ hreflang=en><link data-rh=true rel=alternate href=https://electronjs.org/de/docs/latest/ hreflang=de><link data-rh=true rel=alternate href=https://electronjs.org/es/docs/latest/ hreflang=es><link data-rh=true rel=alternate href=https://electronjs.org/fr/docs/latest/ hreflang=fr><link data-rh=true rel=alternate href=https://electronjs.org/ja/docs/latest/ hreflang=ja><link data-rh=true rel=alternate href=https://electronjs.org/pt/docs/latest/ hreflang=pt><link data-rh=true rel=alternate href=https://electronjs.org/ru/docs/latest/ hreflang=ru><link data-rh=true rel=alternate href=https://electronjs.org/zh/docs/latest/ hreflang=zh><link data-rh=true rel=alternate href=https://electronjs.org/docs/latest/ hreflang=x-default><link data-rh=true rel=preconnect href=https://MG3SRMK3K0-dsn.algolia.net crossorigin=anonymous><link rel=alternate type=application/rss+xml href=/blog/rss.xml title="Electron RSS Feed"><link rel=alternate type=application/atom+xml href=/blog/atom.xml title="Electron Atom Feed"><link rel=preconnect href=https://www.google-analytics.com><link rel=preconnect href=https://www.googletagmanager.com><script async src="https://www.googletagmanager.com/gtag/js?id=UA-160365006-1"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-160365006-1",{anonymize_ip:!0})</script><link rel=search type=application/opensearchdescription+xml title=Electron href=/opensearch.xml><meta name=docs-sha content=a9f3754d225c4e5f82864866f308fbef08b540b9><link rel=stylesheet href=/assets/css/styles.04f6ad9e.css><script src=/assets/js/runtime~main.5d8099e1.js defer></script><script src=/assets/js/main.bf24b520.js defer></script><body class=navigation-with-keyboard><script>!function(){var t,e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();t=null!==e?e:window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":(window.matchMedia("(prefers-color-scheme: light)").matches,"light"),document.documentElement.setAttribute("data-theme",t)}(),function(){try{for(var[t,e]of new URLSearchParams(window.location.search).entries())if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}(),document.documentElement.setAttribute("data-announcement-bar-initially-dismissed",function(){try{return"true"===localStorage.getItem("docusaurus.announcement.dismiss")}catch(t){}return!1}())</script><div id=__docusaurus><div role=region aria-label="Skip to main content"><a class=skipToContent_fXgn href=#__docusaurus_skipToContent_fallback>Skip to main content</a></div><div class=announcementBar_mb4j style=background-color:#9feaf9;color:#1b1c26 role=banner><div class=announcementBarPlaceholder_vyr4></div><div class="content_knG7 announcementBarContent_xLdY">Soon, <strong><code>@electron</code></strong> packages on npm will require Node.js 22 LTS. <a href=https://www.electronjs.org/blog/ecosystem-node-22/>Read more on our blog.</a></div><button type=button aria-label=Close class="clean-btn close closeButton_CVFx announcementBarClose_gvF7"><svg viewBox="0 0 15 15" width=14 height=14><g stroke=currentColor stroke-width=3.1><path d="M.75.75l13.5 13.5M14.25.75L.75 14.25"/></g></svg></button></div><nav aria-label=Main class="navbar navbar--fixed-top navbar--dark"><div class=navbar__inner><div class=navbar__items><button aria-label="Toggle navigation bar" aria-expanded=false class="navbar__toggle clean-btn" type=button><svg width=30 height=30 viewBox="0 0 30 30" aria-hidden=true><path stroke=currentColor stroke-linecap=round stroke-miterlimit=10 stroke-width=2 d="M4 7h22M4 15h22M4 23h22"/></svg></button><a class=navbar__brand href=/><div class=navbar__logo><img src=/assets/img/logo.svg alt="Electron homepage" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src=/assets/img/logo.svg alt="Electron homepage" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div><b class="navbar__title text--truncate">Electron</b></a><a aria-current=page class="navbar__item navbar__link navbar__link--active" href=/docs/latest/>Docs</a><a class="navbar__item navbar__link" href=/docs/latest/api/app>API</a><a class="navbar__item navbar__link" href=/blog>Blog</a><div class="navbar__item dropdown dropdown--hoverable"><a href=# aria-haspopup=true aria-expanded=false role=button class=navbar__link>Tools</a><ul class=dropdown__menu><li><a href=https://electronforge.io target=_blank rel="noopener noreferrer" class=dropdown__link>Electron Forge</a><li><a class=dropdown__link href=/fiddle>Electron Fiddle</a></ul></div><div class="navbar__item dropdown dropdown--hoverable"><a href=# aria-haspopup=true aria-expanded=false role=button class=navbar__link>Community</a><ul class=dropdown__menu><li><a class=dropdown__link href=/governance>Governance</a><li><a class=dropdown__link href=/apps>Showcase</a><li><a class=dropdown__link href=/community>Resources</a></ul></div><a aria-current=page class="navbar__item navbar__link navbar__link--active" href=/docs/latest/why-electron>Why Electron</a></div><div class="navbar__items navbar__items--right"><a href=https://releases.electronjs.org target=_blank rel="noopener noreferrer" class="navbar__item navbar__link">Releases<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href=# aria-haspopup=true aria-expanded=false role=button class=navbar__link><svg viewBox="0 0 24 24" width=20 height=20 aria-hidden=true class=iconLanguage_nlXk><path fill=currentColor d="M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"/></svg>English</a><ul class=dropdown__menu><li><a href=/docs/latest/ target=_self rel="noopener noreferrer" class="dropdown__link dropdown__link--active" lang=en>English</a><li><a href=/de/docs/latest/ target=_self rel="noopener noreferrer" class=dropdown__link lang=de>Deutsch</a><li><a href=/es/docs/latest/ target=_self rel="noopener noreferrer" class=dropdown__link lang=es>Español</a><li><a href=/fr/docs/latest/ target=_self rel="noopener noreferrer" class=dropdown__link lang=fr>Français</a><li><a href=/ja/docs/latest/ target=_self rel="noopener noreferrer" class=dropdown__link lang=ja>日本語</a><li><a href=/pt/docs/latest/ target=_self rel="noopener noreferrer" class=dropdown__link lang=pt>Português</a><li><a href=/ru/docs/latest/ target=_self rel="noopener noreferrer" class=dropdown__link lang=ru>Русский</a><li><a href=/zh/docs/latest/ target=_self rel="noopener noreferrer" class=dropdown__link lang=zh>中文</a></ul></div><a href=https://github.com/electron/electron target=_blank rel="noopener noreferrer" class="navbar__item navbar__link header-github-link" aria-label="GitHub repository"></a><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS darkNavbarColorModeToggle_X3D1" type=button disabled title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)" aria-live=polite aria-pressed=false><svg viewBox="0 0 24 24" width=24 height=24 class=lightToggleIcon_pyhR><path fill=currentColor d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"/></svg><svg viewBox="0 0 24 24" width=24 height=24 class=darkToggleIcon_wfgR><path fill=currentColor d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"/></svg></button></div><div class=navbarSearchContainer_Bca1><button type=button class="DocSearch DocSearch-Button" aria-label="Search (Command+K)"><span class=DocSearch-Button-Container><svg width=20 height=20 class=DocSearch-Search-Icon viewBox="0 0 20 20" aria-hidden=true><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke=currentColor fill=none fill-rule=evenodd stroke-linecap=round stroke-linejoin=round /></svg><span class=DocSearch-Button-Placeholder>Search</span></span><span class=DocSearch-Button-Keys></span></button></div></div></div><div role=presentation class=navbar-sidebar__backdrop></div></nav><div id=__docusaurus_skipToContent_fallback class="main-wrapper mainWrapper_z2l0"><div class=docsWrapper_hBAB><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type=button></button><div class=docRoot_UBD9><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class=sidebarViewport_aRkj><div class=sidebar_njMd><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG menuWithAnnouncementBar_GW3s"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret menu__link--active" role=button aria-expanded=true href=/docs/latest/>Get Started</a></div><ul style=display:block;overflow:visible;height:auto class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link menuLink_lqYo menu__link--active" aria-current=page tabindex=0 href=/docs/latest/>Introduction</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link menuLink_lqYo" tabindex=0 href=/docs/latest/why-electron>Why Electron</a><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false tabindex=0 href=/docs/latest/tutorial/tutorial-prerequisites>Tutorial</a></div></ul><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/latest/tutorial/process-model>Processes in Electron</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/latest/tutorial/performance>Best Practices</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist" href=/docs/latest/tutorial/examples>Examples</a><button aria-label="Expand sidebar category 'Examples'" aria-expanded=false type=button class="clean-btn menu__caret"></button></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/latest/tutorial/accessibility>Development</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/latest/tutorial/forge-overview>Distribution</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/latest/tutorial/automated-testing>Testing And Debugging</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/latest/breaking-changes>References</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/latest/development/build-instructions-gn>Contributing</a></div></ul></nav></div></div></aside><main class=docMainContainer_TBSr><div class="container padding-top--md padding-bottom--lg"><div class=row><div class="col docItemCol_VOVn"><div class=docItemContainer_Djhp><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label=Breadcrumbs><ul class=breadcrumbs itemscope itemtype=https://schema.org/BreadcrumbList><li class=breadcrumbs__item><a aria-label="Home page" class=breadcrumbs__link href=/><svg viewBox="0 0 24 24" class=breadcrumbHomeIcon_YNFT><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill=currentColor /></svg></a><li class=breadcrumbs__item><span class=breadcrumbs__link>Get Started</span><meta itemprop=position content=1><li itemscope itemprop=itemListElement itemtype=https://schema.org/ListItem class="breadcrumbs__item breadcrumbs__item--active"><span class=breadcrumbs__link itemprop=name>Introduction</span><meta itemprop=position content=2></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type=button class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>What is Electron?</h1></header> <p>Electron is a framework for building desktop applications using JavaScript, HTML, and CSS. By embedding <a href=https://www.chromium.org/ target=_blank rel="noopener noreferrer">Chromium</a> and <a href=https://nodejs.org/ target=_blank rel="noopener noreferrer">Node.js</a> into its binary, Electron allows you to maintain one JavaScript codebase and create cross-platform apps that work on Windows, macOS, and Linux — no native development experience required.</p> <h2 class="anchor anchorWithStickyNavbar_LWe7" id=getting-started>Getting started<a href=#getting-started class=hash-link aria-label="Direct link to Getting started" title="Direct link to Getting started"></a></h2> <p>We recommend you to start with the <a href=/docs/latest/tutorial/tutorial-prerequisites>tutorial</a>, which guides you through the process of developing an Electron app and distributing it to users. The <a href=/docs/latest/tutorial/examples>examples</a> and <a href=/docs/latest/api/app>API documentation</a> are also good places to browse around and discover new things.</p> <h2 class="anchor anchorWithStickyNavbar_LWe7" id=running-examples-with-electron-fiddle>Running examples with Electron Fiddle<a href=#running-examples-with-electron-fiddle class=hash-link aria-label="Direct link to Running examples with Electron Fiddle" title="Direct link to Running examples with Electron Fiddle"></a></h2> <p><a href=https://www.electronjs.org/fiddle target=_blank rel="noopener noreferrer">Electron Fiddle</a> is a sandbox app written with Electron and supported by Electron's maintainers. We highly recommend installing it as a learning tool to experiment with Electron's APIs or to prototype features during development.</p> <p>Fiddle also integrates nicely with our documentation. When browsing through examples in our tutorials, you'll frequently see an "Open in Electron Fiddle" button underneath a code block. If you have Fiddle installed, this button will open a <code>fiddle.electronjs.org</code> link that will automatically load the example into Fiddle, no copy-pasting required.</p> <div class=editorWindow_ZQWz><div class=editorWindowHeader_GqG7><div class=buttons_msmS><span class=dot_YdbR style=background:#f25f58></span><span class=dot_YdbR style=background:#fbbe3c></span><span class=dot_YdbR style=background:#58cb42></span></div><a class=editorTitle_buME href=https://github.com/electron/electron/tree/v34.2.0/docs/fiddles/quick-start>docs/fiddles/quick-start<!-- --> (<!-- -->34.2.0<!-- -->)</a><a target=_blank class="button button--primary button--md" href="https://fiddle.electronjs.org/launch?target=electron/v34.2.0/docs/fiddles/quick-start" rel=noreferrer>Open in Fiddle</a></div><div class=editorWindowBody_R11m><div class="tabs-container tabList__CuJ"><ul role=tablist aria-orientation=horizontal class=tabs><li role=tab tabindex=0 aria-selected=true class="tabs__item tabItem_LNqP tabs__item--active">main.js<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">preload.js<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">index.html</ul><div class=margin-top--md><div role=tabpanel class=tabItem_Ymn6><div class="language-js codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-js codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"> app</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> </span><span class="token maybe-class-name">BrowserWindow</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"> </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token function" style=color:#d73a49>require</span><span class="token punctuation" style=color:#393A34>(</span><span class="token string" style=color:#e3116c>'electron/main'</span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> path </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token function" style=color:#d73a49>require</span><span class="token punctuation" style=color:#393A34>(</span><span class="token string" style=color:#e3116c>'node:path'</span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword" style=color:#00009f>function</span><span class="token plain"> </span><span class="token function" style=color:#d73a49>createWindow</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>(</span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> win </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>new</span><span class="token plain"> </span><span class="token class-name">BrowserWindow</span><span class="token punctuation" style=color:#393A34>(</span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token literal-property property" style=color:#36acaa>width</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token number" style=color:#36acaa>800</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token literal-property property" style=color:#36acaa>height</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token number" style=color:#36acaa>600</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token literal-property property" style=color:#36acaa>webPreferences</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token literal-property property" style=color:#36acaa>preload</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> path</span><span class="token punctuation" style=color:#393A34>.</span><span class="token method function property-access" style=color:#d73a49>join</span><span class="token punctuation" style=color:#393A34>(</span><span class="token plain">__dirname</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'preload.js'</span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> win</span><span class="token punctuation" style=color:#393A34>.</span><span class="token method function property-access" style=color:#d73a49>loadFile</span><span class="token punctuation" style=color:#393A34>(</span><span class="token string" style=color:#e3116c>'index.html'</span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain">app</span><span class="token punctuation" style=color:#393A34>.</span><span class="token method function property-access" style=color:#d73a49>whenReady</span><span class="token punctuation" style=color:#393A34>(</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>.</span><span class="token method function property-access" style=color:#d73a49>then</span><span class="token punctuation" style=color:#393A34>(</span><span class="token punctuation" style=color:#393A34>(</span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"> </span><span class="token arrow operator" style=color:#393A34>=></span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token function" style=color:#d73a49>createWindow</span><span class="token punctuation" style=color:#393A34>(</span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> app</span><span class="token punctuation" style=color:#393A34>.</span><span class="token method function property-access" style=color:#d73a49>on</span><span class="token punctuation" style=color:#393A34>(</span><span class="token string" style=color:#e3116c>'activate'</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>(</span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"> </span><span class="token arrow operator" style=color:#393A34>=></span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token keyword control-flow" style=color:#00009f>if</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>(</span><span class="token maybe-class-name">BrowserWindow</span><span class="token punctuation" style=color:#393A34>.</span><span class="token method function property-access" style=color:#d73a49>getAllWindows</span><span class="token punctuation" style=color:#393A34>(</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>.</span><span class="token property-access">length</span><span class="token plain"> </span><span class="token operator" style=color:#393A34>===</span><span class="token plain"> </span><span class="token number" style=color:#36acaa>0</span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token function" style=color:#d73a49>createWindow</span><span class="token punctuation" style=color:#393A34>(</span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain">app</span><span class="token punctuation" style=color:#393A34>.</span><span class="token method function property-access" style=color:#d73a49>on</span><span class="token punctuation" style=color:#393A34>(</span><span class="token string" style=color:#e3116c>'window-all-closed'</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>(</span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"> </span><span class="token arrow operator" style=color:#393A34>=></span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token keyword control-flow" style=color:#00009f>if</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>(</span><span class="token plain">process</span><span class="token punctuation" style=color:#393A34>.</span><span class="token property-access">platform</span><span class="token plain"> </span><span class="token operator" style=color:#393A34>!==</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'darwin'</span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> app</span><span class="token punctuation" style=color:#393A34>.</span><span class="token method function property-access" style=color:#d73a49>quit</span><span class="token punctuation" style=color:#393A34>(</span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>)</span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-js codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-js codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token dom variable" style=color:#36acaa>window</span><span class="token punctuation" style=color:#393A34>.</span><span class="token method function property-access" style=color:#d73a49>addEventListener</span><span class="token punctuation" style=color:#393A34>(</span><span class="token string" style=color:#e3116c>'DOMContentLoaded'</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>(</span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"> </span><span class="token arrow operator" style=color:#393A34>=></span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> </span><span class="token function-variable function" style=color:#d73a49>replaceText</span><span class="token plain"> </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>(</span><span class="token parameter">selector</span><span class="token parameter punctuation" style=color:#393A34>,</span><span class="token parameter"> text</span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"> </span><span class="token arrow operator" style=color:#393A34>=></span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> element </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token dom variable" style=color:#36acaa>document</span><span class="token punctuation" style=color:#393A34>.</span><span class="token method function property-access" style=color:#d73a49>getElementById</span><span class="token punctuation" style=color:#393A34>(</span><span class="token plain">selector</span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token keyword control-flow" style=color:#00009f>if</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>(</span><span class="token plain">element</span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"> element</span><span class="token punctuation" style=color:#393A34>.</span><span class="token property-access">innerText</span><span class="token plain"> </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> text</span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token keyword control-flow" style=color:#00009f>for</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>(</span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> type </span><span class="token keyword" style=color:#00009f>of</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>[</span><span class="token string" style=color:#e3116c>'chrome'</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'node'</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'electron'</span><span class="token punctuation" style=color:#393A34>]</span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token function" style=color:#d73a49>replaceText</span><span class="token punctuation" style=color:#393A34>(</span><span class="token template-string template-punctuation string" style=color:#e3116c>`</span><span class="token template-string interpolation interpolation-punctuation punctuation" style=color:#393A34>${</span><span class="token template-string interpolation">type</span><span class="token template-string interpolation interpolation-punctuation punctuation" style=color:#393A34>}</span><span class="token template-string string" style=color:#e3116c>-version</span><span class="token template-string template-punctuation string" style=color:#e3116c>`</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> process</span><span class="token punctuation" style=color:#393A34>.</span><span class="token property-access">versions</span><span class="token punctuation" style=color:#393A34>[</span><span class="token plain">type</span><span class="token punctuation" style=color:#393A34>]</span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>)</span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token doctype punctuation" style=color:#393A34;font-style:italic><!</span><span class="token doctype doctype-tag" style=color:#999988;font-style:italic>DOCTYPE</span><span class="token doctype" style=color:#999988;font-style:italic> </span><span class="token doctype name" style=color:#999988;font-style:italic>html</span><span class="token doctype punctuation" style=color:#393A34;font-style:italic>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>html</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>head</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>meta</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>charset</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>UTF-8</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>title</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain">Hello World!</span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>title</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>meta</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>http-equiv</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>Content-Security-Policy</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>content</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>script-src 'self' 'unsafe-inline';</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag" style=color:#00009f> </span><span class="token tag punctuation" style=color:#393A34>/></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>head</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>body</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>h1</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain">Hello World!</span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>h1</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>p</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> We are using Node.js </span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>span</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>id</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>node-version</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>span</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain">,</span><br></span><span class=token-line style=color:#393A34><span class="token plain"> Chromium </span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>span</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>id</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>chrome-version</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>span</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain">,</span><br></span><span class=token-line style=color:#393A34><span class="token plain"> and Electron </span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>span</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>id</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>electron-version</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>span</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain">.</span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>p</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>body</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>html</span><span class="token tag punctuation" style=color:#393A34>></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div></div></div></div></div> <h2 class="anchor anchorWithStickyNavbar_LWe7" id=what-is-in-the-docs>What is in the docs?<a href=#what-is-in-the-docs class=hash-link aria-label="Direct link to What is in the docs?" title="Direct link to What is in the docs?"></a></h2> <p>All the official documentation is available from the sidebar. These are the different categories and what you can expect on each one:</p> <ul> <li><strong>Tutorial</strong>: An end-to-end guide on how to create and publish your first Electron application.</li> <li><strong>Processes in Electron</strong>: In-depth reference on Electron processes and how to work with them.</li> <li><strong>Best Practices</strong>: Important checklists to keep in mind when developing an Electron app.</li> <li><strong>Examples</strong>: Quick references to add features to your Electron app.</li> <li><strong>Development</strong>: Miscellaneous development guides.</li> <li><strong>Distribution</strong>: Learn how to distribute your app to end users.</li> <li><strong>Testing And Debugging</strong>: How to debug JavaScript, write tests, and other tools used to create quality Electron applications.</li> <li><strong>References</strong>: Useful links to better understand how the Electron project works and is organized.</li> <li><strong>Contributing</strong>: Compiling Electron and making contributions can be daunting. We try to make it easier in this section.</li> </ul> <h2 class="anchor anchorWithStickyNavbar_LWe7" id=getting-help>Getting help<a href=#getting-help class=hash-link aria-label="Direct link to Getting help" title="Direct link to Getting help"></a></h2> <p>Are you getting stuck anywhere? Here are a few links to places to look:</p> <ul> <li>If you need help with developing your app, our <a href=https://discord.gg/electronjs target=_blank rel="noopener noreferrer">community Discord server</a> is a great place to get advice from other Electron app developers.</li> <li>If you suspect you're running into a bug with the <code>electron</code> package, please check the <a href=https://github.com/electron/electron/issues target=_blank rel="noopener noreferrer">GitHub issue tracker</a> to see if any existing issues match your problem. If not, feel free to fill out our bug report template and submit a new issue.</li> </ul></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="row margin-top--sm theme-doc-footer-edit-meta-row"><div class=col><a href=https://github.com/electron/electron/edit/main/docs/tutorial/introduction.md target=_blank rel="noopener noreferrer" class=theme-edit-this-page><svg fill=currentColor height=20 width=20 viewBox="0 0 40 40" class=iconEdit_Z9Sw aria-hidden=true><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"/></g></svg>Edit this page</a></div><div class="col lastUpdated_JAkA"></div></div></footer></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--next" href=/docs/latest/why-electron><div class=pagination-nav__sublabel>Next</div><div class=pagination-nav__label>Why Electron</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href=#getting-started class="table-of-contents__link toc-highlight">Getting started</a><li><a href=#running-examples-with-electron-fiddle class="table-of-contents__link toc-highlight">Running examples with Electron Fiddle</a><li><a href=#what-is-in-the-docs class="table-of-contents__link toc-highlight">What is in the docs?</a><li><a href=#getting-help class="table-of-contents__link toc-highlight">Getting help</a></ul></div></div></div></div></main></div></div></div><footer class=footer><div class="container container-fluid"><div class="row footer__links"><div class="col footer__col"><div class=footer__title>Docs</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/docs/latest/>Getting Started</a><li class=footer__item><a class=footer__link-item href=/docs/latest/api/app>API Reference</a></ul></div><div class="col footer__col"><div class=footer__title>Checklists</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/docs/latest/tutorial/performance>Performance</a><li class=footer__item><a class=footer__link-item href=/docs/latest/tutorial/security>Security</a></ul></div><div class="col footer__col"><div class=footer__title>Tools</div><ul class="footer__items clean-list"><li class=footer__item><a href=https://electronforge.io target=_blank rel="noopener noreferrer" class=footer__link-item>Electron Forge</a><li class=footer__item><a class=footer__link-item href=/fiddle>Electron Fiddle</a></ul></div><div class="col footer__col"><div class=footer__title>Community</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/governance>Governance</a><li class=footer__item><a class=footer__link-item href=/community>Resources</a><li class=footer__item><a href=https://discordapp.com/invite/APGC3k5yaH target=_blank rel="noopener noreferrer" class=footer__link-item>Discord<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://bsky.app/profile/electronjs.org target=_blank rel="noopener noreferrer" class=footer__link-item>Bluesky<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://x.com/electronjs target=_blank rel="noopener noreferrer" class=footer__link-item>X<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://social.lfx.dev/@electronjs target=_blank rel=me class=footer__link-item>Mastodon<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" style="margin-left: 0.3rem;"><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://stackoverflow.com/questions/tagged/electron target=_blank rel="noopener noreferrer" class=footer__link-item>Stack Overflow<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></ul></div><div class="col footer__col"><div class=footer__title>More</div><ul class="footer__items clean-list"><li class=footer__item><a href=https://github.com/electron/electron target=_blank rel="noopener noreferrer" class=footer__link-item>GitHub<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://opencollective.com/electron target=_blank rel="noopener noreferrer" class=footer__link-item>Open Collective<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://p.datadoghq.com/sb/c44e1df0-85d7-11ee-94c9-da7ad0900002-c245f7ef47d0d0c32abecdc0938c2a85 target=_blank rel="noopener noreferrer" class=footer__link-item>Infrastructure Dashboard<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></ul></div></div><div class=footerSplit_ceoI><div class="footer__bottom text--left"><div class=margin-bottom--sm><a href=https://openjsf.org/ rel="noopener noreferrer" class=footerLogoLink_BH7S><img src=/assets/img/openjsf_logo.svg alt="OpenJS Foundation Logo" class="footer__logo themedComponent_mlkZ themedComponent--light_NVdE"><img src=/assets/img/openjsf_logo-dark.svg alt="OpenJS Foundation Logo" class="footer__logo themedComponent_mlkZ themedComponent--dark_xIcU"></a></div><div class=footer__copyright>Copyright © 2023 OpenJS Foundation and Electron contributors.</div></div><div class="footer__bottom text--right"><div class=margin-bottom--sm>Hosting and infrastructure graciously provided by</div><div class=logoCluster_P_xL><img src=/assets/third-parties/azure.png alt="Azure Logo"><img src=/assets/third-parties/heroku_dark.png alt="Heroku Logo" class=darkOnly_ojNJ><img src=/assets/third-parties/heroku_light.png alt="Heroku Logo" class=lightOnly_R5kF><img src=/assets/third-parties/datadog_dark.png alt="DataDog Logo" class=darkOnly_ojNJ><img src=/assets/third-parties/datadog_light.png alt="DataDog Logo" class=lightOnly_R5kF></div></div></div></div></footer></div>