════════════════════════════════════════════════════════════════════════
  DEMO SCRIPT
  Gnomad Webcanvas · docs/DEMO_SCRIPT.md
════════════════════════════════════════════════════════════════════════

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
--------

  Question                  |  Answer                                                
  vs CodePen/JSFiddle?      |  Local-first, desktop Open/Save, no account, ZIP export
  vs VS Code Live Preview?  |  Integrated Monaco + tools + share URL in one app      
  Backend?                  |  None in v0.1 — all client-side                        
  Mobile app?               |  Not planned; responsive web works on tablets          

────────────────────────────────────────

Built with ❤️ by Gnomad Studio 🦙

════════════════════════════════════════════════════════════════════════
Built with ❤️ by Gnomad Studio 🦙
https://gnomadstudio.org
════════════════════════════════════════════════════════════════════════