StepshotsIntroduction
Learn about Stepshots — create, share, and analyze interactive product demos
What is Stepshots?
Stepshots is a platform for creating interactive product demos from real browser recordings. Record your app's UI flow with the CLI, upload the result, annotate it with the visual editor, then share or embed it anywhere.
Stepshots captures actual screenshots of your product — not mockups. Your demos always reflect the real UI.
How It Works
- Record — Capture a flow with the browser extension, or define stable tutorial steps in a config file for headless CLI recording.
- Upload — Push
.stepshotbundles to the Stepshots dashboard via the CLI or drag-and-drop. - Edit — Add highlights, blur regions, arrows, pulse indicators, and popup cards in the overlay editor.
- Share — Toggle visibility to public and share the viewer link, or embed demos directly in your site.
- Analyze — Track views, step completion, and average time per step with built-in analytics.
Feature Highlights
CLI Recording
Headless browser recording for stable, scripted flows like docs, marketing pages, and controlled internal demos.
Overlay Editor
Six overlay tools — highlight, blur, arrow, pulse, popup — with full property controls and undo/redo.
Embeddable Player
Embed demos as JS snippets, iframes, React components, or Web Components with theme and autoplay options.
Analytics
View counts, unique visitors, step completion funnels, and per-step duration charts with 7/30/90-day ranges.