OpenShowcase turns a flow you click through in your web app into an interactive demo you host yourself. There is no account and no service in the middle: the export is a folder of plain files, and a React or Vue component plays it. It powers the interactive demos in the Rustrak docs.

Status: early development. The extension is not on the Chrome Web Store yet, so install it from a GitHub release.

Install the extension

1. Download openshowcase-extension-<version>-chrome.zip from the latest release and unzip it.
2. Open chrome://extensions and turn on Developer mode (top right).
3. Click Load unpacked and select the unzipped folder.

How it works

1. Record. The Chrome extension captures the tab as video and marks your clicks, scrolls and typing.
2. Edit. Each click becomes a photo step with a hotspot, and activity between clicks becomes a video clip. Write tooltips, trim clips, zoom and reorder.
3. Export. You get one .openshowcase file with the steps, AVIF frames and only the parts of the recording the demo plays, re-encoded (or the same thing as a .zip).

Let an AI agent record it

@rustrak/openshowcase-recorder lets an agent like Claude Code record the demo for you. It scripts the flow, checks it against your app, and records it in a headless Chromium with the extension, without touching your browser. You import the result in the editor and polish what doesn't convince you.

npx @rustrak/openshowcase-recorder install-skill   # adds the Claude Code skill

Then ask: "record a demo of creating an invoice". See the recorder's README to run it yourself.

Embed a demo

Put the .openshowcase file in your site's static files and point the player at it:

import { InteractiveDemo } from "@rustrak/openshowcase-player-react";

<InteractiveDemo src="/demos/my-demo.openshowcase" />;

The Vue component, @rustrak/openshowcase-player-vue, takes the same props. The file streams in one request, and each step shows as soon as its bytes arrive. An unzipped .zip works too: point src at its steps.json. The React player is about 55 KB gzipped, React excluded.

Development

Requires Node 22+ and pnpm 12.

pnpm install
pnpm build
pnpm test
pnpm --filter @rustrak/openshowcase-extension dev

To load a build yourself, open chrome://extensions, enable Developer mode and load apps/extension/.output/chrome-mv3 unpacked.

apps/extension/        Chrome extension: recorder + editor (WXT + React)
packages/schema/       Demo format: Valibot schema + TypeScript types
packages/player-core/  Framework-agnostic playback engine
packages/exporter/     Builds the exported bundle in the browser
packages/recorder/     CLI + agent skill: records a scripted flow headlessly
adapters/player-react/ <InteractiveDemo /> for React
adapters/player-vue/   <InteractiveDemo /> for Vue

License

MIT. Made by the Rustrak team.