Knowledge Base
ResourcesContact Support
  • Getting started
    • Recommended playbooks
    • Common FAQs
    • Growth Plan
  • Record & Upload
    • By Supademo type
      • HTML interactive demos
      • Screenshot/video interactive demos
      • Sandbox demo environment
    • By record/upload type
      • Chrome extension
        • Smart blur
      • Desktop app
      • Figma plugin
      • Upload content
      • Record screen and webcam
  • Editing
    • HTML editing
      • Find and replace
      • Bulk anonymize content
      • AI Personalizer
    • Hotspots
      • HTML-based hotspots
      • Invisible hotspots
    • Chapters
      • Call-to-Action
      • Password protect
      • Native forms
      • Embed forms & apps in Chapters
    • Browser and progress bar
    • Add, remove, duplicate steps
    • SEO and titles
    • Blur, crop and annotate
      • Media fit & aspect ratio
    • Animations
      • Zoom and pan
      • Autoplay and loop
      • Hotspot and chapter animations
    • Background music
    • Video splitting
  • Personalization
    • Custom branding
      • Configure custom domain
      • Workspace theme
      • Supademo theme
      • Backgrounds and frames
      • Custom fonts
      • Watermark
    • Voiceovers
      • AI Voiceover
      • Manual Voiceover
    • Translations
      • Translations Hub
    • Variables and tokens
      • Variables in Showcases
      • Variables in embeds
    • Conditional branching
  • sharing
    • Share as a link
      • Trackable share links
      • Twitter / X interactive links
    • Embed online
      • Instructions for popular apps
    • Exports
      • Copy steps as SOP guide
      • Export to PDF or PNG
      • Export to MP4/GIF
    • Folder sharing
    • In-app product tours
    • Showcase collection
  • Analytics & data
    • General analytics
    • Session metrics
      • Search for leads
    • Trending content
    • Integrations
      • HubSpot integration
      • Salesforce integration
      • Google Analytics integration
      • Slack integration
      • Zapier integration
    • Data & API
      • Developer docs
      • Disable tracking
  • Workspace
    • Folders and subfolders
    • Bulk actions
    • Notifications
    • Account settings
    • Comments & collaboration
    • Team management
      • Add or approve new team members
      • Roles and permissions
  • Enterprise
    • Enterprise administration
    • Create multiple workspaces
    • SSO & SAML
  • Billing & legal
    • Billing & payments
      • Access Invoices
      • Billing FAQ
  • General Security
    • Disable tracking
    • Request account deletion
Powered by GitBook
On this page
  • What is HTML editing in Supademo?
  • Text
  • Images
  • Effects (Redact/Hide)
  • Variables

Was this helpful?

  1. Editing

HTML editing

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

PreviousRecord screen and webcamNextFind and replace

Last updated 2 days ago

Was this helpful?

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 .

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

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.


Check out how to edit HTML-based Hotspots

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

Learn more about dynamic variables .

Find and Replace
here
HTML-based hotspots
here