HTML editing

Easily edit and personalize HTML-based Supademos — no code required.

What is HTML editing in Supademo?

HTML-based Supademos create pixel-perfect clones of your product's front end. You can edit text, images, and components directly within your demo to create tailored, on-brand experiences for different audiences.

To learn about how to capture or record HTML-based Supademos, click here.

Text

Edit any text element in your HTML demo - including changing font style, editing text, color, aand dding variables.

1. Click "Edit HTML" from the Supademo editor

2. Hover over the text and select it

3. Type to enter or edit the displayed text

4. Modify text style as needed

5. Click "Save changes" when finished

Use the Find and Replace functionality to streamline content updates across Supademo, enabling you to efficiently modify text or images across multiple slides without manual editing.

Tip: Use the slide switcher on the top left to quickly made edits for multiple slides. Changes you make to common components (i.e changing the logo on the header) will be reflected across all pages.

Images

Replace or modify any image in your HTML demo.

1. Click "Edit HTML" from the Supademo editor

2. Hover over the image and select it

3. Click "Replace" to upload your own image—perfect for adding client or prospect logos

4. Click "Save changes" when finished

Effects (Redact/Hide)

Protect sensitive information or focus attention:

1. Select any text or image element

2. Hide elements completely to remove distractions

3. Redact sections to maintain layout while protecting content

Tip: Duplicate a Supademo to make account-specific personalization from one Supademo.

Variables

Add dynamic personalization to your demos:

Use tokens like {{role}}, {{name}}, or {{company}} directly in your HTML capture. These variables can be pre-filled using:

• Personalized links

• URL parameters

• Custom data inputs

Tip: Duplicate a Supademo to create account-specific versions from one master demo.

Learn more about dynamic variables here.

Scrolling

The "Disable Scroll" option prevents the ability for viewers to scroll around on a particular page on an HTML Supademo – helping creators build more of a locked-in, guided demo experience.

Easily set this toggle on a per-slide or per-Supademo basis, depending on your needs.

---

Check out how to edit HTML-based Hotspots

HTML-based hotspots