Skip to main content

Best Electron Boilerplates for Desktop Apps in 2026

·StarterPick Team
Share:

TL;DR

electron-vite for new apps in 2026 — Vite HMR, framework-agnostic, and the fastest DX. electron-react-boilerplate if you want a battle-tested React setup with 7k+ stars. Electron Forge for the officially-recommended toolchain with code signing support. Quasar Desktop if you are on Vue and want to target web, mobile, and desktop from one codebase.

Electron: Still the Desktop Web Standard

Electron powers the most-used developer tools in existence: VS Code (100M+ users), Slack, Discord, Figma, Notion, and 1Password all run on Electron. Despite its reputation for memory usage, Electron remains the most practical way to ship cross-platform desktop apps with web technologies.

In 2026, the Electron ecosystem has matured significantly. Vite replaced Webpack. TypeScript is default. Native module handling is well-understood. The boilerplate landscape has consolidated around a few excellent options.

Quick Comparison

StarterPriceBundlerFrameworkTypeScriptAuto-UpdateBest For
electron-viteFreeViteAnyelectron-updaterModern Electron apps
electron-react-boilerplateFreeWebpack→ViteReactelectron-updaterReact desktop apps
electron-forgeFreeVariousAnySquirrelOfficial toolchain
Quasar DesktopFreeViteVueelectron-updaterVue cross-platform

The Starters

electron-vite — Best Modern Starter

Price: Free (MIT) | Creator: Alex Wei

The modern Electron development toolkit. Vite-based build system, hot module replacement for both main and renderer processes, TypeScript, source code protection, and support for any UI framework (React, Vue, Svelte, Vanilla).

npm create @quick-start/electron@latest my-app
# Choose: React / Vue / Svelte / Vanilla + TypeScript

Project structure:

├── src/
│   ├── main/           # Main process (Node.js)
│   │   ├── index.ts    # App entry
│   ├── preload/        # Preload scripts (IPC bridge)
│   │   ├── index.ts
│   └── renderer/       # Renderer process (web app)
│       ├── src/        # Your UI framework code
└── electron.vite.config.ts

The key advantage over older Electron starters is the Vite integration. Hot module replacement works across all three layers — main, preload, and renderer — so you see changes in under a second without restarting the entire Electron process. Source code protection via bytecode compilation is also built in, which matters if you are shipping commercial software.

Choose if: You want the fastest modern Electron development experience with Vite HMR and you have no strong framework preference.

electron-react-boilerplate — Best React Desktop

Price: Free (MIT) | Creator: Community (7k+ stars)

Long-running, production-proven React + Electron boilerplate. Recently migrated to Vite from Webpack. React Router, TypeScript, Jest + React Testing Library, ESLint, electron-updater for automatic updates, and GitHub Actions releases.

The community behind this project has been maintaining it since 2015, which means years of solved edge cases. GitHub Actions workflows for packaging and releasing to all three platforms are included out of the box. The architecture follows best practices for the main/preload/renderer split.

If you have worked with Create React App in the past, the folder structure will feel familiar. The migration to Vite means the slow rebuild times from the Webpack era are gone.

Choose if: React is your UI of choice and you want a mature, community-maintained boilerplate with an extensive commit history.

Electron Forge — Best Official Toolchain

Price: Free | Creator: OpenJS Foundation

The official Electron build/test/package toolchain. Framework-agnostic — use with React, Vue, Angular, or vanilla JavaScript. Handles code signing, notarization, auto-updates, and distribution. The recommended approach from the Electron documentation.

npm init electron-app@latest my-app --template=webpack
# or
npm init electron-app@latest my-app --template=vite

Forge's plugin system is the differentiator. The @electron-forge/plugin-vite gives you a Vite setup, while the packager plugins handle platform-specific outputs: .exe installers via NSIS, .dmg images for macOS, and AppImage/deb for Linux. Because Forge is maintained by the Electron team itself, it tracks compatibility with new Electron releases faster than community alternatives.

Choose if: You want the officially recommended toolchain, maximum flexibility in your framework choice, and first-party support for code signing.

Quasar Desktop — Best Vue Cross-Platform

Price: Free (MIT) | Creator: Quasar Team

Quasar is a Vue 3 framework with a single codebase that targets web, Electron desktop, Capacitor mobile (iOS/Android), and browser extensions. The Electron mode is a first-class target, not an afterthought.

The pitch is write-once, ship-everywhere. A Quasar component tree renders in the browser as a SPA or SSR app, in Electron as a desktop app, and via Capacitor as a native mobile app. The Quasar CLI handles the platform switching.

