# electron-vite-react: an Electron, Vite and React boilerplate that keeps Node out of the renderer

> electron-vite-react is a TypeScript starter that wires Electron to Vite and React, ships an auto-update component and Playwright tests, and deliberately does not enable Node integration in the renderer. Here is what it gives you, what it hides, and who should pick it over Electron Forge.

**electron-vite/electron-vite-react** — :electron: Electron + Vite + React + Sass boilerplate.

- Repository: https://github.com/electron-vite/electron-vite-react
- Website: https://electron-vite.github.io
- Stars: 2,433 · Forks: 326
- Language: TypeScript
- License: MIT
- Published: 2026-09-28 · Updated: 2026-09-28 · Language: en
- Canonical page: https://hysenlabs.com/projects/electron-vite-electron-vite-react

## What electron-vite-react solves, and who it is actually for

Setting up Electron by hand means three build pipelines that disagree with each other: the main process, the preload script, and the renderer. Vite knows nothing about Electron, Electron knows nothing about HMR, and the first afternoon disappears into getting a hot reload that does not restart the whole app on every keystroke. electron-vite-react is a boilerplate that has already made those decisions. The README describes it as "ready out of the box" and says it is based on the official template-react-ts from create-vite, then adds the Electron layer on top.

The target reader is a developer who wants a desktop app with a React UI and does not want to spend a week on the shell. The repository is TypeScript throughout, uses Sass and TailwindCSS v4, and ships Vitest for unit tests plus Playwright for end-to-end tests. If you are building a tool where the UI is the product and the Electron layer is plumbing, this is the shape you want. If Electron is incidental to a mostly native application, the boilerplate's assumptions will fight you.

The project is MIT licensed and not archived. The last push to the repository was on 2026-09-01, so it is still receiving changes. That is not the same as a stable release cadence, and the release list makes the distinction concrete: v2.1.0 was tagged on 2023-03-30, while the package.json in the repository declares version 2.3.0. The tagged releases and the working tree have drifted apart.

## How the three processes are wired together

The repository layout tells most of the story. Source for the main process and the preload script lives under electron/, split into electron/main/ and electron/preload/. The renderer lives under src/. The README states that files under electron/ are compiled into dist-electron/, and package.json confirms the entry point: "main": "dist-electron/main/index.js". So the build output is not a mystery directory, it is the compiled main process that Electron loads.

The renderer is served by Vite during development and bundled for production. The bridge between the two worlds is vite-plugin-electron, which is listed as a devDependency, plus vite-plugin-electron-renderer. The README's security note is the part worth reading twice. It says the renderer: {} preset in vite.config.ts is "only a Vite adapter that polyfills Electron, Node.js APIs and native modules for the renderer process" and that this is not the same as enabling Node integration. If you want direct Node.js access in the renderer, the README says to enable nodeIntegration in the BrowserWindow webPreferences in the main process and to review the security impact carefully.

That distinction matters because it is where most Electron tutorials go wrong. A polyfill that lets the renderer import a module at build time is not the same as a renderer with filesystem access at runtime. This boilerplate keeps the second thing off by default and documents the first thing honestly. The cost is that anything the renderer needs from the operating system has to travel through the preload script, which is more code to write and a boundary to maintain.

## Installing it and getting a first window on screen

The README gives four commands. They assume pnpm, and the badge at the top of the README requires Node.js >= 20.19.0 or >= 22.12.0. Clone, install, run:

```bash
git clone https://github.com/electron-vite/electron-vite-react.git
cd electron-vite-react
pnpm install
pnpm dev
```

pnpm dev starts the Vite dev server, and Electron opens a window pointed at it. According to the README, the available scripts also include pnpm build, which builds the renderer and packages the app with electron-builder, pnpm preview for the production web build, pnpm test for Vitest, pnpm test:e2e for Playwright, and pnpm typecheck for the TypeScript checker. A sensible first move after the window appears is to confirm the baseline is clean:

```bash
pnpm typecheck
pnpm test
```

If those pass on a fresh clone, any later failure is yours. If they do not, you have found an environment problem before writing code, which is the cheapest possible moment to find it. The README does not document a Node version manager setup, so if your shell resolves an older Node you will see the failure at install time rather than at build time.

## Auto-update, Tailwind v4 and the parts that are more than scaffolding

Most boilerplates stop at the build config. This one ships an auto-update component under src/components/update/ with its own README in English and Simplified Chinese, and the feature list names Electron auto update first. The dependency list backs that up: electron-updater is the only entry under dependencies, everything else is a devDependency. That split is deliberate and the README links to a note on dependencies versus devDependencies, because electron-builder packages dependencies and not devDependencies. Put a runtime package in the wrong list and it will be missing from the shipped app.

The other feature worth naming is TailwindCSS v4 via @tailwindcss/vite, alongside Sass. Both are present, so you can use utility classes and stylesheets in the same project. The project structure also shows src/demos/, which is where the sample screens live, and src/type/ for shared types. Test coverage is split between test/ for unit tests and test/e2e/ for Playwright. The README also mentions C/C++ native addon support and links to the electron-vite documentation on dependency pre-bundling.

None of this is a framework. It is a set of working defaults with example code attached. The value is that the example code exercises the real build pipeline, so when you delete it you find out immediately which config keys it was holding up.

## Where this boilerplate will cost you time

