glitterball

glitterball

Record walkthroughs over your live prototype and share them. Install it with your package manager and add it once, where every page renders:

It renders nothing itself. In the browser it adds Glitterball's script, which shows a small bar in the page's corner to record and play walkthroughs. Nothing is recorded until someone presses Record on that bar and allows the microphone or camera in the browser. Recordings go to the Glitterball workspace of whoever signs in there.

There's nothing to configure. The first time the page runs, Glitterball makes a key for the site, and the first person to press Record signs in and adds the prototype to their workspace. To set the key in the code instead, pass token="tt_…": npx glitterball init makes one and adds it for you.

Starting walkthroughs from a clean prototype

A walkthrough plays from where the presenter started. When it starts, Glitterball sets the prototype's localStorage and sessionStorage aside and plays on a fresh copy, then puts them back when the viewer closes it. If the app keeps state anywhere else that outlives a reload (IndexedDB, a backend, seeded demo data), pass onReset, and Glitterball runs it instead:

<Glitterball token="tt_…" onReset={() => store.reset()} />

It may return a promise. Glitterball waits for it for up to 5 seconds.