Guided HTML Demos
Create reliable, pixel-perfect interactive demo that are pixel-perfect HTML/CSS copies of your application. In minutes with no code.
What are HTML Demos?
HTML-based interactive demos are pixel-perfect replicas of your product that directly clone its HTML and CSS. They allow viewers to explore and interact with your product — clicking, scrolling, and typing — without needing to create an account or use your live environment.
🎥 See it in action → check out this deep dive walkthrough:
How to Record an HTML Demo (Chrome Extension)
Setup Tips and recommendations prior to recording:
Record using Google Chrome. Chrome is the best-supported browser for demo recording.
Refresh the page prior to recording by re-loading (command+R). Stale pages that have been inactive for 20+ minutes may lead to unexpected issues.
Record at full width and height (or with 1280x800 dimensions) on a laptop for an ideal viewing experience. Recording on large monitors may lead to small UI elements or illegible text.
Close unnecessary tabs (especially in the same Chrome window). Having lots of tabs open is a surefire way to slow things down and can impact capture speed.
Slow down between captures (especially for HTML recording). HTML recording needs a moment to capture each page’s HTML + CSS. Pause briefly between clicks so each step finishes processing—this may take longer on complex pages or if you have many tabs open.
Open the Supademo Chrome Extension, select "Guided HTML Demo", and click “Start Recording.”
Hover over any HTML element to anchor a hotspot, then click to confirm.
Elements will highlight as you hover to show where the caption will be placed.
You can easily adjust hotspot placement later in the editor.
Click through your product or workflow as you normally would.
Pro tip: Pause 1–2 seconds between clicks to make sure each slide captures correctly (especially on slower connections).
When finished, open the extension and click “Stop Recording.”
Supademo will generate a fully editable sandbox clone of your product.
Note: To record dropdown options, pause the recording from the toolbar, open the dropdown so it stays visible, and select Manual Capture. Once captured, resume the recording to continue as normal.
Key Considerations
HTML capture only works for web-based applications.
Capture may fail on heavy webpages with lots of image assets or embedded video.
Heavy CSS site workaround (for slow/stuck captures)
On some websites with complex CSS, the parser may take a long time to process all styles on the page. In many cases, much of this CSS is not necessary for the visual display of the application.
To improve capture performance, we recommend enabling this Heavy CSS workaround option on the Chrome Extension. When this option is enabled, the extension will detect a long-running process caused by complex CSS and skip that step in favor of faster capture speed.
If you notice improved capture performance without any visual issues, this toggle is suitable for your use case. However, if you see broken or missing styles, you should disable this option and capture again with the full CSS parsing enabled.
Key Differences from Screenshot/Video Demos
While the recording flow feels familiar, HTML demos include everything screenshot and video-based demos offer — screen and camera recording, image uploads, and video playback — and go further with:
Full interactivity: every element can be clicked, hovered, or typed into
Authentic behaviour: preserves hover states, animations, and transitions
Editable content: update text, numbers, images, or data after recording
High fidelity: demos look nearly identical to your live product
Benefits of HTML Demos
Deliver realistic “try before you buy” experiences for prospects
Reduce reliance on fragile live demo environments
Customize one recording for multiple use cases with minimal effort
Unlock deeper analytics on viewer interactions
Adding Non-HTML Steps into an HTML Demo
Best Use Cases
Proof of Concepts (POCs) for prospects and stakeholders
Sales Collateral for leave-behinds and follow-up
Polished Product Tours for websites or onboarding
Last updated
Was this helpful?