Quickstart

You need Node.js 20 or newer. Capturing from the terminal also needs Google Chrome. See requirements.

Scaffold a project

npx @inkly-org/interactive-demo-cli init my-demos
cd my-demos && npm install

init writes a project with a one-step placeholder demo in demos/getting-started/. Replace it with your first capture.

Capture your product

Click through your product once. Every click becomes a step.

Your agent
The CLI
The Chrome extension

Give your agent the skill, then ask:

Make an interactive demo of our onboarding flow at https://app.example.com

The agent runs the same commands you would.

npx interactive-demo capture start https://app.example.com --name "Onboarding"
# click through the product in the window that opens
npx interactive-demo capture stop

stop writes the recording as a new demo under demos/.

Record in your own browser with the Chrome extension, download the ZIP, then import it:

npx interactive-demo init --from ~/Downloads/<file>.zip

Write it up

Capture gives you structure, not writing. The words on each step are the demo.Your agent edits demo.config.json directly. You can use the editor:

npm run dev     # preview on :3000, editor at /__demo/editor/

See Authoring for the config and The editor for the visual route.

Ship it

Publish
Host it yourself

npx interactive-demo login && npx interactive-demo publish

That is the whole hosting step. publish puts the demo online and prints its link. Publishing again updates the same link, so embeds keep working.

npx interactive-demo build    # dist/<slug>/ — index.html, player.js, player.css, assets/

Deploy dist/ to any static host. Nothing in it phones home.

The embed snippets are the same either way. Only the origin differs. See Publish and self-host.

Put it in front of someone

Send the link, frame the page, or render it inside your React app. npx interactive-demo embed prints the snippets for your demo.

<iframe src="https://your-site.com/demos/onboarding/?embed=inline"
        loading="lazy" allow="fullscreen"
        style="border:0; width:100%; height:min(900px, 80vh)"></iframe>

Sharing and embedding walks the whole choice.

Use your agent

Hand the whole loop to Claude Code, Codex, or another agent.

Capture

Video steps, logins, and what to do when a click is missed.

Authoring

Steps, hotspots, captions, voiceover, and the theme.

CLI reference

Every command, flag, and default.

Get started

Make a demo

Ship it

Reference

Next

Use your agent

Capture

Authoring

CLI reference

​Next

Use your agent

Capture

Authoring

CLI reference

Next