Navigate a Reveal.JS Presentation

2024 January 15

I write HTML presentations using reveal.js. One of the perks of doing that is that I can integrate my slides right into this website! But since my slides are designed for live presentation by me, they don’t come with any instructions or even navigation cues. This page gives some basic guidance for people who aren’t already familiar with how to use a reveal.js slide deck.

1. The most important fact: pressing the right arrow key will take you to the next slide.
2. The left arrow key will go back to the previous slide.
3. The Home key takes you to the first slide.
4. Yes, the End key likewise takes you to the last slide.
5. The Escape key toggles an overview of all slides. This view might perform poorly in a complex presentation.
6. In most browsers, the F11 key will send the view to fullscreen. This isn’t specific to reveal.js at all, but might be useful if you’re viewing a presentation.
7. Pressing the ‘s’ key will open a popup window with a speaker notes view. Before you get excited about discovering my secrets, I’ll mention that I almost never write hidden speaker notes since, in my experience, I rarely find myself in a position to read and react to them. (But you can absolutely “View Source” and see how I compose things!)
8. If the screen goes black, you may have pressed the ‘b’ key, which blanks the screen. Press it again to go back to seeing the slides.

The reveal.js framework supports “two-dimensional” navigation, where the up and down arrow keys can navigate a second-order sequence of slides, but I’ve never understood the value of this mode, and I don’t use it in my presentations.

Happy navigating!