You know the basic idea — take your HTML, CSS, and JavaScript skills, build a desktop app with them. Cool. But between “I want to” and shipping, there’s a pile of real questions. Which scaffold? How does React talk to the native layer? Does Vue’s reactivity work differently on desktop? How slow is the packaged output?
This one gets into all of that.
Why Use This Thing in 2026?
Tauri’s getting buzz. Flutter Desktop is a thing. So why is this runtime still dominating desktop app development?
Ecosystem. Plain and simple.
VS Code, Slack, Discord, Figma, Notion, WhatsApp desktop, Obsidian. These aren’t experiments — they’re products with hundreds of millions of users. Whatever native feature you need — filesystem, tray, clipboard, auto-updates, menus, shortcuts — someone’s already solved it for this stack.
The current stable line (34.x) runs Chromium 132 + Node.js 22. Sandboxing is tighter. Baseline memory is 8% below v32. Yes, it still ships a full Chrome browser with every app (80 MB minimum), but for most teams, living in a mature ecosystem beats saving 100 MB of disk.
The 2026 Stack
Forge + Vite + your frontend framework of choice — that’s the play.
Tooling has come a long way. People used to cobble together Webpack + electron-builder setups, or grab community templates like `electron-react-boilerplate`. Those aren’t the best path anymore.
Why Forge?
Forge is the official packaging and distribution toolchain from the team that makes this runtime. It replaces the fractured old world of electron-builder, electron-packager, and the rest. One tool does scaffolding, hot reload, packaging, code signing, and auto-updates.
Why Vite?
By 2026, Vite is the default frontend build tool. The `electron-vite` package brings it to both the main process and renderer builds — fast HMR, esbuild pre-bundling, all of it.
Compared to the Webpack era, the difference is stark:
– Cold start goes from ten-plus seconds to one or two
– HMR is basically instant
– Even main process changes get hot-reloaded
React or Vue?
The framework works with anything, but in practice it’s React and Vue:
React
– VS Code runs this combo. Most mature ecosystem going.
– Good fit for editors, data panels, complex interactive UIs
– React DevTools integrates well with the built-in DevTools
Vue 3
– Composition API + `<script setup>` is genuinely pleasant to write
– If you need web + desktop from the same codebase, Vue makes it easier
– The `electron-vite-vue` template is production-ready out of the box
React Setup Walkthrough
For 2026, this is the cleanest path:
```bash
# 1. Scaffold with Forge
npm init electron-app@latest my-app -- --template=vite
# 2. Install React
cd my-app
npm install react react-dom
# 3. Add the Vite React plugin
npm install --save-dev @vitejs/plugin-react
```Then add the plugin to `vite.renderer.config.mjs`:
```js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
});
```That’s literally it. Forge v7+ already splits main and renderer Vite configs internally — you just wire in the framework plugin.
Faster?
Use the `electron-vite` scaffold:
```bash
npm create @electron-vite@latest
```It offers React, Vue, Svelte, and Solid. Pick React, `npm run dev`, done.
Vue 3 Setup Walkthrough
Same pattern, different plugins:
```bash
# Forge scaffold
npm init electron-app@latest my-vue-app -- --template=vite
# Install Vue 3
cd my-vue-app
npm install vue
# Add the Vite Vue plugin
npm install --save-dev @vitejs/plugin-vue
```In `vite.renderer.config.mjs`:
```js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [vue()],
});
```Or go straight with `electron-vite`:
```bash
npm create @electron-vite@latest
# Pick Vue
```
There's also community `electron-vite-vue`:
```bash
npm create @quick-start/electron@latest
```Pick Vue. The layout is three directories — main process, renderer, preload. Clean structure, great for beginners.
The Gotchas
1. IPC Done Right
Two processes. Main (Node.js) and renderer (browser). They talk through IPC.
The rookie move is calling `fs.readFileSync` or reading `process.env` from the renderer. With `contextIsolation` on by default, the renderer can’t touch Node.js APIs anymore. You have to go through IPC:
Main process (main.js):
```js
const { ipcMain } = require('electron');
ipcMain.handle('read-file', async (event, filePath) => {
const fs = require('fs');
return fs.readFileSync(filePath, 'utf-8');
});
```Preload script (preload.js):
```js
const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('electronAPI', {
readFile: (path) => ipcRenderer.invoke('read-file', path),
});
```In a React component:
```jsx
const data = await window.electronAPI.readFile('/path/to/file');
```This is the 2026 pattern. `contextBridge` + `ipcRenderer.invoke` keeps processes properly isolated and memory sane.
2. Hot Reload — Not What You Expect
Vite’s HMR works in the renderer by default. Change a React style and the preview updates instantly. Change main process code and nothing happens.
`electron-vite` solves this: edit main process code, it kills and restarts the app automatically. Feels close to full-stack HMR.
If you’re on Forge + Vite, enable main process watch in `package.json`:
```json
{
"config": {
"forge": {
"packagerConfig": {},
"plugins": [{
"name": "@electron-forge/plugin-vite",
"config": {
"build": [
{ "entry": "src/main.js", "config": "vite.main.config.mjs" },
{ "entry": "src/preload.js", "config": "vite.preload.config.mjs" }
],
"renderer": [
{ "name": "main_window", "config": "vite.renderer.config.mjs" }
]
}
}]
}
}
}
```3. That Bundle Size
A minimal React release build is 80-120 MB. If that bothers you, there are things you can do:
– ASAR archives: Default behavior — packages your code into an ASAR archive, faster file I/O, slightly smaller
– Kill unused Chromium features: `–disable-features` flags for things you don’t need
– Watch your dependencies: Only install native modules you actually use
– Code splitting: React.lazy + Suspense on the renderer side
Also worth remembering — the bulk of `node_modules` isn’t your code. React + a couple UI libraries + state management adds up fast.
4. Security That’s Actually On
The 2026 defaults are better than they used to be, but check these yourself:
```js
new BrowserWindow({
webPreferences: {
contextIsolation: true, // on by default, leave it
nodeIntegration: false, // OFF. Never flip this.
sandbox: true, // sandbox the renderer
preload: path.join(__dirname, 'preload.js'),
webSecurity: true,
},
});
````nodeIntegration: false` is a hard rule. Turn it on and your web UI gets full Node.js access — one XSS and the attacker owns your machine.
What Changed in 2026
electron-vite v5
Hit v5 this year:
– Main process rebuilds are noticeably faster
– Source Code Protection — compile-time obfuscation for sensitive logic
– Better TypeScript support in the project templates
v34 ContextBridge
Version 34 tightened `contextBridge` security. Exposing raw object references from preload is out — use function calls instead. Reduces surface area for the renderer to reach into the main process.
Auto-Update Shifting
`electron-updater` is no longer the default pick. Teams are moving to Forge’s built-in `@electron-forge/plugin-auto-update`. Better integration with the packaging pipeline, supports S3, GitHub Releases, and custom servers out of the box.
Pure Stack or Hybrid?
A 2026 trend is hybrid architecture: the framework handles the UI, Tauri’s Rust backend handles performance-critical or security-sensitive work, talking over local sockets.
Sounds interesting. Realistically, most teams can’t maintain two full stacks. Unless you’re doing video processing or massive data viz, pick one track and stay on it.
Bottom Line
React/Vue + this runtime in 2026 is mature and boring in the best way:
1. Scaffold with Forge + Vite + `@vitejs/plugin-react` or `@vitejs/plugin-vue`
2. IPC via `contextBridge` + `ipcRenderer.invoke`
3. Security — `nodeIntegration: false`, `contextIsolation: true`, `sandbox: true`
4. Hot reload — use `electron-vite` for both main and renderer HMR
5. Auto-update — Forge’s official plugin-auto-update
It’s that old reliable tool. You don’t love the bundle size or the memory footprint, but it ships and it works.
—
*Based on the official docs, electron-vite docs, and community patterns. First time? Start with an official template, get something running, then customize. The fastest way to stall is engineering the perfect setup before you ship a single line.*
📖 Recommended Reading
you may also be interested in these articles related to front-end engineers and AI:
React Compiler 1.0 Is Here: Can We Finally Delete useMemo and useCallback?
React 19 vs Vue 3.6: Same Year, Two Radically Different Frontend Philosophies
Run Open-Source LLMs Locally: From Ollama to DeepSeek and Build Your Private AI
What Is Dify? The Open-Source AI App Platform Every Developer Should Know