demo.config.json by hand. The editor gives you a step list, live canvas, and inspector for the selected step, annotation, cover, or setting.
Changes are saved as demo source changes. You can preview them in the editor, review pending changes, and publish them back to your GitHub-backed hub.
Steps and media
Add, reorder, duplicate, delete, record, and replace image, video, or HTML steps.
Messages
Guide viewers with pointers, callouts, and clickable areas on content steps.
Annotations
Add blur masks and text labels on top of screenshot and video steps.
Zoom and focus
Focus attention with zoom regions, HTML zoom, and media alignment.
Widgets
Build cover screens with headline, form, and embed widgets.
Voiceover and captions
Generate, record, attach, preview, and remove narration for each step.
Player settings
Update title, subtitle, player chrome, background, color, logo, and header buttons.
Publish changes
Save drafts, review pending changes, and publish to the connected hub.
Open the editor
Open a demo from the platform demo list. The editor has three tabs:| Tab | Use it for |
|---|---|
| Preview | View the demo as an audience member will see it. |
| Editor | Polish the demo visually with the no-code editor. |
| Code | Inspect or edit the underlying demo files directly. |
Edit the story
Use the step strip to manage the sequence. You can reorder, duplicate, delete, rename, add media, add covers, or record more steps with the Chrome extension.Polish each step
Select a content step to add messages and annotations on the canvas. Messages can be callouts, pointers, or area messages. Annotations can blur sensitive regions, add freeform text, or zoom into part of the screen. For image and video steps, use Edit step to crop images or align media inside the stage.HTML steps support messages anchored to HTML elements. Blur, freeform text, and zoom annotations are not available on HTML steps.
Create covers and forms
Cover steps add non-product screens to a demo. Use them for intros, calls to action, lead capture, embedded content, or transitions. The cover inspector supports headline widgets, form widgets, and embed widgets. You can change the cover background, upload images or logos, configure form fields, and choose what a call to action does next.Add voiceover
Open Voiceover from the step toolbar to add narration. You can write a script, choose a narrator voice, generate audio, record your own voiceover, or attach an existing audio asset. Generated voiceover can also create captions. Voiceover assets are saved with the demo and published like other managed assets.Design the player
Open Demo settings to change demo-level presentation. You can update the demo title and subtitle, show or hide the player header, choose the controls mode, set the primary color, and override the demo background. The header section lets you add a logo, logo link, primary button, and secondary button.Save and publish
The editor autosaves draft changes so refreshes can recover your work. The save badge shows when changes are saving or saved. Publishing writes pending changes back to the connected GitHub-backed hub. The hosted demo URL updates from the synced source.For GitHub setup, see Set up Git sync. For the hosted hub publishing model, see Publish a collection of demos.