1. Review the demo you want readers to see
Open your tour in the studio and preview the steps. Give it a useful title, correct its tooltip copy, and check the final action. The cover is an invitation, so its title and first screenshot should represent what a reader will actually experience.
The exporter uses existing screenshots to compose a browser-style image with a play button and a “Click to play interactive demo” label. Its colors follow the app’s selected light or dark mode. It produces a PNG for your repository and a WebP preview.
2. Open the README card exporter
Choose “Share” in the studio, then “Export GitHub README interactive card.” Inspect the cover preview and its tour URL. The image path is editable; the suggested path is docs/demosynth-demo-card.png.
Choose “Export card & copy Markdown” to download the PNG and copy the linked snippet. If your browser blocks clipboard access, select and copy the Markdown shown in the dialog. Keep a JSON backup of the demo separately: the cover image does not contain an editable tour.
3. Use a published tour URL
A local draft can be previewed in the browser that saved it, but that does not make the link available to your readers. The exporter labels drafts and localhost URLs to make this distinction visible. Do not commit a private preview link as if it were a public tour.
For your own tour to work on another device, publish it through a configured cloud workspace and verify the link while signed out. The hosted service’s cloud publishing is currently being connected. Until then, you can prepare the cover and guide, or explore the public sample tour.
4. Commit the PNG and linked Markdown
Add the downloaded image to your repository at the path used by the snippet. Then paste the Markdown into README.md. A relative image path keeps the cover alongside the documentation, while the outer link opens the tour on your app’s domain.
The following example points to DemoSynth’s public sample so you can inspect the format. Replace that destination with your own verified published tour URL when it is ready.
[](https://demosynth.com/share/welcome)5. Check it from a reader’s perspective
View the README on GitHub after committing both files. Confirm that the image renders, click it, and check the destination without relying on your editor session. A typo in the relative path can break the image even when the tour link is correct.
GitHub READMEs do not run this card as an embedded interactive iframe. The interaction happens on the linked tour page. You can also include a plain-text tour link so the destination remains available when an image cannot be displayed.
- Use a readable image description in the Markdown alt text.
- Check a mobile viewport as well as a desktop browser.
- Keep credentials and unredacted private data out of screenshots.
- Regenerate the cover if the first screen or product story changes.
Keep the README and tour in sync
When you change a product flow, review its screenshots and tooltip text before replacing the cover. A screenshot-based demo is a curated explanation; it does not automatically change when the repository’s application code changes.
Export a new JSON backup after a substantial edit. If your tour uses hosted images, keep those image URLs available for as long as the share link should work.