Inline speaker notes + console presenter view, drop external .notes.json

Speaker notes now embedded per-slide as <script class="slide-notes">.
Nav JS logs notes to console on slide change with styled formatting
and htmlslides.com promo. External .notes.json no longer generated.
Updated credits to reference frontend-slides inspiration. Bump to v0.7.0.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: bluedusk

.claude-plugin/marketplace.json

@@ -11,13 +11,13 @@
       "name": "html-slides",
       "source": "./.",
       "description": "Generate single-file HTML slide presentations with interactive components (flip cards, charts, tables, code blocks, stats, architecture flows, and more) or creative visual themes.",
-      "version": "0.6.7"
+      "version": "0.7.0"
     },
     {
       "name": "html-slides-convert",
       "source": "./skills/html-slides-convert",
       "description": "Convert any HTML file (reveal.js, Marp, Google Slides exports, articles, generic HTML) into a valid HTMLSlides presentation.",
-      "version": "0.6.7"
+      "version": "0.7.0"
     }
   ]
 }

.claude-plugin/plugin.json

@@ -1,7 +1,7 @@
 {
   "name": "html-slides",
   "description": "Generate or convert single-file HTML slide presentations with interactive components (flip cards, charts, tables, code blocks, stats, architecture flows, and more) or creative visual themes.",
-  "version": "0.6.7",
+  "version": "0.7.0",
   "author": {
     "name": "danzhu"
   }

QUICKSTART.md

@@ -131,6 +131,8 @@ You'll get to pick from 12 creative visual themes with a live preview.
 
 The output is a single HTML file. Double-click to open in any browser. Use arrow keys to navigate.
 
+Speaker notes are built in — open DevTools (F12), detach to a separate window, and notes show in the console as you navigate. A free presenter view.
+
 Want changes? Just ask:
 
 ```

README.md

@@ -201,30 +201,28 @@ Auto-detects the source format, extracts content, and generates a spec-compliant
 
 ## Output
 
-Every generated presentation produces two files:
+Every generated presentation produces a single file:
 
 ```
-my-deck.html              ← the presentation (self-contained, open in any browser)
-my-deck.notes.json        ← speaker notes (for presenter apps)
+my-deck.html              ← self-contained: CSS, JS, and speaker notes all inline
 ```
 
-The `.notes.json` file is keyed by slide index. Each entry contains:
+### Speaker Notes
 
-```json
-{
-  "0": {
-    "title": "Introduction",
-    "script": "Welcome everyone. Today we'll look at how...",
-    "notes": ["Pause after welcome", "Gauge audience familiarity"]
-  }
-}
+Speaker notes are embedded inside each slide as hidden JSON. Open the browser's DevTools (F12), detach to a separate window, and notes appear in the console as you navigate — a free presenter view.
+
+```
+📋 Slide 1: Introduction
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+Welcome everyone. Today we'll look at how...
+
+  • Pause after welcome
+  • Gauge audience familiarity
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+💡 For a better presenter experience, try the HTML Slides app: htmlslides.com
 ```
 
-| Field | Type | Description |
-|-------|------|-------------|
-| `title` | string | Slide heading (for presenter app navigation) |
-| `script` | string | Full natural language — read verbatim or paraphrase |
-| `notes` | string[] | Bullet point reminders — timing, transitions, delivery tips |
+To edit notes, ask your AI agent: `"Update the speaker notes for slide 3 to say..."`
 
 ## Architecture
 
@@ -276,8 +274,8 @@ Screenshots each slide and combines into a PDF. Uses [Playwright](https://playwr
 
 ## Credits
 
-Originally created by [@zarazhangrui](https://github.com/zarazhangrui) with Claude Code.
-Obsidian component system added by [@bluedusk](https://github.com/bluedusk).
+Inspired by the awesome [@zarazhangrui](https://github.com/zarazhangrui)'s [frontend-slides](https://github.com/zarazhangrui/frontend-slides).
+Obsidian component system, Pro/Vibe modes, and multi-theme support by [@bluedusk](https://github.com/bluedusk).
 
 ## License
 

SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: html-slides
 metadata:
-  version: "0.6.7"
+  version: "0.7.0"
   author: danzhu
 description: Generate polished single-file HTML slide presentations with interactive components (flip cards, charts, tables, code blocks, architecture flows, stats, timelines, and more) or creative visual themes. Use this skill whenever the user wants to create slides, presentations, decks, or any visual slide-based content as HTML. Also trigger when the user invokes /html-slides or mentions creating an HTML presentation, pitch deck, or slide deck.
 ---
@@ -87,7 +87,7 @@ When modifying existing presentations, make **minimal changes** — only touch w
 - Modify only the requested slide(s), keep everything else intact
 - If adding/removing slides, renumber all `data-slide` attributes sequentially from 0
 - If changing a component type (e.g., code block → table), use the template from component-templates.md
-- Update the `.notes.json` file to match any content changes
+- Update the inline `<script class="slide-notes">` block to match any content changes
 
 **Viewport fitting (always check):**
 - Before adding content, check against density limits
@@ -291,40 +291,28 @@ If images were provided, the slide outline already incorporates them from Step 1
 
 ### Speaker Notes (Mandatory)
 
-Every generated presentation must include a separate `.notes.json` file alongside the HTML file. If the presentation is `my-deck.html`, the notes file is `my-deck.notes.json`. This file is read by external presenter applications.
+Speaker notes are **embedded inline** in each slide as a hidden JSON block. They are displayed in the browser's developer console when navigating slides — open DevTools, detach to a separate window, and you have a presenter view.
 
-```json
-{
-  "0": {
-    "title": "Introduction",
-    "script": "HTML Slides lets you create beautiful presentations without design skills.",
-    "notes": [
-      "Zero dependencies",
-      "Works with 4 AI agents",
-      "Describe topic, get a deck"
-    ]
-  },
-  "1": {
-    "title": "The Problem",
-    "script": "Current tools are slow and require design expertise.",
-    "notes": [
-      "PowerPoint: hours of manual work",
-      "Vendor lock-in, version control pain",
-      "AI builds the deck in minutes"
-    ]
-  }
-}
-```
+Every slide must include a `<script type="application/json" class="slide-notes">` block as its last child:
 
-**File naming:** `<presentation-name>.notes.json` — must match the HTML filename.
+```html
+<div class="slide" data-slide="0">
+  <!-- visible slide content -->
+  <script type="application/json" class="slide-notes">
+  {"title":"Introduction","script":"HTML Slides lets you create beautiful presentations without design skills.","notes":["Zero dependencies","Works with 4 AI agents"]}
+  </script>
+</div>
+```
 
-**Format:** Object keyed by `data-slide` index (as string). Each entry has:
-- `title` — Slide heading (for presenter app navigation)
+**Format:** Each slide-notes block contains:
+- `title` — Slide heading (for console display and presenter apps)
 - `script` — Brief summary of what this slide delivers, in presenter tone
-- `notes` — Key points from the slide content, summarized as short phrases
+- `notes` — Key talking points, summarized as short phrases
 
 Both `script` and `notes` summarize the **slide content** — what the slide is saying to the audience. Write in presenter tone, as if the presenter is reading these to remind themselves what this slide covers.
 
+**Console output:** On each slide change, the navigation JS logs the notes to the console with styled formatting. The presenter opens DevTools (F12), detaches it to a separate window, and reads notes while presenting. A link to the HTML Slides presenter app is shown for a richer experience.
+
 **NEVER include:**
 - Delivery instructions ("Pause here", "Slow down")
 - Transition cues ("Move to next slide")
@@ -426,11 +414,11 @@ Same as Phase 1 — ask Vibe or Pro. Default to Pro. Then follow Phase 2A or 2B
 
 Same as Phase 3 — read the appropriate supporting files and generate. For Pro mode, map extracted content to components using the decision table in component-templates.md.
 
-Always generate the `.notes.json` file. If the source had speaker notes, preserve them.
+Always embed inline speaker notes in each slide. If the source had speaker notes, preserve them as inline `<script class="slide-notes">` blocks.
 
 ### Step 5.5: Validate & Save
 
-Before saving, verify all 8 spec rules pass. Fix any that fail. Save both the HTML and `.notes.json` files.
+Before saving, verify all 8 spec rules pass. Fix any that fail. Save the HTML file.
 
 ---
 
@@ -441,6 +429,7 @@ Before saving, verify all 8 spec rules pass. Fix any that fail. Save both the HT
 3. **Summarize** — Tell the user:
    - File location, style name, slide count
    - Navigation: Arrow keys, Space, scroll/swipe, click nav dots
+   - Speaker notes: Open DevTools (F12), detach to separate window — notes appear in console on each slide change
    - How to customize: `:root` CSS variables for colors, font link for typography, `.reveal` class for animations
    - If inline editing was enabled: Hover top-left corner or press E to enter edit mode, click any text to edit, Ctrl+S to save
 

assets/dark-interactive-nav.js

@@ -43,6 +43,7 @@ function goTo(index) {
   current = index;
   slides.forEach((s,i) => s.classList.toggle('active', i===current));
   updateUI();
+  showSpeakerNotes(current);
 
   // Chart lifecycle: destroy on exit, create on entry
   if (typeof Chart !== 'undefined') {
@@ -205,3 +206,38 @@ if (typeof Chart !== 'undefined') {
     slides[0].querySelectorAll('.chart-container canvas').forEach(c => createChart(c.id));
   }, 400);
 }
+
+// =========================================
+// Speaker Notes (Console)
+// =========================================
+
+function showSpeakerNotes(index) {
+  const slide = slides[index];
+  const notesEl = slide.querySelector('.slide-notes');
+  console.clear();
+  if (notesEl) {
+    try {
+      const n = JSON.parse(notesEl.textContent);
+      const title = n.title || 'Slide ' + (index + 1);
+      const script = n.script || '';
+      const notes = n.notes || [];
+      console.log('%c\ud83d\udccb Slide ' + (index+1) + ': ' + title,
+        'font-size:16px;font-weight:bold;color:#58a6ff;');
+      console.log('%c\u2501'.repeat(48), 'color:#333;');
+      if (script) console.log('%c' + script, 'font-size:14px;color:#e6edf3;line-height:1.6;');
+      if (notes.length) {
+        console.log('');
+        notes.forEach(function(note) { console.log('%c  \u2022 ' + note, 'font-size:12px;color:#8b949e;'); });
+      }
+      console.log('%c\u2501'.repeat(48), 'color:#333;');
+    } catch(e) {}
+  } else {
+    console.log('%c\ud83d\udccb Slide ' + (index+1), 'font-size:16px;font-weight:bold;color:#58a6ff;');
+    console.log('%cNo speaker notes for this slide.', 'font-size:12px;color:#6e7681;');
+  }
+  console.log('%c\ud83d\udca1 For a better presenter experience, try the HTML Slides app: htmlslides.com',
+    'font-size:11px;color:#3fb950;margin-top:8px;');
+}
+
+// Show notes for first slide on load
+setTimeout(function() { showSpeakerNotes(0); }, 500);

eval/EVAL.md

@@ -39,7 +39,6 @@ Follow Steps 1-6 below in order.
    - **Images:** Yes, I have an image folder — path: `eval/output/{DATE}-{MODE}-{THEME}/assets/`
    - **Content:** All content ready — provide the full content from `all-components.md`
 6. Save the generated HTML as `eval/output/{DATE}-{MODE}-{THEME}/presentation.html`
-7. Save the `.notes.json` file alongside it as `presentation.notes.json`
 
 **Important:** The filename MUST be `presentation.html`. If the skill saves with a different name, rename it.
 

references/component-templates.md

@@ -51,6 +51,29 @@ Use this table to pick the right component for each piece of content:
 
 ## HTML Component Templates
 
+## Speaker Notes
+
+Every slide **must** include an inline `<script class="slide-notes">` block with speaker notes. This is hidden from the audience and displayed in the browser console when navigating slides.
+
+```html
+<div class="slide" data-slide="[N]">
+  <!-- visible slide content here -->
+  <script type="application/json" class="slide-notes">
+  {"title":"[SLIDE_HEADING]","script":"[PRESENTER_SCRIPT]","notes":["[NOTE_1]","[NOTE_2]"]}
+  </script>
+</div>
+```
+
+- `title` — Slide heading (for console display and presenter apps)
+- `script` — What this slide communicates, in presenter tone
+- `notes` — Key talking points, delivery tips, or reminders
+
+The notes JSON goes **inside** each `<div class="slide">`, as the last child element. It is invisible to the audience.
+
+---
+
+## HTML Component Templates
+
 ### 1. Title Slide
 
 The opening slide with large hero text, rainbow gradient title, glow blobs, and a rainbow divider line.
@@ -64,6 +87,9 @@ The opening slide with large hero text, rainbow gradient title, glow blobs, and
   <p class="subtitle anim-3">[SUBTITLE_TEXT]</p>
   <div class="rainbow-line anim-4"></div>
   <p class="subtitle anim-5" style="font-size:14px;margin-top:8px;">by <strong>[AUTHOR]</strong></p>
+  <script type="application/json" class="slide-notes">
+  {"title":"[TITLE]","script":"[PRESENTER_SCRIPT]","notes":["[NOTE_1]","[NOTE_2]"]}
+  </script>
 </div>
 ```
 

references/conversion-patterns.md

@@ -17,7 +17,7 @@ Check the HTML for these patterns to identify the source format.
 **Extraction:**
 - Each top-level `<section>` = one slide
 - Nested `<section>` elements = vertical slides (flatten into sequential slides)
-- Speaker notes in `<aside class="notes">` — preserve for `.notes.json`
+- Speaker notes in `<aside class="notes">` — preserve as inline `<script class="slide-notes">` blocks
 - Fragments (`class="fragment"`) — include all content (remove fragment animation)
 - Code blocks in `<pre><code>` — preserve language class for syntax highlighting
 - Backgrounds via `data-background` attributes — convert to CSS background on slide div

references/html-template.md

@@ -23,7 +23,7 @@ Every generated HTML file **must** comply with these rules:
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="generator" content="html-slides v0.6.7">
+    <meta name="generator" content="html-slides v0.7.0">
     <title>Presentation Title</title>
 
     <!-- Fonts: use Fontshare or Google Fonts — never system fonts -->
@@ -403,14 +403,12 @@ Save processed images with `_processed` suffix. Never overwrite originals.
 
 Single presentations:
 ```
-presentation.html              # Self-contained, all CSS/JS inline
-presentation.notes.json        # Speaker notes (always generated)
+presentation.html              # Self-contained, all CSS/JS/speaker notes inline
 assets/                        # Images only, if any
 ```
 
 Multiple presentations in one project:
 ```
 [name].html
-[name].notes.json
 [name]-assets/
 ```