Slide-Deck Web Component

View as…

Use arrow keys to navigate. Or scroll instead. It's just a web page!

We support speaker notes!

No Dependencies

This is a stand-alone web component

Progressive Enhancement

Fallback to semantic HTML

JavaScript is needed for using keyboard shortcuts or opening the control panel. The markup and styles are all there on first-load.

Just HTML

Slide notes are also HTML

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

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.

Speaker Notes

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

To add speaker notes, a slide should contain two children: using the slide-note and slide-canvas attributes.

A slide with these 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

Keep it simple

If you don't need speaker notes, don't worry about it. Every child of slide-deck is a slide without any extra markup.

Keyboard Shortcuts

Always available:

command-k: Toggle control panel
command-shift-enter: Start presentation (from first slide)
command-enter: Resume presentation (from active slide)
alt-enter: Join presentation in speaker view (from active slide)

Windows and Linux users can use Ctrl instead of Command.

Starting a presentation takes you into the slideshow view, with keyboard controls on, and following active-slide changes in local-storage (in case you are using multiple tabs for different views).

Key-Control On:

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

When the key-control feature is turned on, these extra shortcuts are available. To turn them on by default, add the key-control attribute to your slide-deck.

Works with Presentation Remotes

(at least the ones we've tested - they just send keyboard shortcuts)

Add Your Own Controls

Using the control-panel slot

(or style what's there with the provided parts)

You can slot-in your own control panel or blank slide template, by providing dialog elements with slot="control-panel" or slot="blank-slide".

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

Buttons with the slide-event attribute will send custom events to the slide-deck when activated. The event can be specified in the attribute (slide-event="next") or it will be inferred from the inner text of the button.

`<button set-view>slideshow<button>`

Buttons with the set-view attribute will set the slide-view attribute on the slide-deck when activated. The view can be specified in the attribute (set-view="grid") or it will be inferred from the inner text of the button.