#Getting started

#Overview

Rselectron is an Electron build tool based on Rsbuild. It aims for a faster, simpler development experience. It provides:

• Explicit dev / build / preview / inspect commands for Electron’s dual environments (Node.js main process and browser renderer).
• A single config entry for main, preload, and renderer, with Electron-oriented defaults.
• HMR for the renderer, and hot reload for main and preload when enabled.
• Rsbuild / Rspack under the hood.

#Install

npm add @rselectron/core @rsbuild/core electron -D

yarn add @rselectron/core @rsbuild/core electron -D

pnpm add @rselectron/core @rsbuild/core electron -D

bun add @rselectron/core @rsbuild/core electron -D

deno add npm:@rselectron/core npm:@rsbuild/core npm:electron -D

#Command line interface

After install you can run npx rselectron, or invoke the installed CLI:

#rselectron dev

Builds main and preload, starts a development server for the renderer, and launches Electron.

#rselectron build

Builds configured main, preload, and renderer sources. Run this before packaging an installer.

#rselectron preview

Builds (unless --skip-build) and launches Electron to preview the production build.

#rselectron inspect

Prints normalized configuration without building or launching.

See Command Line Interface for the full option list. Programmatic usage: JavaScript API.

#Configuring Rselectron

When you run the CLI, Rselectron resolves a config file at the project root (for example rselectron.config.ts). A minimal config looks like this:

import { defineConfig } from '@rselectron/core';

export default defineConfig({
  main: {
    root: './src/main',
    source: { entry: { index: './index.ts' } },
  },
  preload: {
    root: './src/preload',
    source: { entry: { index: './index.ts' } },
  },
  renderer: {
    root: './src/renderer',
    source: { entry: { index: './index.ts' } },
  },
});

Each of main / preload / renderer is a full Rsbuild config. Omit a key only when that process is intentionally absent. Details live under Configuration.

#Electron entry

Point Electron’s application entry at the main-process build output. When output.distPath is unset, Rselectron presets Conventional role outputs under out/<role> at the application root. With the minimal config above and a classic (non-type: module) package, package.json can look like:

{
  "name": "electron-app",
  "version": "1.0.0",
  "main": "./out/main/index.js"
}

Keep main (or electron.entry in config) aligned with the actual main output path. Entry extensions follow the Main format / "type" policy (for example "type": "module" with derived ESM uses index.mjs). Set an explicit output.distPath only when you need a custom layout.

#Start from an example

Learning examples (vanilla and React) live in the repository:

• examples/vanilla
• examples/react

Copy an example, install dependencies, then run npm run dev.

#Getting help

If you hit a problem, check Troubleshooting first, then search the GitHub issue. If nothing matches, open a new issue.