HTML Demo

Capture your real product HTML and CSS for fully interactive demos with live UI elements.

HTML Demos capture your actual product interface -- HTML, CSS, and assets -- so viewers interact with real UI elements rather than static screenshots. Buttons respond, dropdowns open, and tabs switch, giving prospects a genuine feel for your product.

When to use HTML Demo

• Complex products where prospects need to click around and explore.
• Self-serve evaluation where buyers want to experience the product before talking to sales.
• Technical audiences who value seeing real UI behavior over guided tours.
• Frequently updated products where re-capturing screenshots after every release is impractical.

How it works

1. Install the Demoship browser extension and navigate to the page you want to capture.
2. Click Capture HTML Demo in the extension. Demoship snapshots the DOM, styles, and assets.
3. Open the captured demo in the editor. The page renders as a fully interactive HTML page.
4. Optionally add guided hotspots (turning it into a guided experience) or leave it as a freeform exploration.
5. Edit content -- hide elements, anonymize data, or add CSS overrides.
6. Publish and share.

Key differences from Interactive Demo

HTML Demos preserve real interactivity. Viewers can type in fields, open menus, and switch tabs. Interactive Demos offer tighter narrative control through screenshot-based guided flows.

Use HTML Demo when the experience of clicking around matters. Use Interactive Demo when you need to control the story.

What's in this section

• HTML Capture -- How the capture engine works and what it preserves
• Editing HTML -- Modifying captured content with CSS overrides and element controls
• Guided vs. Freeform -- Choosing between structured walkthroughs and open exploration