GaelGirodon / diapo

A lightweight web presentation tool

Diapo

A simple, lightweight (~ 3 kB gzipped) and modern (ECMAScript 2020) presentation tool powered by web technologies, featuring:

• Presenter mode with index, timer, notes and cloned view
• Slide auto-scaling to preserve appearance
• Overview mode and black screen
• Various navigation controls

Usage

Quickstart

• Create a standard HTML 5 file
• Import diapo.min.js and diapo.min.css
• Create slides: body.diaporama>.diapos>.diapo*n
• Add speaker notes: .diapo>.notes (optional)
• Initialize the slideshow:

const diapo = new Diapo();

Controls

⌨️ Key / 🖱️ Wheel	Description
→ ↓ PgDn Space 🖱️↓	Navigate to the next slide
← ↑ PgUp 🖱️↑	Navigate to the previous slide
Home	Navigate to the first slide
End	Navigate to the last slide
O	Toggle the overview mode
P	Toggle the presentation mode
C	Open the clone view (in presentation mode)
Esc Enter	Return to the default mode
B	Toggle the black screen (in default mode)
T	Reset the timer

Formatting

The following CSS classes are provided by default and can be used on div.diapo elements:

• Vertical content alignment: ⬆️ top (default), ↕️ middle, ⬇️ bottom
• Horizontal text alignment: ⬅️ left, ↔️ center, ➡️ right
• Slide themes: ☀️ light (default), 🌑 dark
• Columns layout: .row>.col*n

API

Navigation

Navigate to a slide ("prev", "next", "first", "last" or a zero-indexed slide number):

diapo.navigate("next")

Mode

Toggle a mode ("overview", "presenter" or "show" = default):

diapo.toggleMode("presenter")

Clone

Open the detached view, controlled from the presenter mode:

diapo.openClone()

Black screen

Toggle the black screen:

diapo.toggleBlackScreen()

Events

Subscribe to events:

diapo.on("navigationEnd", (e) => console.log(`Navigated to ${e.index}`))

Name	Arguments (e)	Description
navigationStart	{index, element}	Before navigating to a slide
navigationEnd	{index, element}	After navigating to a slide
modeToggle	{mode}	After changing mode
cloneOpen	{window}	After opening the clone view

License

Diapo is licensed under the MIT License.