Skip to content

add speaker notes for slides#9533

Merged
Light2Dark merged 11 commits into
mainfrom
sham/speaker-notes
May 20, 2026
Merged

add speaker notes for slides#9533
Light2Dark merged 11 commits into
mainfrom
sham/speaker-notes

Conversation

@Light2Dark
Copy link
Copy Markdown
Collaborator

@Light2Dark Light2Dark commented May 13, 2026

📝 Summary

Press S to open up speaker notes.
Note that in kiosk mode, I've removed the filename as it seems uneccesary.

Screen.Recording.2026-05-12.at.5.32.23.PM.mov

📋 Pre-Review Checklist

  • For large changes, or changes that affect the public API: this change was discussed or approved through an issue, on Discord, or the community discussions (Please provide a link if applicable).
  • Any AI generated code has been reviewed line-by-line by the human PR author, who stands by it.
  • Video or media evidence is provided for any visual changes (optional).

✅ Merge Checklist

  • I have read the contributor guidelines.
  • Documentation has been updated where applicable, including docstrings for API changes.
  • Tests have been added for the changes made.

@vercel
Copy link
Copy Markdown

vercel Bot commented May 13, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
marimo-docs Ready Ready Preview, Comment May 20, 2026 8:32am

Request Review

@codecov
Copy link
Copy Markdown

codecov Bot commented May 13, 2026

Bundle Report

Changes will increase total bundle size by 121.19kB (0.48%) ⬆️. This is within the configured threshold ✅

