PRESENTATION

Use this extension to build slideshow presentations from within Roam!

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 the extension doesn't work after using the copy extension button above, try installing manually using the instructions below.

First create a block with the text {{[[roam/js]]}} on any page in your Roam DB. Then, create a single child of this block type three back ticks. A code block should appear. Copy this code and paste it into the child code block in your graph:

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

Finally, click "Yes, I Know What I'm Doing".


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

If a slide has {title} in the title or has no children, it will render as a title slide. Otherwise, the slide will render as a content 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.
  • Iframe Right - Split the slide vertically with the bullets on the left half and the iframe on the right half. The first bullet will be used for the iframe.
  • Iframe Left - Split the slide vertically with the bullets on the right half and the iframe on the left half. The first bullet will be used for the iframe.
  • Iframe Center - The iframe on the first bullet will take up the contents of the slide. Note that any other bullets will be hidden.
  • Media Right - Split the slide vertically with the bullets on the left half and the media on the right half. The first bullet will be used for the media. Currently only supports roam/render media.
  • Media Left - Split the slide vertically with the bullets on the right half and the media on the right half. The first bullet will be used for the media. Currently only supports roam/render media.
  • Media Center - The media on the first bullet will take up the contents of the slide. Note that any other bullets will be hidden. Currently only supports roam/render media.

Transitions

You could configure individual slides to have custom transitions. To give a slide a transition, add the {transition:(type)} attribute next to the slide title like this:

  • Slide Title {transition:slide}

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

  • {{presentation:{transition:slide}}}

The following transition types are supported:

  • none - Switch backgrounds instantly
  • fade - Cross fade
  • slide - Slide between backgrounds
  • convex - Slide at a convex angle
  • concave - Slide at a concave angle
  • zoom - Scale the incoming slide up so it grows in from the center of the screen

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}

Auto Animate

You could configure individual slides to have automatically animate between them. The extension will make its best guess on matching elements to be animated across slides. To add animation to the slide, add the {animate} attribute next to the slide title like this:

  • Slide Title {animate}

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

  • {{presentation:{animate}}}

Hide

You could hide certain slides from your presentation by adding {hide} to the slide title like this:

  • Slide Title {hide}

You could also hide any given bullet within the slide tree by placing {hide} on the bullet itself

Resources

Check out some of these presentations put together and made public by Ivo Velitchkov!

Demo


Contributors

This extension is brought to you by RoamJS! If you are facing any issues reach out to support@roamjs.com or click on the chat button on the bottom right.

If you get value from using this extension, consider sponsoring RoamJS by clicking on the button below!

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

Jerry Yu
Jerry Yu
💵
Adolfo Ramírez Corona
Adolfo Ramírez Corona
📓

Other Extensions