Demo Script — Gnomad Webcanvas

Duration: 5–7 minutes
Audience: Designers, front-end developers, technical reviewers
Version: 0.1.0-beta.2

Setup (before demo)

• App running: npm run tauri:dev (desktop) or npm run dev (web)
• Browser zoom 100%; window ~1400×900
• Default "Hello, Webcanvas!" template loaded
• Close unrelated apps/notifications

1. Hook (30 sec)

"Gnomad Webcanvas is a live HTML/CSS/JS playground — edit code on the left, see results instantly on the right. It runs in the browser and as a native desktop app with Open/Save."

Click the counter button in preview to show interactivity.

2. Live editing (1 min)

1. In HTML, change the heading text
2. In CSS, change the gradient colors on h1
3. Point out debounced preview — no manual refresh needed
4. Toggle Pause, edit silently, then Refresh

"Preview is debounced so we don't reload on every keystroke, but you can pause for heavy JS work."

3. Layout & panes (45 sec)

1. Toggle vertical ↔ horizontal layout (Ctrl/Cmd+\)
2. Maximize the CSS pane (double-click header)
3. Restore, switch focus with Ctrl/Cmd+1/2/3

4. Templates & libraries (1 min)

1. Open Templates → select Landing Page
2. Show instant preview swap
3. Open Libraries → enable Tailwind CSS
4. Add a Tailwind class to HTML (e.g. class="text-4xl font-bold")

"Templates jump-start projects; CDN libraries inject with one click."

5. Designer tools (45 sec)

1. Font Pairings — apply a heading/body pair; show Google Fonts in preview
2. Color Picker — pick a color, insert into CSS
3. Cycle preview background to checkerboard for transparency demo
4. Switch viewport to Mobile (375px)

6. Console & debugging (30 sec)

1. Add console.log('Hello from preview') in JS
2. Open Console panel (Ctrl/Cmd+Shift+C)
3. Show log capture from iframe

7. Export & share (1 min)

1. Click Export — show ZIP contents (index.html, style.css, script.js)
2. Click Share — paste URL in incognito tab; project loads from hash

"Export for deployment; share for quick demos without a server."

8. Desktop file I/O (30 sec, Tauri only)

1. Save As → save demo.html
2. Reset project, then Open the saved file
3. Point out window title with filename

Skip this section in web-only demos.

9. Close (30 sec)

"Gnomad Webcanvas is part of the Gnomad Studio apps portfolio — lightweight, local-first, and built with Tauri and React. Docs and roadmap are in the repo under docs/."

Q&A prep

Built with ❤️ by Gnomad Studio 🦙