Edit HTML

The Power of HTML Editing

Edit HTML gives teams more power over how demos evolve after they're recorded.

When a demo is recorded in HTML, whether it's a guided HTML demo or a sandbox demo, it stops being a fixed snapshot and becomes something that can be adjusted and refined over time. Instead of thinking in terms of record once and replace later, HTML makes it possible to update specific parts of a demo without starting over.

For teams on Growth or Enterprise plans, HTML recording is the default recommendation. It produces a pixel-accurate version of the interface and unlocks editing capabilities that aren't available in guided screenshot demos.

Guided HTML vs. Sandbox

Guided HTML demos still include hotspots and structured guidance, similar to guided screenshot demos. The difference is that hotspots attach directly to real interface elements instead of floating on top of an image. Sandbox demos use the same HTML foundation but intentionally remove guided hotspots. Sandboxes are designed for exploration rather than instruction, so viewers can click freely through the interface while the demo still behaves like a real product.

The Live Editor

All HTML demos include a live editor. Nearly any visible element can be clicked and modified directly. Changes can be applied to a single step or across every step where that element appears. Undo and redo are always available, which makes it safe to experiment and iterate.

HTML is built around incremental change. If a label changes, the text can be edited. If a value becomes outdated, it can be updated. If something no longer applies, it can be removed or replaced. Instead of re-recording entire workflows, updates happen at the element level.

Four Ways to Control Elements

HTML gives you four ways to control how elements appear. You can replace an element with an image, remove it entirely so the layout adjusts naturally, hide it while preserving spacing, or redact it. Redaction and hiding should be used sparingly, since blurred or empty areas tend to draw attention and reduce realism. In most cases, HTML editing makes it better to replace sensitive information with realistic, non-sensitive content instead.

Dynamic Image Variables

HTML demos also support dynamic image variables, which makes it possible to personalize demos without creating duplicates. Common examples include swapping in a prospect's logo before sharing a sales demo, or adjusting charts and visuals based on the industry you're demoing to.

Interaction Tools

HTML includes interaction tools that support different learning goals. The Typewriter effect animates text entry character by character, which works well for setup flows, walkthroughs, and onboarding. Input Triggers pause the demo until a viewer enters a specific value, making them useful for training, validation, or certification scenarios.

Reducing Maintenance

There are also HTML-specific features designed to reduce ongoing maintenance. Find and Replace makes it possible to update terminology across an entire demo. Email anonymization replaces real addresses with synthetic ones. Keep Dates Current ensures date pickers never appear outdated. These capabilities only exist in HTML demos.

Manual Capture

Some interface states, especially hover-based elements, don't always capture perfectly in HTML. In those cases, Manual Capture can be used during recording to create a pixel-perfect snapshot. These steps don't auto-generate hotspots, but they preserve visual accuracy where it matters.

Complex Applications

It's also worth noting that highly customized or complex front-end applications can occasionally produce imperfect HTML captures. That's expected. HTML reflects real product code, and no two front ends behave exactly the same. When something doesn't work as intended, reaching out to the Supademo support team is the right next step.

Best Practices

To get the most value from Edit HTML, a few best practices matter. Use HTML when you expect demos to change over time. Edit at the element level instead of re-recording full flows. Replace sensitive data rather than blurring it. Use dynamic image variables to personalize without duplicating demos. Lean on HTML tools to keep demos realistic as products evolve.

Next, we'll move from editing the structure and content of demos into demo-level settings and branding. These are settings that help fine-tune the viewing experience without changing the underlying demo content.