Stepshots logoStepshots

Embedding Demos

Embed interactive Stepshots demos in your website, docs, or app using React, JS snippets, web components, or iframes.

Overview

Once you've published a demo, you can embed it anywhere. Stepshots supports four embedding methods — pick the one that fits your stack.

Embedding Options

React Component

First-class React integration with typed props.

JS Snippet

Drop a script tag and a data attribute. Works anywhere.

Web Component

Native custom element. No framework needed.

iframe

Zero dependencies. Works in any HTML page.

Configuration Options

All embedding methods support the same core options:

Option Type Default Description
demoId string required The unique demo identifier
autoplay boolean false Auto-play on load
theme "light" | "dark" — Visual theme
start number — Step number to start from (1-indexed)
hideControls boolean false Hide playback controls

React Component

Install the package:

bash
bun add @stepshots/react

Basic usage:

tsx
function App() {
  return <StepshotsDemo demoId="your-demo-id" />;
}

With options:

tsx
<StepshotsDemo
  demoId="your-demo-id"
  autoplay
  theme="dark"
  start={2}
  hideControls={false}
  width="800px"
  aspectRatio="16/9"
/>

React Props

Prop Type Default Description
demoId string required Demo identifier
baseUrl string "https://app.stepshots.com" Server URL
autoplay boolean — Auto-play the demo
theme "light" | "dark" — Visual theme
start number — Starting step (1-indexed)
hideControls boolean — Hide playback controls
width string | number "100%" Container width
aspectRatio string "16/9" Container aspect ratio
style CSSProperties — Custom inline styles
className string — CSS class name

JS Snippet

Add the script tag to your page and mark containers with a data-stepshots-demo attribute:

html
<script src="https://app.stepshots.com/embed.js" defer></script>

<!-- Basic -->
<div data-stepshots-demo="your-demo-id"></div>

<!-- With options -->
<div
  data-stepshots-demo="your-demo-id"
  data-autoplay="true"
  data-theme="light"
  data-start="2"
  data-hide-controls="true"
></div>

The script auto-discovers all data-stepshots-demo elements on the page and renders the player in each one.

Web Component

Load the web component script and use the <stepshots-demo> custom element:

html
<script src="https://app.stepshots.com/stepshots-wc.js"></script>

<!-- Basic -->
<stepshots-demo demo-id="your-demo-id"></stepshots-demo>

<!-- With options -->
<stepshots-demo
  demo-id="your-demo-id"
  autoplay
  theme="dark"
  start="3"
  hide-controls
></stepshots-demo>

You can style the element like any HTML element:

html
<stepshots-demo
  demo-id="your-demo-id"
  style="max-width: 800px; margin: 0 auto;"
></stepshots-demo>

iframe

No scripts required — construct the URL manually:

html
<iframe
  src="https://app.stepshots.com/embed/your-demo-id"
  style="width: 100%; aspect-ratio: 16/9; border: none;"
  loading="lazy"
  allowfullscreen
></iframe>

Add query parameters for options:

html
<iframe
  src="https://app.stepshots.com/embed/your-demo-id?autoplay=true&theme=light&start=2&hide_controls=true"
  style="width: 100%; aspect-ratio: 16/9; border: none;"
  loading="lazy"
  allowfullscreen
></iframe>

Query Parameters

Parameter Example
autoplay ?autoplay=true
theme ?theme=light
start ?start=3
hide_controls ?hide_controls=true

Which Method Should I Use?

Scenario Recommended
React / Next.js app React component
Static marketing site JS snippet
Any HTML page, no framework Web component or iframe
CMS or restricted HTML (e.g., email) iframe
Documentation site (Docusaurus, Mintlify, etc.) JS snippet or React component
Navigation