When does it make sense over standalone Electron? If you are already building a Vue web app and want to ship a desktop version without maintaining a separate codebase. The tradeoff is that Quasar adds an opinionated layer on top of Vue — you get its component library, routing conventions, and build tooling rather than setting those up yourself.

Choose if: You are on Vue 3, you want to target multiple platforms from one codebase, and you are comfortable adopting the Quasar conventions and component library.

Electron Architecture Essentials

Main vs Renderer Process

Electron's two-process architecture is the most important concept to understand:

// main/index.ts — Node.js process, full OS access
import { app, BrowserWindow, ipcMain } from 'electron';

ipcMain.handle('read-file', async (event, path) => {
  return fs.readFile(path, 'utf8'); // Full Node.js access
});

// preload/index.ts — Bridge between main and renderer
import { contextBridge, ipcRenderer } from 'electron';

contextBridge.exposeInMainWorld('api', {
  readFile: (path: string) => ipcRenderer.invoke('read-file', path)
});

// renderer/src/App.tsx — Sandboxed web app
function App() {
  const readFile = async () => {
    const content = await window.api.readFile('/path/to/file');
    // Access Node.js capabilities safely
  };
}

Good boilerplates set up this IPC pattern for you. Bad boilerplates nodeIntegration: true everywhere (security risk).

Auto-Updates

Every production Electron app needs automatic updates. Users do not manually download new versions of VS Code — it just updates. Your app should too.

// main/index.ts
import { autoUpdater } from 'electron-updater';

autoUpdater.on('update-available', () => {
  // Notify user
});
autoUpdater.on('update-downloaded', () => {
  autoUpdater.quitAndInstall();
});
autoUpdater.checkForUpdatesAndNotify();

electron-vite and electron-react-boilerplate both include this configured correctly. The default update source is GitHub Releases, which costs nothing. For S3-hosted updates — which give you more control over rollout timing and rollback — configure the publish key in your electron-builder.yml to point at an S3 bucket. S3 hosting lets you stage a release to 10% of users first, watch crash reports, and expand to 100% only when you are confident. GitHub Releases is simpler but gives you no staged rollout capability.

Code Signing and Distribution

This is the topic most boilerplate guides skip, and it will block your first real release.

macOS Code Signing

Apple requires that apps distributed outside the Mac App Store be code-signed and notarized. Without notarization, macOS Gatekeeper will block users from opening your app unless they navigate through a multi-step workaround in System Preferences. Most users will not do this.

You need an Apple Developer account ($99/year). Notarization runs through Apple's servers and takes 1–5 minutes per build. electron-builder handles the submission automatically when you configure your signing credentials.

Windows Code Signing

Windows Defender and SmartScreen show a warning when users run unsigned executables. This is a significant trust barrier for your first releases. An EV (Extended Validation) code signing certificate costs $300–500/year from providers like DigiCert or Sectigo. Standard OV certificates are cheaper but take longer to build reputation with SmartScreen.

electron-builder Configuration

electron-builder handles code signing for both platforms when configured:

# electron-builder.yml
appId: com.yourcompany.yourapp
productName: YourApp

mac:
  category: public.app-category.developer-tools
  hardenedRuntime: true
  gatekeeperAssess: false
  entitlements: build/entitlements.mac.plist
  entitlementsInherit: build/entitlements.mac.plist
  notarize:
    teamId: YOUR_APPLE_TEAM_ID

win:
  certificateSubjectName: "Your Company Name"
  signingHashAlgorithms: ["sha256"]

publish:
  provider: github
  owner: your-username
  repo: your-repo

Set APPLE_ID, APPLE_APP_SPECIFIC_PASSWORD, and CSC_LINK (the .p12 certificate path) as environment variables in your CI environment. GitHub Actions secrets work well for this.

Native Modules

Native modules are Node.js packages that include compiled C++ code: better-sqlite3, sharp, canvas, bcrypt, and node-pty are common examples. They must be compiled against a specific Node.js version's ABI — and Electron ships its own Node.js version, which usually differs from the system Node.js.

If you install a native module with your system Node.js and then run it in Electron, you get a cryptic error about a module not being built for the right Node.js version.

The fix is rebuilding native modules for Electron's Node.js version. electron-rebuild handles this:

npm install --save-dev @electron/rebuild
./node_modules/.bin/electron-rebuild

