--- description: Learn how to build, run, and package a cross-platform desktop app for macOS, Windows, and Linux using Capacitor and Electron, step by step. title: Build a Desktop App with Capacitor and Electron - Capawesome image: https://capawesome.io/docs/assets/images/social/blog/how-to-build-a-desktop-app-with-capacitor-and-electron.png --- [Skip to content ](#build-a-desktop-app-with-capacitor-and-electron) [πŸ–₯️ Introducing the **Capacitor Electron Platform** β€” build desktop apps for macOS, Windows, and Linux. Free & open source. ](/blog/announcing-the-capacitor-electron-platform/) * [ SDKs ](/docs/sdks/) * [ Formbricks ](/docs/sdks/capacitor/formbricks/) * [ Geocoder ](/docs/sdks/capacitor/geocoder/) * [ Google Sign-In ](/docs/sdks/capacitor/google-sign-in/) * [ Grafana Faro ](/docs/sdks/capacitor/grafana-faro/) * [ Gyroscope ](/docs/sdks/capacitor/gyroscope/) * [ Haptics ](/docs/sdks/capacitor/haptics/) * [ Home Indicator ](/docs/sdks/capacitor/home-indicator/) * [ In-App Browser ](/docs/sdks/capacitor/in-app-browser/) * [ Install Referrer ](/docs/sdks/capacitor/install-referrer/) * [ Intercom ](/docs/sdks/capacitor/intercom/) * [ Intune ](/docs/sdks/capacitor/intune/) * [ Keep Awake ](/docs/sdks/capacitor/keep-awake/) * [ libSQL ](/docs/sdks/capacitor/libsql/) * [ Light Sensor ](/docs/sdks/capacitor/light-sensor/) * [ Live Update ](/docs/sdks/capacitor/live-update/) * [ Localization ](/docs/sdks/capacitor/localization/) * [ Mail Composer ](/docs/sdks/capacitor/mail-composer/) * [ Managed Configurations ](/docs/sdks/capacitor/managed-configurations/) * [ Maps Launcher ](/docs/sdks/capacitor/maps-launcher/) * [ Media Session ](/docs/sdks/capacitor/media-session/) * [ ML Kit ](/docs/sdks/capacitor/mlkit/) * [ Navigation Bar ](/docs/sdks/capacitor/navigation-bar/) * [ Network ](/docs/sdks/capacitor/network/) * [ NFC ](/docs/sdks/capacitor/nfc/) * [ Node.js ](/docs/sdks/capacitor/nodejs/) * [ OAuth ](/docs/sdks/capacitor/oauth/) * [ Passkeys ](/docs/sdks/capacitor/passkeys/) * [ Password Autofill ](/docs/sdks/capacitor/password-autofill/) * [ PDF Generator ](/docs/sdks/capacitor/pdf-generator/) * [ PDF Viewer ](/docs/sdks/capacitor/pdf-viewer/) * [ Pedometer ](/docs/sdks/capacitor/pedometer/) * [ Permissions ](/docs/sdks/capacitor/permissions/) * [ Phone Dialer ](/docs/sdks/capacitor/phone-dialer/) * [ Photo Editor ](/docs/sdks/capacitor/photo-editor/) * [ Photo Manipulator ](/docs/sdks/capacitor/photo-manipulator/) * [ PixLive ](/docs/sdks/capacitor/pixlive/) * [ PostHog ](/docs/sdks/capacitor/posthog/) * [ Printer ](/docs/sdks/capacitor/printer/) * [ Privacy Screen ](/docs/sdks/capacitor/privacy-screen/) * [ Proximity Sensor ](/docs/sdks/capacitor/proximity-sensor/) * [ Purchases ](/docs/sdks/capacitor/purchases/) * [ RealtimeKit ](/docs/sdks/capacitor/realtimekit/) * [ Root Detection ](/docs/sdks/capacitor/root-detection/) * [ Screen Brightness ](/docs/sdks/capacitor/screen-brightness/) * [ Screen Orientation ](/docs/sdks/capacitor/screen-orientation/) * [ Screen Reader ](/docs/sdks/capacitor/screen-reader/) * [ Screenshot ](/docs/sdks/capacitor/screenshot/) * [ Secure Preferences ](/docs/sdks/capacitor/secure-preferences/) * [ Settings Launcher ](/docs/sdks/capacitor/settings-launcher/) * [ Shake ](/docs/sdks/capacitor/shake/) * [ Silent Mode ](/docs/sdks/capacitor/silent-mode/) * [ SIM ](/docs/sdks/capacitor/sim/) * [ SMS Composer ](/docs/sdks/capacitor/sms-composer/) * [ Speech Recognition ](/docs/sdks/capacitor/speech-recognition/) * [ Speech Synthesis ](/docs/sdks/capacitor/speech-synthesis/) * [ Share Target ](/docs/sdks/capacitor/share-target/) * [ Square Mobile Payments ](/docs/sdks/capacitor/square-mobile-payments/) * [ SQLite ](/docs/sdks/capacitor/sqlite/) * [ Superwall ](/docs/sdks/capacitor/superwall/) * [ System WebView ](/docs/sdks/capacitor/system-webview/) * [ Tauri ](/docs/sdks/capacitor/tauri/) * [ Text Interaction ](/docs/sdks/capacitor/text-interaction/) * [ Text Zoom ](/docs/sdks/capacitor/text-zoom/) * [ Thermal State ](/docs/sdks/capacitor/thermal-state/) * [ Toast ](/docs/sdks/capacitor/toast/) * [ Torch ](/docs/sdks/capacitor/torch/) * [ Vault ](/docs/sdks/capacitor/vault/) * [ Volume ](/docs/sdks/capacitor/volume/) * [ Wallet ](/docs/sdks/capacitor/wallet/) * [ Wifi ](/docs/sdks/capacitor/wifi/) * [ YouTube Player ](/docs/sdks/capacitor/youtube-player/) * [ Zip ](/docs/sdks/capacitor/zip/) * [ Cordova ](/docs/sdks/cordova/) * [ Cloud ](/docs/cloud/) * [ Integrations ](/docs/cloud/live-updates/integrations/) * Concepts * Reference * [ Troubleshooting ](/docs/cloud/live-updates/troubleshooting/) * [ FAQ ](/docs/cloud/live-updates/faq/) * [ Native Builds ](/docs/cloud/native-builds/) * [ Set Up Environments ](/docs/cloud/native-builds/environments/) * [ Overwrite Native Configurations ](/docs/cloud/native-builds/native-configurations/) * [ Auto-Increment Build Numbers ](/docs/cloud/native-builds/auto-incrementing-build-numbers/) * [ Configure the Web Build Script ](/docs/cloud/native-builds/web-build-script/) * [ Build from a Monorepo ](/docs/cloud/native-builds/monorepo/) * [ Use pnpm, Yarn, or bun ](/docs/cloud/native-builds/package-managers/) * [ Install Private npm Packages ](/docs/cloud/native-builds/npm-private-registry/) * [ Override the Java Version ](/docs/cloud/native-builds/override-java-version/) * [ Custom iOS Provisioning Profiles ](/docs/cloud/native-builds/custom-ios-provisioning-profiles/) * [ Build without Git ](/docs/cloud/native-builds/build-without-git/) * [ Access Git Behind a Firewall ](/docs/cloud/native-builds/firewall-access/) * [ Integrations ](/docs/cloud/native-builds/integrations/) * Reference * [ Troubleshooting ](/docs/cloud/native-builds/troubleshooting/) * [ FAQ ](/docs/cloud/native-builds/faq/) * [ App Store Publishing ](/docs/cloud/app-store-publishing/) * [ Submit a Build ](/docs/cloud/app-store-publishing/submit-a-build/) * [ Submit Automatically After a Build ](/docs/cloud/app-store-publishing/submit-automatically/) * [ Troubleshooting ](/docs/cloud/app-store-publishing/troubleshooting/) * [ FAQ ](/docs/cloud/app-store-publishing/faq/) * [ Automations ](/docs/cloud/automations/) * [ Reference ](/docs/cloud/automations/reference/) * [ Troubleshooting ](/docs/cloud/automations/troubleshooting/) * [ FAQ ](/docs/cloud/automations/faq/) * [ Assist ](/docs/cloud/assist/) * [ CLI ](/docs/cloud/cli/) * APIs and SDKs * [ Webhooks ](/docs/cloud/webhooks/) * [ Integrations ](/docs/cloud/integrations/) * Account * [ Organization ](/docs/cloud/organizations/) * [ Two-Factor Enforcement ](/docs/cloud/organizations/two-factor-authentication/) * [ Audit Logs ](/docs/cloud/organizations/audit-logs/) * [ Billing ](/docs/cloud/organizations/billing/) * [ License Keys ](/docs/cloud/license-keys/) * [ AI ](/docs/ai/) * [ Insiders ](/docs/insiders/) * [ Billing & Plans ](/docs/insiders/billing-and-plans/) * [ FAQ ](/docs/insiders/faq/) * [ License ](https://capawesome.io/legal/eula/) * [ Support ](/docs/support/) * [ Contributing ](/docs/contributing/) * Contributing code * [ Code of Conduct ](/docs/contributing/code-of-conduct/) * [ Questions ](https://docs.github.com/en/discussions/collaborating-with-your-community-using-discussions/participating-in-a-discussion#creating-a-discussion) * [ Blog ](/blog/) * Categories * [ Conclusion ](#conclusion) * Related links # Build a Desktop App with Capacitor and Electron[ΒΆ](#build-a-desktop-app-with-capacitor-and-electron "Permanent link") If you already have a Capacitor web app running on iOS and Android, you're only a few commands away from a Capacitor Electron desktop app that ships to macOS, Windows, and Linux too. In this tutorial you'll take an existing web build, add the desktop target with the [Capacitor Electron Platform](/docs/sdks/capacitor/electron/), run it in a real window, and package native installers your users can download. No new toolchain to learn, just the same `cap` workflow you already use. [ ![Build and deploy your Capacitor app with Capawesome Cloud](https://capawesome.io/assets/banners/cloud-build-and-deploy-capacitor-apps.png?t=1) ](https://capawesome.io/) **Key takeaways:** * The platform ships as the `@capawesome/capacitor-electron` package, MIT licensed and free. * It targets all three desktop operating systems: macOS, Windows, and Linux. * It requires Capacitor 6 or later and Electron 28 or later, with no upper version bound. * You use the exact same commands as on mobile: `cap add`, `cap sync`, `cap run`, and `cap open`. * Packaging produces real native installers, including `.dmg`, `.msi`, `.exe`, `.deb`, and `.AppImage`. ## What is the Capacitor Electron Platform?[ΒΆ](#what-is-the-capacitor-electron-platform "Permanent link") The Capacitor Electron Platform is a Capacitor platform that runs your web app inside an Electron shell, giving you a genuine desktop application from the same codebase you use for mobile. It plugs into the Capacitor CLI as a first-class target, so Electron behaves like just another platform alongside iOS and Android. That framing matters, because it means you don't adopt a parallel build system or a second mental model. The web assets you ship to phones are the same assets that render on the desktop, and the Capacitor bridge you already call from JavaScript is available in the desktop window too. For the background story and design goals, read the [Capacitor Electron Platform announcement](/blog/announcing-the-capacitor-electron-platform/). ## What you'll need[ΒΆ](#what-youll-need "Permanent link") Before you start, make sure you have a recent Node.js version installed and an existing Capacitor app to work with. Any Capacitor web app will do, since Electron loads the same web build you already produce for the other platforms. Whether your frontend is built with Angular, React, Vue, or plain HTML doesn't matter here, because Capacitor treats them all the same way once they compile down to static web assets. If you're starting from scratch, you can scaffold a fresh project with the standard Capacitor generator: `[](#%5F%5Fcodelineno-0-1)npm create @capacitor/app ` That gives you a minimal app you can extend, but there's nothing special you need to add for desktop support. Once your web assets build into a folder that Capacitor can pick up, you're ready. It's worth confirming your `capacitor.config.ts` points its `webDir` at the correct output directory for your framework, since that's the folder Electron will load at runtime. If your mobile builds already work, this is almost certainly configured correctly. ## How do you add the Electron platform to a Capacitor app?[ΒΆ](#how-do-you-add-the-electron-platform-to-a-capacitor-app "Permanent link") You add the Electron platform in two steps: install the package, then register it as a Capacitor platform. First, install the dependency into your project: `[](#%5F%5Fcodelineno-1-1)npm install @capawesome/capacitor-electron ` With the package in place, add the platform the same way you would add iOS or Android: `[](#%5F%5Fcodelineno-2-1)npx cap add @capawesome/capacitor-electron ` This scaffolds an `electron/` folder in your project root, and that folder is yours to own and commit. Inside it you'll find a `main.ts` entry point (roughly five lines that call `createCapacitorElectronApp(config)`), a `capacitor.electron.config.ts` for window and platform settings, an `electron-builder.config.js` that controls packaging, and an `assets/` directory for your icons. Because these files live in your repository, you can customize them freely without fighting the tooling. The thin `main.ts` is a deliberate design choice. Instead of hiding the Electron main process behind an opaque dependency, the platform hands you a tiny entry point and does the heavy lifting inside `createCapacitorElectronApp`. If you ever need to hook into the app lifecycle, register a native menu, or add a custom IPC handler, you have a real Electron main process file to edit. For most apps you'll never touch it, and that's the point: the defaults are sensible enough that the scaffold just works out of the box. Prefer to let an assistant wire things up for you? There's an AI-assisted setup path as well. Running the following command pulls in a skill that walks through the platform setup for you: `[](#%5F%5Fcodelineno-3-1)npx skills add capawesome-team/skills --skill capacitor-platforms ` Both paths land you in the same place. Pick whichever fits how you like to work. ## Running your desktop app[ΒΆ](#running-your-desktop-app "Permanent link") To see your app in a window, sync your web assets into the Electron project and then launch it. Start with a sync so the latest build lands in the desktop shell: `[](#%5F%5Fcodelineno-4-1)npx cap sync @capawesome/capacitor-electron ` Once the sync finishes, open the desktop window with the run command: `[](#%5F%5Fcodelineno-5-1)npx cap run @capawesome/capacitor-electron ` One caveat is worth burning into memory here. Always pass the full package name. If you type a bare `npx cap sync electron`, the CLI resolves `electron` to the unrelated `electron` npm package and quietly does nothing useful, which is a confusing way to lose ten minutes. The full `@capawesome/capacitor-electron` identifier is what tells Capacitor to target this platform. During development you'll usually want live reload instead of re-syncing after every change. Set a `server.url` in your `capacitor.config.ts` that points at your dev server, and Electron will load from there with full hot module replacement: `[](#%5F%5Fcodelineno-6-1)const config: CapacitorConfig = { [](#%5F%5Fcodelineno-6-2) server: { [](#%5F%5Fcodelineno-6-3) url: 'http://localhost:5173', [](#%5F%5Fcodelineno-6-4) }, [](#%5F%5Fcodelineno-6-5)}; ` Now your desktop window refreshes as you edit, exactly like a browser tab. Remember to remove or guard that `server.url` before you package for production, otherwise your installed app would try to reach a dev server that isn't running. A common pattern is to set the URL only when a development environment variable is present, so production builds always load the bundled assets. If you'd rather open the project in Electron's own tooling instead of running it directly, the `cap open` command works here as well: `[](#%5F%5Fcodelineno-7-1)npx cap open @capawesome/capacitor-electron ` Between `sync`, `run`, and `open`, the desktop platform gives you the same three verbs you already reach for on mobile, which keeps the day-to-day rhythm of development identical across every target. ## Configuring the app window[ΒΆ](#configuring-the-app-window "Permanent link") Window behavior is controlled through `capacitor.electron.config.ts`, where you define things like the initial size, minimum bounds, and deep link handling. The config uses a typed `defineConfig` helper so your editor can autocomplete the available options: `[](#%5F%5Fcodelineno-8-1)import { defineConfig } from '@capawesome/capacitor-electron/config'; [](#%5F%5Fcodelineno-8-2) [](#%5F%5Fcodelineno-8-3)export default defineConfig({ [](#%5F%5Fcodelineno-8-4) window: { [](#%5F%5Fcodelineno-8-5) width: 1280, [](#%5F%5Fcodelineno-8-6) height: 800, [](#%5F%5Fcodelineno-8-7) minWidth: 800, [](#%5F%5Fcodelineno-8-8) minHeight: 600, [](#%5F%5Fcodelineno-8-9) }, [](#%5F%5Fcodelineno-8-10) deepLinks: { [](#%5F%5Fcodelineno-8-11) scheme: 'myapp', [](#%5F%5Fcodelineno-8-12) }, [](#%5F%5Fcodelineno-8-13)}); ` The `deepLinks` scheme registers a custom URL protocol so your app can respond to links like `myapp://`, which is handy for OAuth callbacks or opening the app to a specific screen from an external link. The `minWidth` and `minHeight` values stop users from shrinking the window into an unusable layout, so pick numbers that match the smallest reasonable size for your interface. Beyond the basics shown here, the config also supports persisting window state between launches, so your app reopens at the size and position the user left it, which is the kind of small touch desktop users expect. You can also adjust the `titleBarStyle` if you want a more native look on macOS or a more custom chrome that matches your brand. Reach for those once the fundamentals feel comfortable, since the defaults already give you a well-behaved window. ## How do you package a Capacitor Electron app?[ΒΆ](#how-do-you-package-a-capacitor-electron-app "Permanent link") You package the app by running the pack script from inside the `electron/` folder. Move into that folder and kick off the build: `[](#%5F%5Fcodelineno-9-1)cd electron && npm run pack ` Under the hood, the pack script runs a three-stage pipeline. It compiles your TypeScript, vendors the runtime dependencies your app needs, and then hands everything to electron-builder to assemble the final artifacts. The result is a set of native installers tailored to whichever operating system you build on: `.dmg` and `.app` bundles on macOS, `.msi` and `.exe` installers on Windows, and `.deb` and `.AppImage` files on Linux. The dependency vendoring stage deserves a mention, because it's what makes the packaged app self-contained. Rather than shipping your entire `node_modules` folder, the pipeline gathers only the runtime dependencies the main process actually needs, which keeps the installer size reasonable and avoids bundling dev-only tooling into the release. Distribution to real users means signing your binaries. Code signing and, on macOS, notarization are configured in `electron-builder.config.js`, so you point that file at your certificates and credentials and electron-builder handles the rest during packaging. It's the same configuration surface the wider Electron ecosystem already documents, which keeps you on well-trodden ground. Unsigned builds are fine for testing on your own machine, but shipping to end users on macOS and Windows without valid signing will trigger security warnings that scare people off, so plan to set this up before your first public release. ## Using plugins and Live Updates[ΒΆ](#using-plugins-and-live-updates "Permanent link") Any Capacitor plugin that ships an Electron or web implementation works on the desktop platform without extra glue. So if you're using something like the Capacitor Preferences plugin or a plugin with a web fallback, it behaves as you'd expect inside the Electron window. The security model is strict by default and not something you configure away: the renderer runs sandboxed, context isolation is on, a tight content security policy applies, and IPC messages are validated. There's one capability here that's genuinely new for the desktop world. This is the first Capacitor desktop platform with [Live Updates](/docs/cloud/live-updates/) support, so you can ship over-the-air web updates to installed desktop apps and roll back automatically if a bundle fails to boot. That turns a category of "please download the new installer" moments into a silent background update. Still deciding which desktop runtime fits your project? The trade-offs between bundle size, native footprint, and ecosystem maturity are worth thinking through, and we compare them directly in [Electron vs. Tauri for Capacitor apps](/blog/how-to-build-a-desktop-app-with-capacitor-and-electron/electron-vs-tauri-for-capacitor-apps.md). ## FAQ[ΒΆ](#faq "Permanent link") ### Does the platform support Windows, macOS, and Linux?[ΒΆ](#does-the-platform-support-windows-macos-and-linux "Permanent link") Yes. The Capacitor Electron Platform targets all three major desktop operating systems from a single codebase, and packaging produces the appropriate native installers for each. ### Which Capacitor and Electron versions are required?[ΒΆ](#which-capacitor-and-electron-versions-are-required "Permanent link") You need Capacitor 6 or later and Electron 28 or later. There's no upper bound on either, so the platform tracks the latest releases as they land. ### What does `Capacitor.getPlatform()` return on Electron?[ΒΆ](#what-does-capacitorgetplatform-return-on-electron "Permanent link") It returns `'electron'`, which lets you branch on desktop-specific behavior in your code. Note that `Capacitor.isNativePlatform()` returns `true` on Electron, since it's a native shell rather than a browser tab. ### Is the platform free to use?[ΒΆ](#is-the-platform-free-to-use "Permanent link") Yes. The `@capawesome/capacitor-electron` package is open source under the MIT license, so you can use it in commercial and personal projects at no cost. The source lives on [GitHub](https://github.com/capawesome-team/capacitor-electron). ### Do I need a separate build for each operating system?[ΒΆ](#do-i-need-a-separate-build-for-each-operating-system "Permanent link") Packaging generally produces installers for the platform you build on, so a typical setup builds macOS artifacts on macOS, Windows artifacts on Windows, and Linux artifacts on Linux. A CI pipeline with jobs on each OS is the usual way to produce all three from one push. Want to skip the desktop plumbing entirely and ship faster? Capawesome Cloud handles builds, Live Updates, and store publishing for your Capacitor apps so you can focus on the product. [Try Capawesome Cloud Free](https://capawesome.io) ## Conclusion[ΒΆ](#conclusion "Permanent link") Building a Capacitor Electron desktop app comes down to a familiar loop: add the platform, sync your web build, run it in a window, tune the config, and pack native installers. Because it reuses the same `cap` commands you already know, the desktop target stops feeling like a separate project and starts feeling like just one more platform in your Capacitor app. Add Live Updates on top and your desktop users get the same fast iteration your mobile users already enjoy. If you're moving over from the older community setup, the [Migrate off Capacitor Community Electron](/blog/how-to-build-a-desktop-app-with-capacitor-and-electron/capacitor-community-electron-migration.md) guide walks you through the switch. Have questions or want to share what you're building? Join the [Capawesome Discord server](https://discord.gg/VCXxSVjefW), and subscribe to the [Capawesome newsletter](https://capawesome.io/newsletter) to stay in the loop on new releases. July 15, 2026 Back to top ```json { "@context": "https://schema.org", "@type": "BlogPosting", "headline": "Build a Desktop App with Capacitor and Electron", "description": "Learn how to build, run, and package a cross-platform desktop app for macOS, Windows, and Linux using Capacitor and Electron, step by step.", "image": "https://capawesome.io/assets/banners/cloud-build-and-deploy-capacitor-apps.png", "datePublished": "2026-07-15T00:00:00+00:00", "dateModified": "2026-07-15T00:00:00+00:00", "author": [ { "@type": "Person", "name": "Robin Genz", "url": "https://github.com/robingenz" } ], "publisher": { "@type": "Organization", "name": "Capawesome", "url": "https://capawesome.io", "logo": { "@type": "ImageObject", "url": "https://capawesome.io/assets/images/logo.svg" } }, "articleSection": "Capacitor", "keywords": ["Capacitor", "Electron", "Guides"], "isPartOf": { "@type": "Blog", "@id": "https://capawesome.io/blog/#blog" }, "mainEntityOfPage": "https://capawesome.io/blog/how-to-build-a-desktop-app-with-capacitor-and-electron/", "url": "https://capawesome.io/blog/how-to-build-a-desktop-app-with-capacitor-and-electron/" } { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://capawesome.io/" }, { "@type": "ListItem", "position": 2, "name": "Blog", "item": "https://capawesome.io/blog/" }, { "@type": "ListItem", "position": 3, "name": "Build a Desktop App with Capacitor and Electron", "item": "https://capawesome.io/blog/how-to-build-a-desktop-app-with-capacitor-and-electron/" } ] } {"@context": "https://schema.org", "@type": "FAQPage", "mainEntity": [{"@type": "Question", "name": "What is the Capacitor Electron Platform?", "acceptedAnswer": {"@type": "Answer", "text": "The Capacitor Electron Platform is a Capacitor platform that runs your web app inside an Electron shell, giving you a genuine desktop application from the same codebase you use for mobile. It plugs into the Capacitor CLI as a first-class target, so Electron behaves like just another platform alongside iOS and Android. That framing matters, because it means you don't adopt a parallel build system or a second mental model. The web assets you ship to phones are the same assets that render on the desktop, and the Capacitor bridge you already call from JavaScript is available in the desktop window too. For the background story and design goals, read the Capacitor Electron Platform announcement."}}, {"@type": "Question", "name": "How do you add the Electron platform to a Capacitor app?", "acceptedAnswer": {"@type": "Answer", "text": "You add the Electron platform in two steps: install the package, then register it as a Capacitor platform. First, install the dependency into your project: npm install @capawesome/capacitor-electron With the package in place, add the platform the same way you would add iOS or Android: npx cap add @capawesome/capacitor-electron This scaffolds an electron/ folder in your project root, and that folder is yours to own and commit. Inside it you'll find a main.ts entry point (roughly five lines that call createCapacitorElectronApp(config)), a capacitor.electron.config.ts for window and platform settings, an electron-builder.config.js that controls packaging, and an assets/ directory for your icons. Because these files live in your repository, you can customize them freely without fighting the tooling. The thin main.ts is a deliberate design choice. Instead of hiding the Electron main process behind an opaque dependency, the platform hands you a tiny entry point and does the heavy lifting inside createCapacitorElectronApp. If you ever need to hook into the app lifecycle, register a native menu, or add a custom IPC handler, you have a real Electron main process file to edit. For most apps you'll never touch it, and that's the point: the defaults are sensible enough that the scaffold just works out of the box. Prefer to let an assistant wire things up for you? There's an AI-assisted setup path as well. Running the following command pulls in a skill that walks through the platform setup for you: npx skills add capawesome-team/skills --skill capacitor-platforms Both paths land you in the same place. Pick whichever fits how you like to work."}}, {"@type": "Question", "name": "How do you package a Capacitor Electron app?", "acceptedAnswer": {"@type": "Answer", "text": "You package the app by running the pack script from inside the electron/ folder. Move into that folder and kick off the build: cd electron && npm run pack Under the hood, the pack script runs a three-stage pipeline. It compiles your TypeScript, vendors the runtime dependencies your app needs, and then hands everything to electron-builder to assemble the final artifacts. The result is a set of native installers tailored to whichever operating system you build on:.dmg and.app bundles on macOS,.msi and.exe installers on Windows, and.deb and.AppImage files on Linux. The dependency vendoring stage deserves a mention, because it's what makes the packaged app self-contained. Rather than shipping your entire node_modules folder, the pipeline gathers only the runtime dependencies the main process actually needs, which keeps the installer size reasonable and avoids bundling dev-only tooling into the release. Distribution to real users means signing your binaries. Code signing and, on macOS, notarization are configured in electron-builder.config.js, so you point that file at your certificates and credentials and electron-builder handles the rest during packaging. It's the same configuration surface the wider Electron ecosystem already documents, which keeps you on well-trodden ground. Unsigned builds are fine for testing on your own machine, but shipping to end users on macOS and Windows without valid signing will trigger security warnings that scare people off, so plan to set this up before your first public release."}}, {"@type": "Question", "name": "Does the platform support Windows, macOS, and Linux?", "acceptedAnswer": {"@type": "Answer", "text": "Yes. The Capacitor Electron Platform targets all three major desktop operating systems from a single codebase, and packaging produces the appropriate native installers for each."}}, {"@type": "Question", "name": "Which Capacitor and Electron versions are required?", "acceptedAnswer": {"@type": "Answer", "text": "You need Capacitor 6 or later and Electron 28 or later. There's no upper bound on either, so the platform tracks the latest releases as they land."}}, {"@type": "Question", "name": "What does Capacitor.getPlatform() return on Electron?", "acceptedAnswer": {"@type": "Answer", "text": "It returns 'electron', which lets you branch on desktop-specific behavior in your code. Note that Capacitor.isNativePlatform() returns true on Electron, since it's a native shell rather than a browser tab."}}, {"@type": "Question", "name": "Is the platform free to use?", "acceptedAnswer": {"@type": "Answer", "text": "Yes. The @capawesome/capacitor-electron package is open source under the MIT license, so you can use it in commercial and personal projects at no cost. The source lives on GitHub."}}, {"@type": "Question", "name": "Do I need a separate build for each operating system?", "acceptedAnswer": {"@type": "Answer", "text": "Packaging generally produces installers for the platform you build on, so a typical setup builds macOS artifacts on macOS, Windows artifacts on Windows, and Linux artifacts on Linux. A CI pipeline with jobs on each OS is the usual way to produce all three from one push. Want to skip the desktop plumbing entirely and ship faster? Capawesome Cloud handles builds, Live Updates, and store publishing for your Capacitor apps so you can focus on the product. Try Capawesome Cloud Free"}}], "url": "https://capawesome.io/blog/how-to-build-a-desktop-app-with-capacitor-and-electron/"} ```