Overview
Reprise HTML Environment uses HTML capture technology to recreate an interactive version of your product that looks and feels real. You can customize your captured demo to show off your product however you want — by changing charts, adding data, building animations, and more.
HTML Environment’s HTML capture makes it easy to create high-fidelity, interactive demos that don’t rely on live environments, allowing you to personalize or modify product data, update visuals, and tailor the experience for your audience.
The HTML Editor and Reprise Capture Extension are designed to give demo builders a powerful yet intuitive workflow for capturing and editing demos. The extension works with any Chromium-based browser, but we recommend using Google Chrome for the best experience.
To capture a new demo with our HTML Editor, follow the instructions below:
Capturing a New Demo
Follow these steps to capture a new demo in HTML Environment:
-
Open your app to start capturing. With your app open, click the Reprise Extension and select Create a Demo.
-
Select HTML Environment
-
Name your HTML Environment and select a folder. Make sure the HTML Editor toggled is on to take advantage of our newest editor.
- Click Get Started to begin capturing
Choosing a Capture Mode
When starting a new capture, you’ll see two capture options:
Single Capture
This is the standard capture method. You can capture each screen manually using the keyboard shortcut or by clicking the capture button at the bottom of your screen as you click through each page in your demo.
Use this option when:
-
You want precise control over which screens are captured.
-
You’re re-capturing specific pages or updating individual screens.
Continuous Capture (New!)
Continuous Capture automatically detects and captures new screens as you navigate through your app — no need to manually click for each one. HTML Environment recognizes page changes (based on the URL) and automatically captures every screen in your flow.
Use this option when: You want to move quickly through a flow without stopping to trigger each capture.
During Continuous Capture:
-
You’ll see a short progress indicator (e.g., “Capturing 10%, 25%...”) while each screen is processed.
-
You can pause or stop capture at any time using the Done button.
-
After finishing, you can still Resume Capture to add more screens to the same demo.
Once your capture is complete, click Edit Screens to open the HTML Editor. Actions and interactions are automatically detected and added to your captured demo for easier editing.
When to Manually Capture During Continuous Capture
In most cases, Continuous Capture will automatically detect and capture each new screen. However, depending on how your app is coded, some transitions or UI elements (like dropdowns or pop-ups) might not trigger an automatic capture.
You’ll know you need to capture manually if:
-
You don’t see the capture countdown appear, and
-
A new screen doesn’t appear in your HTML Environment after clicking to the next page.
If that happens:
-
Continue following your click path.
-
When you reach the point where the capture doesn’t trigger automatically, press the Capture button manually to capture that screen.
This ensures you don’t miss any key parts of your flow.
How Continuous Capture Links Screens
It’s important to note that Continuous Capture links screens in sequence, from one screen to the next in the order you capture them.
By default, the action added to each clickable element is “Move to the next screen in your demo flow”, not a specific screen.
What this means:
-
If you later rearrange your screens in the HTML Editor, clicking that element will still move to the next screen in order, not necessarily the screen it originally linked to.
-
If you want a clickable element to go to a specific screen, you can edit the action manually.
For more details, see our article on Adding and Editing Actions in HTML Environment.
Capture Tips
-
Wait for the capture progress indicator to complete before navigating to the next screen.
-
Use Resume Capture to easily add more screens after you’ve finished your initial recording.
-
For best results, capture in a full browser window with stable internet.
Next Steps
Once your capture is complete, open it in the HTML Editor to begin customizing — edit text, swap data, animate elements, or fine-tune your layout to create a polished, realistic demo experience.