The renderer preset is the first trap. It makes Electron and Node APIs importable in the renderer, which looks like Node integration and is not. Teams that skim the security note will either assume they have filesystem access they do not have, or assume they have a security problem they do not have. Read vite.config.ts before you write renderer code that touches anything outside the browser.

The second issue is release hygiene. The newest tagged release is v2.1.0 from 2023-03-30, and package.json declares 2.3.0. There is no changelog in the repository listing, so a team tracking upstream has no documented path from one version to the next beyond reading commits. For a boilerplate you fork once and own, that is fine. For a team that wants to pull upstream fixes periodically, it means diffing the tree yourself.

The third is that this is a boilerplate, not a library. Your application code and the template's code start in the same directories, and upstream changes will conflict with your edits. The README does not document a rollback or upgrade procedure, so the honest expectation is that you fork, rename, and stop tracking upstream after the first sprint.

Finally, the e2e path is heavier than the unit path. pnpm test:e2e runs a pretest step that builds with --mode=test before Playwright starts, so every e2e run pays a full Vite build. That is a real constraint on a fast feedback loop.

## electron-vite-react compared with Electron Forge

Electron Forge is the official Electron tooling and appears in the search terms around this project. The difference is where each one puts the bundler. Forge treats packaging and distribution as the primary problem and brings its own plugin system for Vite, Webpack and others; you choose a bundler as an add-on. electron-vite-react treats Vite as the primary problem and uses electron-builder for packaging, with electron-builder.json sitting at the repository root.

So the question is which layer you want to configure. If your pain is code signing, installers for three platforms and a release pipeline, Forge's opinionated packaging is the stronger starting point, and you would add Vite through its plugin. If your pain is renderer HMR, TypeScript across three processes and a React app that reloads instantly, this boilerplate has already paid that cost. It also ships the auto-update component and the Playwright setup, which Forge leaves to you.

The trade-off is upstream gravity. Forge is maintained by the Electron project itself, so its packaging behaviour tracks Electron releases. electron-vite-react is a community template whose releases lag its working tree, as the v2.1.0 versus 2.3.0 gap shows. Neither is wrong; they optimize for different kinds of maintenance burden.

## Maintenance, licensing and what you are taking on

The licence is MIT, which permits commercial use, modification and redistribution provided the copyright notice and permission notice are retained. That is the whole of the licence implication here; whether your organisation accepts MIT terms is a question for your own review, not something this article can settle. The repository is not archived and the last push was on 2026-09-01, so changes are still landing.

Upgrade cost is the real number to estimate. Because the project is a template and not a dependency, you do not run an upgrade command. You either follow upstream commits by diffing, or you fork once and stop. The dependency versions in package.json are the moving parts you will actually maintain: Electron 42, React 19, Vite 8, TypeScript 6, Tailwind 4, Vitest 4, Playwright 1.60. Each of those has its own migration guide, and this repository does not aggregate them.

One practical consequence of the dependencies-versus-devDependencies split: electron-updater is the single runtime dependency. If you add a package that must exist inside the packaged app, it belongs in dependencies or electron-builder will not include it. The README links to the electron-vite documentation on that distinction, which is the closest thing to an upgrade note the repository offers.

## Conclusion

Adopt electron-vite-react if you want a TypeScript Electron desktop app with Vite HMR, React 19, Tailwind v4 and a pre-wired auto-update component, and you are willing to read vite.config.ts before touching the renderer preset. Do not adopt it if you need a documented migration path between releases or a stable tagged version: the newest release on the repository is v2.1.0 from 2023-03-30 while package.json already reads 2.3.0. Verify first that your Node version satisfies the badge requirement of >= 20.19.0 or >= 22.12.0, then run pnpm typecheck and pnpm test on a clean clone to see the baseline before you add a single line of your own.

## FAQ

### Does electron-vite-react enable Node integration in the renderer?

No. The README states that the renderer: {} preset in vite.config.ts is only a Vite adapter that polyfills Electron, Node.js APIs and native modules, and that it is not the same as enabling Node integration. To get direct Node.js access you must enable nodeIntegration in the BrowserWindow webPreferences in the main process.

### What Node.js version does electron-vite-react require?

The badge at the top of the README requires Node.js >= 20.19.0 or >= 22.12.0. The README does not document a version manager setup, so the check happens at install time.

### What is the electron-vite-react project structure?

Main-process and preload source live under electron/ in electron/main/ and electron/preload/, renderer source under src/, and tests under test/ with end-to-end tests in test/e2e/. The README states that files under electron/ are compiled into dist-electron/, which package.json confirms as the main entry point.

### Does electron-vite-react include auto-update support?

Yes. The feature list names Electron auto update first, electron-updater is the only entry under dependencies, and the component lives in src/components/update/ with its own README in English and Simplified Chinese.

### Which scripts does electron-vite-react provide?

The README lists pnpm dev, pnpm build, pnpm preview, pnpm test, pnpm test:e2e and pnpm typecheck. The e2e script runs a pretest step that builds with --mode=test before Playwright starts.

## Sources

- [electron-vite/electron-vite-react on GitHub](https://github.com/electron-vite/electron-vite-react)
- [License: MIT](https://github.com/electron-vite/electron-vite-react/blob/main/LICENSE)
- [Project website](https://electron-vite.github.io)
- [README](https://github.com/electron-vite/electron-vite-react/blob/main/README.md)
- [Releases](https://github.com/electron-vite/electron-vite-react/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/electron-vite-electron-vite-react