Development

Development

Prerequisites

Install Node.js (LTS, v18 or newer) from https://nodejs.org. This gives you node and npm.

Check it's installed:

node -v
npm -v

On Windows, also have Git (for version control) and a code editor like VS Code.

Setup

npm install

Run in development (hot reload)

npm run dev

This starts Vite and opens the Electron app pointing at it. Edits to React files refresh live.

Run the production build locally

npm start

Tests & lint

npm test          # Vitest unit tests (pure logic: formatting, profiles, exports, theming…)
npm run test:e2e  # Playwright e2e smoke suite driving the real Electron app
npm run lint      # ESLint

CI runs all three on every push, and the release build workflows require them to pass before uploading installers — please run them before opening a PR.

Package installers (.exe / .dmg / AppImage)

npm run dist

Output lands in the release/ folder. On Windows you'll get an NSIS installer and a portable .exe. macOS .dmg builds can't be cross-compiled from Windows/Linux — see .github/workflows/build-mac.yml, which builds them on a GitHub Actions macOS runner instead (there's an equivalent workflow for the Linux AppImage).

Project structure

electron/
  main.cjs           Electron main process — window, native menu, file save/load,
                     PDF/DOCX/TXT export dialogs, spellcheck menu, update check, theme IPC
  preload.cjs        Safe bridge between UI and the main process
src/
  main.jsx           React entry
  App.jsx            Layout, toolbar, tabs, profiles/snapshots/export/theme wiring
  Editor.jsx         Section-based form (generic field-config-driven card renderer)
  Preview.jsx        Live resume render (all three templates)
  TemplateGallery.jsx Template picker with live thumbnails
  SectionNav.jsx     Left nav: add/remove/rename/reorder sections
  RichBulletField.jsx WYSIWYG bold/italic contenteditable for bullet fields
  MonthYearField.jsx Month/year date picker
  data.js            The resume JSON model + section type definitions
  profiles.js        Multi-profile storage: index, per-profile body/snapshots, migration
  history.js         Undo/redo core (+ useHistory.js React hook)
  theme.js           System/Light/Dark setting, persistence, resolution
  exportModel.js     Format-agnostic export model shared by all exporters
  docxExport.js      Word (.docx) serializer (real runs, numbering, hyperlinks)
  textExport.js      Plain-text (.txt) serializer
  format.jsx         Bold/italic marker parsing for the preview
  richText.js        Marker-string <-> DOM helpers for the WYSIWYG fields
  textEditing.js     List/indent/Enter key math for bullet fields
  bulletStyles.js    Bullet & numbering style definitions
  contactFields.js   URL normalization + validation hints for Links
  autocompleteData.js Suggestion lists (titles, skills, degrees, proficiencies)
  ai.js              AI stub — fill in later
  styles.css         All styling (CSS-variable themed) + print rules
scripts/
  launch-electron.cjs   Dev/prod launcher (clears ELECTRON_RUN_AS_NODE)
  docs-screenshots.mjs  Regenerates all docs/wiki screenshots against the current build
e2e/
  smoke.mjs          Playwright e2e suite (real Electron app, end to end)

Most src/ modules have a matching *.test.js beside them.

Regenerating docs screenshots

After a UI change, rebuild and re-shoot every screenshot in one go:

npm run build
node scripts/docs-screenshots.mjs

Output goes to docs/screenshot.png + docs/screenshots/*.png (1440×900, seeded sample data). Copy the PNGs into the wiki clone to update the wiki's copies.

Adding AI later

See the comments in src/ai.js. The key rule: do the actual API call in electron/main.cjs (the main process) so your API key is never exposed in the UI. Expose it through preload.cjs the same way save/load/export work, then call it from ai.js.