Add Glitterball to a prototype

Run one command, ask your coding agent, or upload a build

Everything in Glitterball runs from a small tag in your prototype's <head>. The tag puts the Glitterball bar on the page. From the bar you record walkthroughs, and anyone who opens the prototype can watch them and comment. There is nothing to install in the browser.

Run one command

At a terminal, in the prototype's folder:

npx glitterball init

It makes the prototype's own token and puts the tag, with that token, in the file that renders <head>. Run it again any time; it replaces the tag rather than adding a second one. Deploy, open the prototype and press Record on the Glitterball bar. The first time, that signs you in and puts the prototype in your workspace.

Or ask your coding agent

Paste this into Claude Code, Cursor, Codex or whichever agent builds your prototype, in the prototype's folder:

Add Glitterball to this prototype by following https://www.glitterball.dev/install.md

The agent makes the prototype's token, installs the glitterball package with your package manager and adds <Glitterball token="tt_…" /> where every page renders. It works with React, Next.js, Remix, Vue, Nuxt, Svelte, Astro and plain HTML.

In the web app, choose Create walkthrough, then In code and your agent, for instructions to copy.

Use a token. A tag without one (<Glitterball /> with no token) gets a key the first time the page runs, but anyone who knows the site's address could claim that key before you do. With a token in the code, the prototype is yours from the start.

Or upload the build

No code to change, or no live link? In Create walkthrough, choose Upload a build and pick a .zip of your output folder or a single .html file. Glitterball hosts it at its own link with the tag already on. See Connect a prototype.

Check it worked

Open the deployed prototype. The Glitterball bar shows in the bottom-right corner with the prototype's name, the version and Record. If it doesn't, see Troubleshooting.

What it can't do

• A page without the tag can't be recorded and can't show walkthroughs. Add the tag or upload the build.
• Recording happens on the prototype. On a multi-page site, or one that blocks other services from using the camera and mic, a small Glitterball window beside it holds the camera and mic.

Next, record a walkthrough.