Presenting Slides

Overview

This article covers the mechanics of presenting slides with Reveal. Basic navigation is done using the following keyboard shortcuts:

Action Keys
Next slide SPACE N
Previous slide P
Navigate without fragments Alt → Alt ←
Jump to first/last slide Shift → Shift ←

You will often want to enter fullscreen mode when presenting. You can do this by pressing the F key.

In addition to basic keyboard navigation, Reveal supports several more advanced capabilities, including:

  • Navigation menu and overview mode
  • Speaker view (w/ speaker notes,timer, and preview of upcoming slides)
  • Printing to PDF and publishing as self-contained HTML
  • Drawing on top of slides & chalkboard/whiteboard mode
  • Multiplex, which allows your audience to follow the slides of the presentation you are controlling on their own phone, tablet or laptop.

These capabilities are described below.

Overview Mode

Overview mode provides an alternate view that shows you a thumbnail for each slide:

You can enable Overview Mode by pressing the O key.

Slide Zoom

Hold down the Alt key (or Ctrl in Linux) and click on any element to zoom towards it. Try zooming in on one of these images:

Alt or Ctrl click again to zoom back out.

Speaker View

The speaker view shows the current slide along with the upcoming slide, a timer, and any speaker notes associated with the current slide:

You can enable Speaker View by pressing the S key.

You can add speaker notes to a slide using a div with class .notes. For example:

## Slide with speaker notes

Slide content

::: {.notes}
Speaker notes go here.
:::

Slide Numbers

You can add slide numbers to your presentation using the slide-number option. You can also control in which contexts slide numbers appear using the show-slide-number option. For example, here we configure slides numbers for printed output only:

---
title: "Presentation"
format:
  revealjs:
    slide-number: true
    show-slide-number: print
---

In addition to a simple true or false value, the slide-number option can also specify a format. Available formats include:

Value Description
c/t Slide number / total slides (default)
c Slide number only
h/v Horizontal / Vertical slide number
h.v Horizontal . Vertical slide number

See Vertical Slides for additional information on vertical slides.

The show-slide-number option supports the following values:

Value Description
all Show slide numbers in all contexts (default)
print Only show slide numbers when printing to PDF
speaker Only show slide numbers in the speaker view

Auto-Slide

Presentations can be configured to step through slides automatically, without any user input. To enable this you will need to specify an interval for slide changes using the auto-slide option (the interval is provided in milliseconds). The loop option can additionally be specified to continue presenting in a loop once all the slides have been shown.

For example, here we specify that we want to advance every 5 seconds and continue in a loop:

---
title: "Presentation"
format: 
  revealjs: 
    auto-slide: 5000
    loop: true
---

A play/pause control element will automatically appear for auto-sliding decks. Sliding is automatically paused if the user starts interacting with the deck. It’s also possible to pause or resume sliding by pressing A on the keyboard.

You can disable the auto-slide controls and prevent sliding from being paused by specifying auto-slide-stoppable: false.

Slide Timing

It’s also possible to override the slide duration for individual slides and fragments by using the autoslide attribute (this attribute also works on Fragments). For example, here we set the auto-slide value to 2 seconds:

## Slide Title {autoslide=2000}

Publishing

There are two main ways to publish Reveal presentations:

  1. As a PDF file—see Print to PDF above for details on how to do this.

  2. As an HTML file. For HTML, it’s likely most convenient to distribute the presentation as a single self-contained file. To do this, specify the self-contained option:

    ---
    title: "Presentation"
    format:
      revealjs:
        self-contained: true
    ---

    All of the dependent images, CSS styles, and other assets will be contained within the HTML file created by Quarto.

See the documentation on Publishing HTML for details on additional ways to publish Reveal presentations including GitHub Pages and RStudio Connect.

Chalkboard

Quarto includes a built-in version of the reveal.js-chalkboard plugin. Specify the chalkboard: true option to enable the plugin, which enables you to draw on a notes canvas on top of your slides and/or open up an empty chalkboard within your presentation:

---
title: "Presentation"
format:
  revealjs:
    chalkboard: true
---

Here are what the notes canvas and chalkboard look like when activated:

To toggle the notes canvas on and off use the button or the C key.

To toggle the chalkboard on and off use the button or the B key.

Here are all of the keyboard shortcuts associated with the notes canvas and chalkboard:

Action Key
Toggle notes canvas C
Toggle chalkboard B
Reset all drawings BACKSPACE
Clear drawings on slide DEL
Cycle colors forward X
Cycle colors backward Y
Download drawings D

