Previewing Your Walkthrough
Using Preview Mode
Click the Preview button in the top bar to enter preview mode. Preview renders your walkthrough exactly as a learner would experience it, at the same scale and proportions as the exported HTML.
What Preview Shows
- •The walkthrough container at the configured device frame size
- •One hotspot at a time, in sequence
- •Tooltip rendering with your configured fonts, colors, and text
- •Auto-advance screens with timing
- •Progress bar and instruction bar (if enabled)
- •Persistent tooltips (always visible, clickable)
- •Completion state with restart option
Starting Point
Preview starts on the screen you're currently editing, not always screen 1. This lets you quickly check a specific screen without clicking through the entire walkthrough.
Preview vs. Export
Preview and export use the same positioning logic and rendering. What you see in Preview is what the exported HTML will look like. If something looks right in Preview, it will look right in the export.
Tips
- •Use Preview frequently as you build — it's the fastest way to catch positioning issues
- •Check tooltips for text overflow, especially with longer descriptions
- •Verify that auto-advance timing feels right
- •Test branching paths by starting Preview on the relevant screen