Playground demo app

playground/ is a Vite + React 19 + Tailwind CSS 4 Electron app used to manually exercise every feature of @devioarts/electron. It consumes the package via "@devioarts/electron": "file:.." in playground/package.json, i.e. the local build of the package in this same repository — it is not a separate published consumer, it's the package's own reference/development app.

Running it

cd playground
npm install
npm run electron:run   # dae run — Vite dev server + Electron, hot-restart on electron/*.ts changes

Other scripts (playground/package.json):

Structure

playground/
  electron/
    main.ts              createElectronApp(config, options) — the app's main process entry
    preload.ts            createElectronBridge() — exposes window.Electron
  electron.config.ts       appId/appName + dev/app/browserWindow/ui config (see below)
  electron-builder.config.ts
  electron-env.d.ts
  src/
    main.tsx               Vite/React entry
    App.tsx, Playground.tsx
    tabs.tsx                registers every demo page as a tab (sorted by id)
    components/             Button, Card/CardGrid, Input, Logger, PageMeta, StatusPill, TabButton
    helpers/ipc.ts           unwrap() — logs and unwraps an IpcResult<T> from a bridge call
    pages/                   one Page*.tsx per feature area, see below

playground/electron.config.ts sets appId: 'com.devioarts.electron.demo', appName: 'electron-demo', and turns on ui.appMenu, ui.contextMenu, and ui.jumpList so the Menu page has something to exercise — every other opt-in feature stays off unless a specific demo page needs it.

Demo pages (src/pages/, wired in src/tabs.tsx)

Each page exercises one area of the window.Electron bridge, logging results through the shared Logger component:

PageHome, PageShowcase, PageWindow, PageScreen, PageWindows, PageNativeTheme, PageDialogs, PageClipboard, PageNotifications, PagePrint, PageSecureStorage, PageSession, PageProtocols, PageAutoLaunch, PageDownloads, PageDesktopCapture, PageExternalCommands, PageUtilityProcess, PagePowerMonitor, PageShortcuts, PageMenu, PageDeepLink, PageSystemPreferences, PageDiagnostics, PageUpdater.

PageHome is a representative example — it uses useElectron() and useNativeTheme() from @devioarts/electron/react, calls electron.getAppVersion(), and logs results via the page-local useLogger() context.

New demo pages follow the same pattern: a Page*.tsx under src/pages/, using PageMeta for the page header, Card/CardGrid for a masonry-style layout of demo controls, and useLogger() to report call results — then registered as a new entry in the tabsItems array in src/tabs.tsx (the exported tabs list is that array re-sorted by id).

What it's for

The playground exists to give every window.Electron.* method and event a manually-clickable UI, so changes to src/main/* in the package can be verified end-to-end (real OS dialogs, real notifications, real clipboard, real tray/menu, ...) rather than only through the mocked unit tests in tests/unit/. It is also what tests/e2e/*.spec.ts drives via Playwright.