> For the complete documentation index, see [llms.txt](https://docs.supademo.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.supademo.com/create/by-demo-type.md).

# By Demo Type

Using the [Chrome Extension,](/create/by-method/create-with-chrome-extension.md) you'll be able to record in one of three demo formats: 1. [Guided Screenshot Demo](/create/by-demo-type/guided-screenshot-and-video-demos.md); 2. [Guided HTML Demo](/create/by-demo-type/guided-html-demos.md); and, 3. [Sandbox Demos](/create/by-demo-type/sandbox-demos.md).

<figure><img src="/files/DqhhMnedkFCoEmJU6D8f" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="146.96484375">Demo Type</th><th width="236.77587890625">What is it</th><th width="249.777099609375">Key Use Cases</th><th>Plan Access</th></tr></thead><tbody><tr><td>Guided Screenshot and Video Demo</td><td>Interactive walkthroughs built from screenshots, slides, or video. Great for re-using existing content.</td><td>• <strong>Docs &#x26; guides</strong> (embeds in docs)<br>• <strong>Onboarding</strong><br>• <strong>Internal training</strong><br>• <strong>Product updates</strong><br>• <strong>Prototyping &#x26; feedback</strong><br>• <strong>Sales enablement</strong></td><td>All Plans</td></tr><tr><td>Guided HTML Demo</td><td>Pixel-perfect clones of your product with full interactivity preserved. Editable text, images, and data.</td><td>• <strong>Leave-behinds</strong><br>• <strong>Product tours</strong><br>• <strong>In-app tours</strong><br>• <strong>Prospecting</strong></td><td>Growth &#x26; Enterprise only</td></tr><tr><td>Sandbox Demo </td><td>Safe, life-like replicas of your product — no risk of exposing production data.</td><td>• <strong>Live demos</strong><br>• <strong>Leave-behinds</strong><br>• <strong>Solutions engineering</strong></td><td>Growth &#x26; Enterprise only</td></tr></tbody></table>

{% hint style="info" %}
**Note:** Both *Guided Screenshot/Video* and *Guided HTML* demos are linear by default, but support conditional branching with hotspots and chapters.
{% endhint %}

> 💡 **Tip:** Before recording, click on the recommendations shown by the extension — like resizing your screen to optimal dimensions and closing unnecessary tabs — to get the best demo recording quality.

***

#### [HTML-based demos](/create/by-demo-type/guided-html-demos.md)

HTML demos are pixel-perfect clones of your product that keep full interactivity — clicks, hovers, and animations all behave as they would in your live app. They’re the most realistic way to show off your product without requiring a live environment.

**Key Features**

* Full interactivity with clickable elements, hover states, and animations
* Editable text, images, and data after recording
* Pixel-perfect design that matches your real product
* Great for product tours, feature highlights, and training

**Limitations**

* No support for uploading raw HTML or Figma captures

{% @supademo/embed demoId="cm7l1pg5n13amddum3mis0ppr" url="<https://app.supademo.com/demo/cm7l1pg5n13amddum3mis0ppr>" %}

***

#### [Screenshot/Video-based demos](/create/by-demo-type/guided-screenshot-and-video-demos.md)

Screenshot and video demos turn static assets (like screenshots, slides, or recorded videos) into guided, interactive walkthroughs. Ideal when HTML capture isn’t possible.

**Key Features**

* Supports screenshots, images, and video uploads
* Works with the Supademo desktop app for quick captures
* Add text, hotspots, and voiceovers to guide viewers
* Convert static content into step-by-step tutorials

**Limitations**

* File size limits: 50MB (Pro) / 150MB (Scale+)

{% @supademo/embed demoId="cm9vporhh0237zf0ig0td1prw" url="<https://app.supademo.com/demo/cm9vporhh0237zf0ig0td1prw>" %}

***

#### [Sandbox Demos](#sandbox-demos)

Sandbox demos replicate your product in a safe, interactive environment — without exposing production data or requiring engineers to set up a demo instance. Perfect for live demos, POCs, and leave-behinds.

**Key Features**

* Fully interactive replicas of your product
* Invisible or visible hotspots for guided paths
* Secure, no-risk alternative to staging or production
* Customizable content with no-code editing

{% @supademo/embed demoId="cm8mktzxw0ijcxffbc3pjewnk" url="<https://app.supademo.com/demo/cm8mktzxw0ijcxffbc3pjewnk>" %}

## Benefits

* **Multiple formats** — Choose the demo type that best fits your content and use case.
* **Full interactivity** — HTML and Sandbox demos preserve real product behaviour.
* **Flexible content** — Use screenshots, videos, or live captures depending on your needs.
* **Conditional branching** — All demo types support hotspots and chapters for guided paths.
* **Safe environments** — Sandbox demos eliminate the risk of exposing production data.

***

## Use Cases

<details>

<summary><strong>Sales Leave-Behinds and Prospecting</strong></summary>

Use HTML or Sandbox demos to create personalized, interactive leave-behinds for prospects. They can explore your product at their own pace without needing access to a live environment.

</details>

<details>

<summary><strong>Product Documentation and Guides</strong></summary>

Embed Screenshot/Video demos directly in your docs, help centers, or knowledge bases. Turn static documentation into interactive, step-by-step tutorials.

</details>

<details>

<summary><strong>Live Demos and POCs</strong></summary>

Use Sandbox demos for live sales calls and proof-of-concept presentations. Show your product in action without the risk of bugs, slow load times, or sensitive data exposure.

</details>

<details>

<summary><strong>Onboarding and Training</strong></summary>

Create guided walkthroughs for new users or internal teams. Any demo type works — choose based on whether you need full interactivity or simple step-by-step guidance.

</details>

***