Detailed changes
Bundle name Size Change
marimo-esm 25.26MB 121.19kB (0.48%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: marimo-esm

Assets Changed:

Asset Name Size Change Total Size Change (%)
assets/cells-*.js 5.24kB 709.93kB 0.74%
assets/JsonOutput-*.js 195.81kB 556.64kB 54.27% ⚠️
assets/index-*.js -175.39kB 431.34kB -28.91%
assets/index-*.css 789 bytes 366.81kB 0.22%
assets/dist-*.js 2 bytes 104 bytes 1.96%
assets/dist-*.js 79 bytes 183 bytes 75.96% ⚠️
assets/dist-*.js -87 bytes 169 bytes -33.98%
assets/dist-*.js -32 bytes 137 bytes -18.93%
assets/dist-*.js -52 bytes 335 bytes -13.44%
assets/dist-*.js -99 bytes 160 bytes -38.22%
assets/dist-*.js 99 bytes 276 bytes 55.93% ⚠️
assets/dist-*.js -20 bytes 256 bytes -7.25%
assets/dist-*.js 266 bytes 403 bytes 194.16% ⚠️
assets/dist-*.js -7 bytes 169 bytes -3.98%
assets/dist-*.js 218 bytes 387 bytes 128.99% ⚠️
assets/dist-*.js 16 bytes 176 bytes 10.0% ⚠️
assets/dist-*.js -171 bytes 164 bytes -51.04%
assets/dist-*.js -60 bytes 104 bytes -36.59%
assets/dist-*.js -81 bytes 102 bytes -44.26%
assets/dist-*.js -226 bytes 177 bytes -56.08%
assets/dist-*.js 155 bytes 259 bytes 149.04% ⚠️
assets/edit-*.js 350 bytes 325.12kB 0.11%
assets/reveal-*.js 72.43kB 249.47kB 40.91% ⚠️
assets/add-*.js 9.24kB 201.99kB 4.79%
assets/layout-*.js 192 bytes 198.42kB 0.1%
assets/cell-*.js 996 bytes 184.14kB 0.54%
assets/file-*.js 32 bytes 102.67kB 0.03%
assets/file-*.js 264 bytes 47.03kB 0.56%
assets/worker-*.js 140 bytes 85.23kB 0.16%
assets/save-*.js 155 bytes 81.24kB 0.19%
assets/input-*.js 46 bytes 60.48kB 0.08%
assets/panels-*.js 2.15kB 47.89kB 4.7%
assets/chat-*.js 240 bytes 32.63kB 0.74%
assets/chat-*.js 5 bytes 14.66kB 0.03%
assets/chat-*.js 6.53kB 15.22kB 75.18% ⚠️
assets/useNotebookActions-*.js 2.66kB 29.98kB 9.74% ⚠️
assets/react-*.browser.esm-Ce2ksurd.js (New) 25.64kB 25.64kB 100.0% 🚀
assets/session-*.js 1 bytes 25.04kB 0.0%
assets/vega-*.browser-xq8miGHn.js (New) 24.8kB 24.8kB 100.0% 🚀
assets/home-*.js 188 bytes 24.17kB 0.78%
assets/MarimoErrorOutput-*.js -265 bytes 23.74kB -1.1%
assets/useEventListener-*.js 60 bytes 12.84kB 0.47%
assets/vega-*.js 82 bytes 12.79kB 0.65%
assets/CellStatus-*.js -133 bytes 11.22kB -1.17%
assets/run-*.js 58 bytes 9.83kB 0.59%
assets/react-*.esm--O4lBTlZ.js (New) 8.37kB 8.37kB 100.0% 🚀
assets/ws-*.js 86 bytes 7.52kB 1.16%
assets/config-*.js 315 bytes 6.41kB 5.17% ⚠️
assets/ttcn-*.js -7 bytes 57 bytes -10.94%
assets/ttcn-*.js 7 bytes 64 bytes 12.28% ⚠️
assets/emotion-*.esm-Dangy3Bv.js (New) 4.37kB 4.37kB 100.0% 🚀
assets/useBoolean-*.js -2.75kB 3.02kB -47.66%
assets/mermaid-*.core-867JpRcd.js (New) 2.38kB 2.38kB 100.0% 🚀
assets/semaphore-*.js (New) 788 bytes 788 bytes 100.0% 🚀
assets/maps-*.js -198 bytes 595 bytes -24.97%
assets/fileToBase64-*.js 52 bytes 531 bytes 10.86% ⚠️
assets/slides-*.css 224 bytes 529 bytes 73.44% ⚠️
assets/package-*.js (New) 372 bytes 372 bytes 100.0% 🚀
assets/external-*.js (New) 251 bytes 251 bytes 100.0% 🚀
assets/ban-*.js (New) 181 bytes 181 bytes 100.0% 🚀
assets/__vite-*.js 5 bytes 98 bytes 5.38% ⚠️
assets/__vite-*.js -5 bytes 93 bytes -5.1%
assets/react-*.browser.esm-BUNcfKXO.js (Deleted) -25.64kB 0 bytes -100.0% 🗑️
assets/vega-*.browser-BegSZk0G.js (Deleted) -24.8kB 0 bytes -100.0% 🗑️
assets/react-*.esm-D9xfKaPZ.js (Deleted) -8.37kB 0 bytes -100.0% 🗑️
assets/emotion-*.esm-DD4AwVTU.js (Deleted) -4.37kB 0 bytes -100.0% 🗑️
assets/mermaid-*.core-BQULBKwL.js (Deleted) -2.38kB 0 bytes -100.0% 🗑️

Files in assets/edit-*.js:

  • ./src/core/edit-app.tsx → Total Size: 8.35kB

Files in assets/reveal-*.js:

  • ./src/components/slides/reveal-component.tsx → Total Size: 15.4kB

  • ./src/components/slides/slide-notes-editor.tsx → Total Size: 4.66kB

  • ./src/components/slides/slide-notes.ts → Total Size: 1.29kB

Files in assets/layout-*.js:

  • ./src/components/editor/renderers/slides-layout/types.ts → Total Size: 965 bytes

  • ./src/components/editor/renderers/slides-layout/plugin.tsx → Total Size: 1.02kB

  • ./src/components/editor/renderers/slides-layout/slides-layout.tsx → Total Size: 2.23kB

Copy link
Copy Markdown
Contributor

@cubic-dev-ai cubic-dev-ai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

1 issue found across 9 files

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="frontend/src/components/slides/slide-notes-editor.tsx">

<violation number="1" location="frontend/src/components/slides/slide-notes-editor.tsx:45">
P2: Switching slides before the debounce fires can drop recent speaker-note edits. Flush or persist pending text when `cellId` changes/unmounts so fast navigation doesn't lose input.</violation>
</file>
Architecture diagram
sequenceDiagram
    participant User as User (Browser)
    participant SlidesUI as SlidesLayoutRenderer
    participant Deck as Reveal Deck Component
    participant NotesPlugin as Reveal Notes Plugin
    participant KioskIframe as Kiosk Iframe (Speaker View)
    participant NotesEditor as SlideNotesEditor
    participant Store as Layout Store (Jotai)

    Note over User,Store: Slide Presentation Flow with Speaker Notes

    User->>SlidesUI: Interact with slides (navigate, edit)
    SlidesUI->>SlidesUI: Determine isReading mode (read OR kiosk flag)
    alt Kiosk Mode Active (speaker view iframe)
        SlidesUI->>SlidesUI: Collapse to read-only layout (hide chrome)
    end

    User->>NotesEditor: Type/Edit speaker notes for current slide
    NotesEditor->>NotesEditor: Debounce input (300ms)
    NotesEditor->>Store: Persist updated speakerNotes in SlideConfig map
    Store-->>NotesEditor: Confirm update

    User->>Deck: Press 'S' to open speaker view
    Deck->>NotesPlugin: Initialize Notes plugin
    NotesPlugin->>KioskIframe: Create kiosk iframe with ?kiosk=true&show-chrome=false
    Note over NotesPlugin,KioskIframe: Kiosk URL includes current slide context

    alt Kiosk iframe loads (inside speaker view)
        KioskIframe->>SlidesUI: Load read-only slide deck (kioskMode=true)
        SlidesUI->>Deck: Render slides with isReading=true
        Deck->>Deck: Skip RevealNotes plugin (no nested speaker view)
        Note over KioskIframe,Deck: Shows slide content + inline notes aside
    end

    Note over Deck,Store: Slide Rendering with Notes Injection

    SlidesUI->>Deck: Pass slideConfigs (with speakerNotes) to SubslideView
    Deck->>Deck: buildSubslideNotes() for each subslide
    Deck->>Deck: Compute slideLevel notes + cumulativeByBlock per fragment

    alt Fragment block has notes
        Deck->>Deck: Inject NotesAside (aside.notes) inside Fragment element
    else Slide-level notes exist (non-fragment)
        Deck->>Deck: Inject NotesAside outside fragment containers
    end

    User->>Deck: Navigate slides / reveal fragments
    Deck->>Deck: Update active slide index and fragment index
    Deck->>NotesPlugin: Report slide change
    NotesPlugin->>KioskIframe: Update preview in speaker view

    alt User edits notes while presenting (only in main deck, not kiosk)
        User->>NotesEditor: Edit text
        NotesEditor->>Store: Save new notes
        Store-->>NotesEditor: Updated config
        NotesEditor->>Deck: Re-render with updated notes (via layout state)
    end

    Note over Deck,Store: Kiosk Mode Bypass
    alt Deck is inside kiosk iframe
        Deck->>Deck: Skip keyboard event propagation (stopPropagation on textarea)
        Deck->>Deck: Disable Notes plugin to prevent nested popups
        Deck->>NotesPlugin: Not initialized (plugin list empty)
    end
Loading

Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.

Comment thread frontend/src/components/slides/slide-notes-editor.tsx Outdated
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds speaker notes support for slides, including editable notes in the slides authoring UI and Reveal speaker-view integration.

Changes:

  • Adds speakerNotes to slide layout config and smoke-test layout data.
  • Adds helper logic and tests for aggregating slide/fragment notes.
  • Adds a notes editor panel, resize handle styling, kiosk handling, and Reveal notes plugin wiring.

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 3 comments.

Show a summary per file
File Description
marimo/_smoke_tests/slides_examples/nested_slides.py Updates generated version metadata.
marimo/_smoke_tests/slides_examples/layouts/nested_slides.slides.json Adds sample speaker notes to slide config entries.
frontend/src/components/slides/slides.css Adds resize-handle styling for the notes panel.
frontend/src/components/slides/slide-notes.ts Adds helpers for collecting and accumulating notes.
frontend/src/components/slides/slide-notes-editor.tsx Adds editable speaker notes textarea.
frontend/src/components/slides/reveal-component.tsx Integrates notes rendering, Reveal notes plugin, kiosk URL, and notes panel layout.
frontend/src/components/slides/__tests__/slide-notes.test.ts Adds tests for notes aggregation helpers.
frontend/src/components/editor/renderers/slides-layout/types.ts Adds speakerNotes to slide config type.
frontend/src/components/editor/renderers/slides-layout/slides-layout.tsx Treats kiosk clients as read-only slide renderers.

Comment thread frontend/src/components/slides/slide-notes-editor.tsx Outdated
Comment thread frontend/src/components/editor/renderers/slides-layout/types.ts Outdated
Comment thread frontend/src/components/slides/reveal-component.tsx
Copy link
Copy Markdown
Contributor

@cubic-dev-ai cubic-dev-ai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

2 issues found across 6 files (changes from recent commits).

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="frontend/src/components/slides/slide-notes-editor.tsx">

<violation number="1" location="frontend/src/components/slides/slide-notes-editor.tsx:55">
P2: `draft` is only synchronized when `cellId` changes, so external note updates for the currently selected slide are not reflected in the textarea.</violation>
</file>

<file name="frontend/src/components/editor/renderers/slides-layout/__tests__/plugin.test.ts">

<violation number="1" location="frontend/src/components/editor/renderers/slides-layout/__tests__/plugin.test.ts:216">
P2: This case doesn’t actually verify that `speakerNotes` survives validation, so it won’t catch the schema dropping the field. Assert the parsed payload (or pass `parsed.data` into `deserializeLayout`) to make the regression test meaningful.</violation>
</file>

Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.

Comment thread frontend/src/components/slides/slide-notes-editor.tsx
Comment thread frontend/src/components/editor/renderers/slides-layout/__tests__/plugin.test.ts Outdated
)}
>
{isEditing && (
{!hideControls && isEditing && (
Copy link
Copy Markdown
Collaborator Author

@Light2Dark Light2Dark May 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This hides the filename input if show-chrome=False. @mscolnick

Image

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i think its worth hiding, nice call

Copy link
Copy Markdown
Contributor

@cubic-dev-ai cubic-dev-ai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

1 issue found across 1 file (changes from recent commits).

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="frontend/src/core/edit-app.tsx">

<violation number="1">
P2: `AppHeader` is now always rendered, so `hideControls` no longer hides the header container. In kiosk/hidden-controls mode this leaves an empty padded header area and changes layout.</violation>
</file>

Tip: Review your code locally with the cubic CLI to iterate faster.

Comment thread frontend/src/core/edit-app.tsx
@Light2Dark Light2Dark marked this pull request as ready for review May 13, 2026 20:29
@Light2Dark Light2Dark requested review from manzt and peter-gy May 13, 2026 20:52
Comment thread frontend/src/components/slides/slide-notes-editor.tsx
Light2Dark and others added 2 commits May 14, 2026 12:24
Co-authored-by: Kiran Gadhave <14944083+kirangadhave@users.noreply.github.com>
kirangadhave
kirangadhave previously approved these changes May 14, 2026
Copy link
Copy Markdown
Member

@kirangadhave kirangadhave left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀 Looks awesome!

Copy link
Copy Markdown
Contributor

@peter-gy peter-gy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

great stuff👌 -- only a couple of comments. once we make CI/lints pass this should be good to merge imo

Comment thread frontend/src/components/slides/slide-notes-editor.tsx Outdated
hitAreaMargins={{ coarse: 12, fine: 4 }}
/>
)}
<Panel defaultSize={4} minSize={4} collapsible={true} collapsedSize={4}>
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should the notes panel start larger? at this size the textarea is looks like a one-line strip on first load to me so the feature is hard to discover/use.

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image thanks, made it slightly bigger

value={draft}
onChange={(event) => handleChange(event.target.value)}
onClick={Events.stopPropagation()}
placeholder="Add notes for this slide. Visible to you in speaker view (press S during presentation)."
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

love the show-on-S-pressed behavior! it might make sense to include this in the slides docs because rn this placeholder seems to be the only place where we advertise this feature

manzt
manzt previously approved these changes May 18, 2026
Copy link
Copy Markdown
Collaborator

@manzt manzt left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just some minor typing things. Looks great.

Comment on lines +24 to +27
// All fields are optional so layouts saved by older marimo versions will work.
// NOTE: every property of `SlideConfig` must be listed here — `z.object`
// strips unknown keys by default, so omitting a field silently drops it on
// any code path that runs the input through `validator.parse`.
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe for future PR (and other plugins/validations), but would be nice for our zod schemas to be very flexible but .transform() into more strict types for the internals (wide/backward-compatible external, to narrow/strict internal type).

Comment thread frontend/src/components/editor/renderers/slides-layout/types.ts Outdated
Comment thread frontend/src/components/slides/__tests__/slide-notes.test.ts Outdated
@Light2Dark Light2Dark dismissed stale reviews from manzt and kirangadhave via 72cfcb4 May 19, 2026 07:20
@Light2Dark Light2Dark requested a review from akshayka as a code owner May 19, 2026 07:20
@github-actions github-actions Bot added the documentation Improvements or additions to documentation label May 19, 2026
Copy link
Copy Markdown
Contributor

@cubic-dev-ai cubic-dev-ai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

1 issue found across 8 files (changes from recent commits).

Tip: Review your code locally with the cubic CLI to iterate faster.

Re-trigger cubic

Comment thread frontend/src/components/editor/renderers/slides-layout/types.ts Outdated
@Light2Dark Light2Dark merged commit 6492353 into main May 20, 2026
47 checks passed
@Light2Dark Light2Dark deleted the sham/speaker-notes branch May 20, 2026 22:32
@github-actions
Copy link
Copy Markdown

🚀 Development release published. You may be able to view the changes at https://marimo.app?v=0.23.7-dev65

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

documentation Improvements or additions to documentation enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

7 participants