electron-vite and Electron Forge both have hooks that run this rebuild step automatically during the build process. electron-react-boilerplate includes it as a postinstall script. If you roll your own setup, you will need to wire this up yourself — it is one of the more common causes of "works on my machine, fails in production" bugs in Electron apps.

If you are using better-sqlite3 specifically, prefer it over the sqlite3 package — it is synchronous, faster, and more reliable to rebuild for Electron.

Packaging and Distribution Strategies

Electron Builder vs Electron Forge

Both handle cross-platform packaging, but they have different philosophies. Electron Builder is a standalone tool focused purely on packaging and distribution — it has no opinion about your dev server or build system. Electron Forge is an end-to-end toolchain that handles dev server, testing, building, and distribution in one opinionated package.

For most projects, electron-builder gives more flexibility at the cost of more configuration. Electron Forge gives less flexibility but requires fewer decisions upfront.

Platform Output Formats

PlatformFormatNotes
WindowsNSIS installerFamiliar .exe installer, handles upgrades
WindowsPortableSingle .exe, no install required
macOSDMGDrag-to-Applications installer
macOSPKGFor Mac App Store submission
LinuxAppImageSingle file, runs anywhere
LinuxdebDebian/Ubuntu systems
LinuxrpmFedora/RHEL systems

Distribution Channels

GitHub Releases is the default for most open-source and indie projects. electron-builder uploads your artifacts automatically on CI. Combined with electron-updater, it gives you free hosting and automatic update delivery.

Microsoft Store and Mac App Store give you discoverability and the ability to charge through platform billing. Both require additional configuration (sandboxing, different signing flows) and review processes. Electron Forge has specific makers for both stores. Start with direct distribution and add stores later.

Electron vs Tauri

The key decision for desktop apps in 2026:

ElectronTauri
Bundle size50-200MB3-30MB
Memory100-500MB10-50MB
LanguageJavaScriptRust + JavaScript
WebviewBundled ChromiumSystem webview
Maturity2013, very mature2022, growing fast
Consistency✅ Same renderer everywhere⚠️ System webview varies

Tauri wins on size and memory. Electron wins on consistency and ecosystem maturity.

When to Start with Electron

Use Electron when:

  • Your team knows JavaScript/TypeScript and does not want to learn Rust
  • You need consistent rendering behavior across Windows, macOS, and Linux
  • You are building a tool that your users will compare to VS Code or Notion (expectations are set by Electron apps)
  • You have web app code you want to reuse directly in the desktop app
  • You need a large npm ecosystem — native Node.js modules, database drivers, etc.
  • Your app needs to run on Linux distributions that ship old WebKit versions (Tauri's system webview is notoriously inconsistent on older Linux)

Consider Tauri when bundle size is a hard product requirement — shipping a 150MB installer for a simple utility is hard to justify. Also consider Tauri if you have Rust experience on the team and want the security benefits of a memory-safe backend.

Conclusion

For most developers starting a new desktop app in 2026, electron-vite is the right starting point. It pairs Vite's fast feedback loop with a clean architecture that separates main, preload, and renderer concerns correctly. If your team is React-specific and wants a boilerplate with years of production use behind it, electron-react-boilerplate is the mature alternative.

Plan for code signing early — it is not an optional polish step, it is required for users to trust and run your app. Factor the $99–500/year certificate cost into your product budget before launch.

Browse the full list of Electron starters on StarterPick, compare cross-platform options in the desktop boilerplate category, or see how Electron stacks up against its main alternative in the best Tauri boilerplates guide. The desktop app market has seen renewed interest driven by AI-native applications — tools like local model runners, AI-powered writing apps, and offline-capable developer tools are choosing Electron for its mature Node.js integration and Web API access, keeping the framework highly relevant for new projects in 2026.

As your Electron app matures, two boilerplate decisions compound. Testing desktop apps is harder than testing web apps — IPC calls, file system access, and OS-specific behavior all require different strategies than standard Jest unit tests. The best boilerplates for testing guide covers which starters include Playwright for E2E, Spectron patterns, and mocking approaches for Electron's main/renderer split. If you're adding AI features — Ollama for local inference, Claude API for user-facing features — the guide to adding AI features to your boilerplate covers patterns that work within Electron's process boundaries.

Check out this boilerplate

View electron-viteon StarterPick →

The SaaS Boilerplate Matrix (Free PDF)

20+ SaaS starters compared: pricing, tech stack, auth, payments, and what you actually ship with. Updated monthly. Used by 150+ founders.

Join 150+ SaaS founders. Unsubscribe in one click.