# Edit HTML

### 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.

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

{% hint style="info" %}
To learn about how to capture or record HTML-based Supademos, click [here](/create/by-demo-type/guided-html-demos.md).
{% endhint %}

### Text

Edit any text element in your HTML demo - including changing font style, editing text, colour, and adding variables.

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

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

{% hint style="info" %}
Use the [**Find and Replace**](/customize/edit-html/find-and-replace-text-emails-and-dates.md) functionality to streamline content updates across Supademo, enabling you to efficiently modify text or images across multiple slides without manual editing.&#x20;
{% endhint %}

{% hint style="info" %}
Tip: Use the step switcher on the top left to quickly made edits for multiple steps. Changes you make to common components (i.e changing the logo on the header) will be reflected across all step pages.
{% endhint %}

### Images

Replace or modify any image in your HTML demo.

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

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

{% hint style="success" %}
Take precise control over your HTML edits with options to apply changes globally or to specific steps only.

**Control options:**

* **Apply to All**: Make changes across all matching elements in your entire demo
* **Apply to Current Step**: Limit changes to the current step only
  {% endhint %}

### 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

{% hint style="info" %}
Tip: Duplicate a Supademo to make account-specific personalization from one Supademo.
{% endhint %}

### 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

{% hint style="info" %}
**Tip:** Duplicate a Supademo to create account-specific versions from one master demo.
{% endhint %}

**Image Variables**

You can also dynamically swap logos, screenshots, or any visual element to personalize demos at scale — powered by links or UTM parameters.

Whether you’re tailoring by industry, showcasing specific use cases, or rotating logos, image tokenization allows a single template to deliver hundreds of personalized demo experiences.

Perfect for automated sequences, marketing campaigns, or account-based selling — anywhere every touchpoint needs to feel tailored.

#### Adding Dynamic Images

1. Enable **HTML Edit** mode.
2. Click the image you want to update.
3. Select **Replace Image**.
4. In the **Dynamic Image** field, enter your variable name.
5. Close the toolbar

#### Sharing With Dynamic Images

* **Copy Dynamic Link** → updates UTM parameters in the URL for sharing.
* **Create Link** → complete the fields to generate a custom link.

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

{% hint style="info" %}
Learn more about dynamic variables [here](/customize/personalize/variables-and-tokens.md).
{% endhint %}

### 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 step, or across all steps in a demo, depending on your needs.

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

***

Check out how to edit HTML-based Hotspots

{% content-ref url="/pages/Bq71SrYE04JixV95WFPZ" %}
[HTML-Based Hotspots](/customize/hotspot/html-based-hotspots.md)
{% endcontent-ref %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.supademo.com/customize/edit-html.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.