Start with a public GitHub repository
Paste a public github.com/owner/repository URL to create a source-inspired interface replica. The importer reads the README, package metadata, theme files, and up to six primary UI route or component files through GitHub’s REST API. It does not clone or execute the repository.
Each replica uses realistic example data and an isolated HTML screen. Your browser measures the selected interactive element and creates a 1280 × 800 WebP screenshot. The result opens as a regular tour in the studio.
Capture an existing product flow
The Chrome capture extension records clicked elements and WebP screenshots while you move through a product. The capture setup page links directly to DemoSynth in the Chrome Web Store. Finish a flow to transfer screenshots directly into the editor, or keep a JSON backup.
Capture uses the browser’s active-tab permission. Switching to a different origin requires resuming capture on that page. Review every screenshot before sharing, especially when the product contains customer or account information.
Edit the story in a three-pane studio
Choose a step in the storyboard, position its hotspot on the canvas, and edit its text in the inspector. Drag or resize the target area, or use arrow keys for precise movement. Duplicate and reorder steps when a flow needs a different pace.
A hotspot can display a beacon, highlight an element, or act as an invisible click target. Branch to another step, move backward, or open an external URL. Intro cards, chapter cards, an ending call to action, and optional zoom help connect individual screens into a coherent tour.
- Reposition and resize hotspots with fractional coordinates.
- Customize the surrounding stage, spacing, rounding, and browser frame.
- Use undo, redo, manual save, and portable JSON backups.
Cover private data before sharing
Select a screenshot in Studio and choose Redact screenshot. Draw a cover over private data, drag it into position, or enter its position and size as percentages. Add several covers, then apply them to create a new WebP with solid covered pixels.
Apply covers to every step using that exact screenshot, and optionally reset the captions of hotspots touching a cover. Step identities, hotspot positions, and branch destinations stay editable. The change supports undo and redo. Save the updated draft, then export its current version.
Take the story into your documentation
Export a step-by-step guide as Markdown or HTML, or create a README cover image with a linked Markdown snippet. A cover is an ordinary image: readers click it to open the tour rather than running an iframe inside GitHub.
The builder also prepares share links and a lightweight iframe player. Cross-device access to your own tours requires configured cloud publishing. While cloud publishing is being connected, keep local drafts and exports as backups and use the public sample to explore playback.
Build locally before connecting cloud services
The on-device workflow does not require an account or an AI key. Drafts and captured screenshots are stored in this browser’s IndexedDB. Clearing site data can remove them, so download JSON when a tour matters.
Optional AI copy refinement accepts your own provider key. It can incur provider charges; it is not required by the default GitHub generator. Hosted authentication, storage, and publishing have their own configuration and provider limits.