Slide-Deck Web Component

No Dependencies

Progressive Enhancement

Some slide notes are very short. Little reminders.

Just HTML

Slide notes are also HTML

In script view the active slide-item will have a larger canvas size and the font-size of an active slides speaker notes is increased for easier readability.

This is a heading level 3

This paragraph exists to test a variety of content within slide-notes. While some slides may not have any notes at all, others may have extremely verbose notes and may contain many details.

Blockquote example within the slide-notes to test a few different content types.

Keyboard Shortcuts

Always available:

command-k: Toggle control panel
command-shift-enter: Start presentation (from first slide)
command-enter: Resume presentation (from active slide)
command-shift-f: Toggle full-screen mode
command-.: End presentation

Active Presentation:

N / right-arrow / down-arrow / page-down: Next slide
P / left-arrow / up-arrow / page-up: Previous slide
home: First slide
end: Last slide
W / ,: Toggle white screen
B / .: Toggle black screen
escape: Blur focused element, close control panel, or end presentation

Works with Presentation Remotes

Add Your Own Controls

`<button slide-event>previous<button>`

`<button set-view>solo<button>`

Custom Control Panel

Example

Speaker View

Open Source

github.com/oddbird/slide-deck/

Speaker Notes

<div>
  <div slide-canvas>
    This slide has both a canvas
  </div>
  <div slide-note>
    And a section for notes
  </div>
</div>

Within a slide element, we can provide both a 'canvas' and a 'note'! For styling purposes:

A slide with internal parts will be labeled as a slide-item="container"
A slide without nested parts will get both slide-item="canvas" and also the slide-canvas attribute