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 a zip with steps.json, WebP frames and the WebM recording.

Embed a demo

Unzip the bundle into your site and point the player at it:

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

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

The Vue component, @rustrak/openshowcase-player-vue, takes the same props. Asset paths resolve relative to steps.json, so the bundle works from any folder. 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
adapters/player-react/ <InteractiveDemo /> for React
adapters/player-vue/   <InteractiveDemo /> for Vue

License

MIT. Made by the Rustrak team.