PRESENTATION

Use this extension to build slideshow presentations from within Roam! The name of the script is presentation.

Installation

You could use the Copy Extension button below to individually install this extension. To install, just paste anywhere in your Roam graph and click "Yes, I Know What I'm Doing".

Manual Installation

If instead you prefer to manually install, first create a block with the text {{[[roam/js]]}} on any page in your Roam DB. Then, copy and paste this code block as a child of the block.

var existing = document.getElementById("presentation");
if (!existing) {
  var extension = document.createElement("script");
  extension.src = "https://roamjs.com/presentation.js";
  extension.id = "presentation";
  extension.async = true;
  extension.type = "text/javascript";
  document.getElementsByTagName("head")[0].appendChild(extension);
}

Usage

Type {{presentation}} or {{slides}} in a block. Clicking the button will overlay a presentation directly from Roam! Exit the presentation by hitting 'ESC'.

To specify what content is part of the presentation, create a child block for each slide. The text of each child will serve as the slide title. Each child block then in turn renders its children as the slide contents in a bulleted outline. For example, the Playground presentation below uses the following structure:

  • {{presentation}}
    • First Slide
    • Second Slide
      • With a Subtitle on what we're all about
    • Third Slide
      • First bullet with a point
      • Second Bullet supporting that point
        • With a nested point!
      • Third bullet sealing the deal
    • Final Slide

By default, presentations start on the first slide. If the cursor is in any of the other slide trees when the button is pressed, the presentation will start on that slide. When the presentation closes, it will return focus to the title block of whichever slide it was on.

Any blocks with images will be rendered without a bullet. Any bullets that are collapsed will be filtered out of the presentation view.

Themes

There are 11 themes supported, which could be found here. To use one, add a :{theme:[value]} to the presentation button. For example, the demo below uses the black theme:

  • {{presentation:{theme:black}}}

Note: currently Safari only supports the following three themes: black, white, and beige.

Apart from these themes, you could also use roam/css to style the presentation. Here are some classes to keep in mind:

  • reveal-viewport - The full presentation container
  • slides - The slide container
  • present - The current slide
  • slide-background - The slide background
  • navigate-left - The go left button
  • navigate-right - The go right button

Notes

To add Speaker notes, add {notes:true} to the button text. The last bullet of each child will be used as the speaker notes of the slide. To combine with theme above, the button text would look like this:

  • {{presentation:{theme:sky}{notes:true}}}

Layouts

You could configure layouts per slide. To define a layout, add a {layout:} text in the top level block with the slide title. For example, to specify the default layout, it will look like

  • Slide Title {layout:default}

The following layouts are also supported:

  • Image Right - Split the slide vertically with the bullets on the left half and the image on the right half. The first bullet will be used for the image.
  • Image Left - Split the slide vertically with the bullets on the right half and the image on the left half. The first bullet will be used for the image.
  • Image Center - The image on the first bullet will take up the contents of the slide. Note that any other bullets will be hidden.

Collapsible

You could configure individual slides to have collapsible bullets. To make a slide collapsible, add the {collapsible} attribute next to the slide title like this:

  • Slide Title {collapsible}

To apply to all of the slides in a presentation, add to it inside the presentation button:

  • {{presentation:{collapsible}}}

If you apply collapsible to the whole presentation, you could then ignore it for specific slides by adding :ignore to the braces.

  • Slide Title {collapsible:ignore}

Playground

Demo

Contributors

A special thanks to those who's contributions helped make this extension possible:

Emoji Key

Other Extensions