Stepshots logoStepshots

Interactive Sandboxes

Turn a recording into a clickable replica of your product — generated on your own machine, filled with synthetic data, hosted at a public URL your prospects can explore without signing up.

Overview

A sandbox is an interactive, AI-rebuilt replica of your product: your real layout, navigation, and copy — but synthetic data and no backend. A prospect can click through it like the real thing, without an account, a trial, or your production data anywhere near them.

It's the third asset type, alongside demos (screenshot playback) and guided tours (overlays on your live app). A sandbox sits between them: more alive than screenshots, safer than handing out a trial.

Generated on your machine

The structural capture that feeds the model never leaves your machine — the server only ever sees the finished HTML file.

Bounded to your recording

The replica can only contain the routes you actually recorded. The CLI validates this before push, and the server re-validates it after.

Synthetic data only

Made-up names, made-up numbers — the generator rebuilds the interface, not your database.

A single HTML file

The output is one committable .sandbox.html — review it in a browser, diff it, version it next to your tours.

1. Record with structural capture

Sandbox generation needs more than screenshots — it needs the page's structure. Enable DOM capture when recording:

bash
stepshots record --dom -t my-demo

Or in stepshots.config.json:

json
{
  "captureDom": true
}

The bundle now carries structural extracts alongside the screenshots. They are generation input only: stepshots upload strips them before anything leaves your machine.

2. Generate locally

bash
stepshots sandbox generate output/my-demo.stepshot

The generator writes my-demo.sandbox.html next to the bundle. Open it in a browser and click through it before doing anything else — generation quality varies run to run, and this file is exactly what your prospects will see.

Two ways to run it:

  • With an API key — set ANTHROPIC_API_KEY and the CLI calls the model directly (roughly $1–2 per attempt). Pick a model with --model.
  • Without a key — if you use Claude Code, the CLI drives your local claude install instead. No key, covered by your subscription. Force this path with --agent.

Useful flags: --brief "focus on the billing flow" steers the generation; --output picks the file location.

3. Push it

bash
stepshots sandbox push output/my-demo.sandbox.html --demo-id <demo-id>

The server re-validates the artifact against the source demo's recorded routes — a sandbox that invents pages or references external resources is rejected, not hosted. The push lands as a draft, visible only to you.

Pushing again for the same demo replaces the existing sandbox in place — embeds and links keep working.

Hosting is a Pro feature

Generation runs on your machine and costs you nothing extra. Hosting the result — the draft review, the public URL, the embed — requires a Pro subscription.

4. Review and publish

Open Dashboard → Sandboxes and click through the draft exactly as a visitor would. When it holds up, flip it to Published:

  • Public URL — stepshots.com/sandbox/<id>, shareable with anyone, no login.
  • Embed — an iframe snippet for your docs, landing page, or changelog:
html
<iframe src="https://stepshots.com/sandbox/<id>/embed"
        style="width: 100%; height: 600px; border: 0; border-radius: 12px"
        sandbox="allow-scripts"
        title="Interactive sandbox"></iframe>

Views are counted server-side on the detail page — embedded views included, ad-blockers notwithstanding. Unpublishing takes the URL and every embed down immediately.

Staleness

A sandbox is only as current as the recording behind it. Two things flag it as “Sources changed”:

  • re-uploading or re-importing the source demo's bundle
  • a drift check (stepshots drift --push) reporting that the demo no longer matches your app

A stale sandbox stays live — it flags, it doesn't break. Regenerate and push again to clear it:

bash
stepshots sandbox generate output/my-demo.stepshot && \
stepshots sandbox push output/my-demo.sandbox.html --demo-id <demo-id>

What the validator guarantees

Both the CLI (before push) and the server (after) enforce the same contract on every artifact:

  • exactly one section per recorded route — no invented pages, no missing ones
  • in-sandbox navigation only targets recorded routes
  • no external resources: no remote scripts, styles, images, or fonts

Hosted artifacts are additionally served under a strict Content-Security-Policy and rendered inside a sandboxed iframe, so even a reference that slipped past validation cannot phone home.

Navigation