DemoPine captures three ways — and you can mix them in one demo. Here's a practical guide to picking the right mode for each moment.
One of DemoPine's more useful quirks is that you don't have to choose a single capture method. The Chrome extension supports three modes, and they all import into one demo, sorted by capture time. Still, each mode has a sweet spot. Here's when to reach for which.
In Clicks mode, every click captures a screenshot plus the exact coordinate, and hotspots land pre-placed where you clicked. This is the workhorse for classic "do this, then this" walkthroughs. It's lightweight, forgiving, and easy to edit afterward.
Video mode records the active tab as WebM with optional audio. Back in the editor you can trim start and end, split at any point to insert a follow-up step, or drop an annotation step between segments. Reach for it when the value is in the motion — a drag interaction, an animation, a real-time result.
HTML mode snapshots the live page's DOM and replays it inside a sandboxed frame with the original base URL injected. The result feels like the real product because it essentially is — interactive and pixel-accurate, without exposing your live environment.
The best demos often use all three. Record a short video of a slick interaction, click through the setup as image steps, and drop an HTML clone where you want the prospect to explore freely. Because everything sorts by capture time and edits side by side, you can assemble a single, coherent walkthrough from whichever mode fits each moment.
Still screen with one action? Clicks. Motion or timing matters? Video. Want them to actually click around? HTML clone.
When in doubt, start with Clicks — it's the easiest to edit — and layer in video or HTML where a static screen falls short.