Do this before your first build. It takes one second, and skipping it means shipping an app that identifies itself as someone else's template.
1. Run it
npm run rebrand -- --name "Acme Notes" --id com.acme.notes --owner your-github-handle --repo acme-notesThe four values:
--nameis what users see: the window title, the Start Menu entry, the installer.--idis the bundle identifier, in reverse domain form. It has to be unique on the machine and it is awkward to change later, so use a domain you control.--ownerand--repoare the GitHub account and repository where releases will live. The auto-updater is pointed at them.
Measured: 1 second, 7 files changed. It prints exactly what it changed:
Rebrand complete:
productName: Electron Starter -> Acme Notes
appId: com.example.electron-starter -> com.acme.notes
npm name: electron-starter -> acme-notes
scheme: electron-starter -> acme-notes
GitHub: PLACEHOLDER_OWNER/PLACEHOLDER_REPO -> your-github-handle/acme-notes2. Finish the two things it tells you to
npm install
npm run build:unpackThe install updates package-lock.json with the new name. The unpacked build is a fast way to confirm the app still starts before you spend time on a full installer.
3. Replace the icon
Put a 1024x1024 PNG at resources/icon.png, then:
npm run iconsThis generates every size Windows, macOS, and Linux ask for.
What rebrand does not change
npm run rebrand edits configuration and code. It does not rewrite prose, so a few documentation files inside the repo still contain the old URI scheme as an example: .env.example, docs/auth.md, docs/distribution.md, and docs/manual-verification.md.
This matters for OAuth
If you set up sign-in, register acme-notes://oauth/callback with your provider, not the electron-starter://oauth/callback you will see written in docs/auth.md. A callback registered against the old scheme fails silently: the browser hands the code to an app that is no longer listening.
Deeper customisation
- Colors, spacing, radius, motion are Tailwind 4 design tokens in
src/renderer/styles/. Change them there and the whole app follows, in both light and dark. - Window size and behaviour live in
src/main/index.ts, in thecreateWindowfunction. - Which screens appear is
src/renderer/screens-registry.ts. Delete an entry and delete its folder undersrc/features/. The sidebar, the routing, and the command palette all read from that one file.
I rebranded this Electron template to my app. Now remove the demo screens I do not need (Counter, Explorer, Batch, Demo, Sign-in) by deleting their folders under src/features/ and their entries in src/renderer/screens-registry.ts, plus their nav.* keys in both i18n locale files. Then run npm run typecheck and npm test to confirm nothing else referenced them.
Next: Project Structure.