The following mouse and touch gestures can be used for interacting with drawings:

  • Click on the buttons at the bottom left to toggle the notes canvas or chalkboard

  • Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)

  • Click on the up/down arrows on the left to the switch among multiple chalkboard (the up/down arrows are only available for the chalkboard)

  • Click the left mouse button and drag to write on notes canvas or chalkboard

  • Click the right mouse button and drag to wipe away previous drawings

  • Touch and move to write on notes canvas or chalkboard

  • Touch and hold for half a second, then move to wipe away previous drawings

Restoring Drawings

The D key downloads any active drawings into a JSON file. You can then restore these drawings when showing your presentation using the src option. For example:

---
title: "Presentation"
format:
  revealjs:
    chalkboard:
      src: drawings.json
---

Chalkboard Options

The following options are available to customize the behavior and appearance of the chalkboard:

Option Description
theme Can be set to either chalkboard (default) or whiteboard.
boardmarker-width The drawing width of the boardmarker; larger values draw thicker line. Defaults to 3.
chalk-width The drawing width of the chalk; larger values draw thicker lines. Defaults to 7.
chalk-effect A float in the range [0.0, 1.0], the intensity of the chalk effect on the chalk board. Full effect (default) 1.0, no effect 0.0.
src Optional file name for pre-recorded drawings (download drawings using the D key).
read-only Configuration option to prevent changes to existing drawings. If set to true no changes can be made, if set to false false changes can be made,
buttons Add chalkboard buttons at the bottom of the slide (defaults to true)
transition Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.

For example, the following configuration specifies that we want to use the whiteboard theme with a (thicker) boardmarker width, and that we want to hide the chalkboard buttons at the bottom of each slide:

---
title: "Presentation"
format:
  revealjs:
    chalkboard:
      theme: whiteboard
      boardmarker-width: 5
      buttons: false
---

If you disable the chalkboard buttons globally you can selectively re-enable them for indvidual slides with the chalkboard-buttons attribute. For example:

## Slide Title {chalkboard-buttons="true"}

You can also use chalkboard-buttons="false" to turn off the buttons for individual slides.

Multiplex

Quarto includes a built-in version of the Reveal Multiplex plugin. The multiplex plugin allows your audience to follow the slides of the presentation you are controlling on their own phone, tablet or laptop. When you change slides in your master presentations everyone will follow and see the same content on their own device.

Creating a Reveal presentation that supports multiplex is straightforward. Just specify the multiplex: true option as follows:

---
title: "Presentation"
format:
  revealjs:
    multiplex: true
    self-contained: true
---

Note that we also specify the self-contained option: this isn’t required but will make it somewhat easier to publish your presentation (since it will be a single standalone HTML file).

Rendering the presentation will result in two HTML files being created by Quarto:

File Description
presentation.html This is the file you should publish online and that your audience should view.
presentation-speaker.html This is the file that you should present from . This file can remain on your computer and does not need to be published elsewhere.

The two versions of the presentation will be synchronized such that when the speaker version switches slides the viewers also all switch to the same slide.

Multiplex Server

Behind the scenes there is a multiplex server that is synchronizing slide events between the viewer and speaker versions of the presentation. Note that the this server does not actually see any of the slide content, it is only used to synchronize events.

By default, a server created and hosted by the Revealjs team is used for this: https://reveal-multiplex.glitch.me/. This server is used by default when you specify multiplex: true.

Running your own server

If you want to run your own version of this server its source code is here: https://github.com/reveal/multiplex/blob/master/index.js.

You can then configure multiplex to use an alternate server as follows:

---
title: "Presentation"
format:
  revealjs:
    multiplex: 
      url: 'https://myserver.example.com/.
---

Note that Quarto calls the multiplex server behind the scenes to provision a id and secret for your presentation. If you want to provision your own id and secret you can do so at https://reveal-multiplex.glitch.me/ (or using your custom hosted server URL) and provide them explicitly in YAML:

---
title: "Presentation"
format:
  revealjs:
    multiplex: 
      id: '1ea875674b17ca76'
      secret: '13652805320794272084'
---

Note that the secret value will be included in only the speaker version of the presentation.

Learning More

See these articles lo learn more about using Reveal:

  • Reveal Basics covers the basic mechanics of creating presentations.
  • Advanced Reveal delves into transitions, animations, advanced layout and positioning, and other options available for customizing presentations.
  • Reveal Themes talks about using and customizing existing themes as well as creating brand new themes.