Tinkering with reveal.js: a slick, JavaScript-based, FOSS presentation framework

Screenshot of the content available about decoded.legal/presentations: a slide with black text on a background of a mostly-transparent image of people in a large conference venue

I have wanted to play with reveal.js for a while, as a way of improving the look of my presentation slides, and I've finally got round to doing so.

I am impressed. Very impressed.

Impress (LibreOffice), pandoc, and beamer

Since switching to Linux full-time, and really disliking Impress, the presentation tool in the LibreOffice suite, I have been writing presentations in markdown, and then using pandoc to convert them into beamer, and then convert them to PDF.

I love the simplicity of writing content in markdown, as I can focus on what I am including in the slides, rather than on their formatting, which is handled by a template.

But - for me at least - getting the template correct in pandoc/beamer was harder work than I wanted. I had to accept a number of compromises, and while my slides were still adequate they were not what I wanted.

Enter reveal.js.

reveal.js

reveal.js uses a similar approach: write your slide content, and then use templates to control slide rendering.

Fortunately, reveal.js uses html, css, and JavaScript, and I can adjust those to do what I want far more easily than I can with pandoc. It took about 10 minutes from downloading the basic files to have a theme looking how I wanted it.

It's an open source project, and doesn't require you to host your slides on someone else's system. In fact, I have stuck with the Basic setup and, while the Advanced setup (running a local webserver) is "recommended", I haven't found anything I'm missing out on yet. It says that the Advanced setup is required for external markdown content; I just write the content in markdown (in Apostrophe), and then paste it into the reveal.js index file, and that works fine.

I spent an evening reading the docs - time well spent - and experimenting with different features, and was quickly producing presentations which look more than good enough for my needs with very little effort.

I have bought the video course, as a means of supporting the developer, and I look forward to watching that when I get a few spare hours. (It's worth learning how to use tools well, IMHO, especially since I make my living from them.)

Videos, images, fancy backgrounds, nice transitions - they are all supported, although, clearly, I will be using them sparingly. I like slides to be a backdrop to what I am saying, not the main feature.

It also has a feature I really missed from my PDF-based approach: speaker view! I like to see what the next slide/build is going to be, as that helps me with my presentation, and being able to see a clock, to keep track of time, is also welcome.

(Do I sound like a bit of a fanboy? Probably, and deservedly so...)

Because it is html/css/js based, it means that I can upload (public) presentations to my webserver, and people can interact with them, letting them click through the slides as if they were me giving the presentation. No more reliance on static PDF downloads (although those can be generated simply too), although it does require JavaScript to be enabled. I've put an example presentation online so you can see what I mean. Nifty, right?! (And if you access the site via Tor Browser, you'll get redirected automatically to the .onion version of the site, and the slides will be served up within Tor.)

On the downside, some of the features I want to use do require me to switch from markdown to html - for example, using fragments, to "build" slides with multiple stages, which is reasonably common - but I can cope with that, and I will use espanso to automate it.

Firefox v Brave

My go-to browser is Firefox. I have used it for many, many years, and I like it.

Sadly, it does not render reveal.js slides well. Transitions have a noticeable lag, and the overall experience is not good.

I've been using Brave for a few months now, for running Microsoft Teams in-browser. On a whim, I opened one of my reveal.js presentations in Brave, and boy was it good. Absolutely no lag at all, and everything was so much snappier.

I do wonder for how much longer I will use Firefox, to be honest; I can see a move to Brave on the cards.

One thing I still need to work on is how to run a reveal.js presentation in Brave, when I am sharing the Brave tab on a Teams (and perhaps other?) conference call. Normally, I just load the slides in Brave, hit "F" to go full screen, and off I go. However, when I am sharing the tab via Teams, there is a warning message at the top of the screen, reminding me that I am sharing the tab, and this prevents me from going into full screen mode. I suspect there is a solution out there for this, but I don't yet know what that is.


Author: neil

I'm Neil. By day, I run a law firm, decoded.legal, giving advice on Internet, telecoms, and tech law. This is my personal blog, so will be mostly about tech stuff, cycling, and other hobbies.

You can find me (and follow me) on Mastodon and Twitter.