# Reveal.js --- in-browser JS Presentations framework and my CDN-loading template for it

**Category:** [Clinicians Who Code](https://openhealthhub.org/c/clinicians-who-code/48)
**Created:** 2026-03-02 10:11 UTC
**Views:** 5
**Replies:** 0
**URL:** https://openhealthhub.org/t/reveal-js-in-browser-js-presentations-framework-and-my-cdn-loading-template-for-it/2936

---

## Post #1 by @pacharanero

Not directly a coding tool, and not clinical, but I thought might be of interest to some CwC because at some point we all end up doing presentations of our ideas, and this tool can really help.

## Reveal.js
Reveal.js is a fairly light Javascript-based 'framework' that turns an `index.html` into a presentation that you can view in a browser. I have been using it for at least 10 years. However it can be a little tricky to get started, so I have made a GitHub template repository which you can simply copy.

### Marcus' Reveal.js CDN template repository
https://github.com/pacharanero/reveal-js-cdn-template

### Demo
https://pacharanero.github.io/reveal-js-cdn-template/

### Great things about Reveal.js
* 'Presentations as code' - manage source in Git and publish via GitHub
* Put your presentations on the web for free, forever, using GitHub Pages
* In-browser presentation, 
* Vertical slides! - as well as the more usual *horizontal* slides, you can scroll up and down too, which helps with 'sectioning out' your idea/story/pitch.
* AV people at conferences are slightly freaked out when you say 'no I don't need PowerPoint', I am using a browser

### Annoying things about Reveal.js
* Your own changes are mainly in index.html, but if following the default install instructions you end up with all the Reveal.js code in a repo as well (see solutions below) - fixed by using the [Submodule](https://github.com/pacharanero/revealjs-submodule-template) or [CDN](https://github.com/pacharanero/reveal-js-cdn-template) versions I have created.

Reveal.js doesn't clearly tell you in its [own installation documentation](https://revealjs.com/installation/) that if you use their default install method - copy the whole Reveal.js repo into your project - not only is your presentation much larger than it needs to be, but you also have a headache if you want to update the version of Reveal.js that you use, because you will have changed some of the files.

I originally solved this with a different approach - load Reveal.js [as a Git submodule](https://github.com/pacharanero/revealjs-submodule-template), which lets you update it independently - but more recently I had the idea to try loading Reveal.js from a CDN so that the only thing you need to think about is `index.html` and any assets or graphics you bring in.


### Embed it in Discourse (or any site!)
Oh, and one final killer feature? You can embed your presentation in basically any website using an `iframe`:

  <iframe
    src="https://pacharanero.github.io/reveal-js-cdn-template/"
    width="960"
    height="540"
    style="max-width: 100%;"
    allowfullscreen
  ></iframe>


[details="Embedding Code"]
```html
  <iframe
    src="Your URL Here"
    width="960"
    height="540"
    style="max-width: 100%;"
    allowfullscreen
  ></iframe>
```

For it to work in Discourse you need to allow certain iframe origins in the [settings](https://openhealthhub.org/admin/config/security?filter=allowed_iframes) 
[/details]

---


**Canonical:** https://openhealthhub.org/t/reveal-js-in-browser-js-presentations-framework-and-my-cdn-loading-template-for-it/2936
**Original content:** https://openhealthhub.org/t/reveal-js-in-browser-js-presentations-framework-and-my-cdn-loading-template-for-it/2936