Building the UI

Building the web UI, the browser dev mode and adding sounds.

The interface lives in web/ and is built with React 19, TypeScript, Vite, Zustand and Tailwind CSS v4. Release zips already contain the built UI; you only need this page if you work from the repository or add your own sounds.

Build

cd web
pnpm install
pnpm build      # outputs web/build, loaded by fxmanifest

web/build is not committed to the repository.

Browser dev mode

pnpm dev

The dev mode runs in a normal browser with mock data and a control panel, where you trigger every notification type, the progress bar, each text UI position and the accent colours.

Custom sounds

Put .mp3 files into web/public/sounds and build again. They play by their file name, for example ObsiLib.sound.play('door_bell') for door_bell.mp3.