Reveal.js lets you create spectacular, interactive slide shows using  HTML. It’s free. It sports a massive built-in feature set. It does things that PowerPoint, Keynote, and Impress can’t. You only need to know a few things to create a presentation, but as with most open source projects like this, you are simply expected to know how to look through the source and to do some experiments on your own.

Here’s a screenshot from a typical Reveal.js presentation using the default theme:

reveal.js example default theme

Here’s some of what Reveal.js does for you

Reveal.js has a giant feature set out of the box. Click here to run the Reveal.js tutorial file and try the following:

  • Use the space keys or arrow keys to move through the presentation
  • iOS-style swipes also work on any touch-enabled screen, Apple-branded or not
  • Reveal.js presentations are responsive: they look as good on a mobile phone as on a 30″ screen with no code changes needed
  • Mouse users get a complete set of controls placed unobtrusively at the lower right
  • Press the Escape key to get a thumbnail view
  • Press the period (.) key to darken the screen

This doesn’t feel like some kind of public domain freebie. It feels like a fully developed application.

Where to go from here

This article shows you how to create the presentation above, but in a modular fashion so that you can return to it again and again as you create other Reveal.js presentations.

If you just want the basics summarized in easy, step-by-step form, you’re in the right place. I spent a fair amount of time poring through the source to understand how to get a Reveal.js presentation up and running. Then I cut out everything that wasn’t necessary, which turned out to be a lot. Reveal.js chooses all the right defaults and requires very little code to get very big effects.

Reveal.js is a particularly well-designed system. Internal documentation is chatty and illuminating. Reading through its source code is an education. The main demo file used as an example employs many advanced Reveal.js tricks, making it a little hard to understand what a typical presentation actually needs. I have found the CSS to work well on all test systems, but it’s bloat-free. Also worth a visit.

I want this article to be as useful as possible. If you find a bug, just click

Intended Audience

Some folks aren’t used to reading source code. They  just want to RTFM and get the job done. This tutorial is for intermediate HTML programmers who fit that description. With this article you don’t need to know any Javascript to  get a glorious Reveal.js presentation written quickly, reliably, and clearly. If you can download and extract a zip file, copy directories, and edit an HTML file, you can create a Reveal.js presentation in just a few minutes using this tutorial. Obviously it doesn’t go into Reveal’s advanced features, but if all you ever use is what you learn here your customers will still be thrilled.

The steps are quite simple:

  1. Download the Reveal.js-master.zip file from Github and extract its contents to a temporary location
  2. Copy a few directories to the location of your HTML file
  3. Create a single HTML file containing the slide show.

Obtain the Reveal.js-master.zip file and extract to your working directory

gitub-download-as-zip

  • The zipped archive file downloads as reveal.js-master.zip.
  • Use your operating system’s shell to extract the file to a working directory (AKA folder). Usually that means right click (or Command-Click, if using an Macintosh/iOS keyboard), then choose an option that reads something like Extract or Compress.
  • A directory called reveal.js master is created containing dozens of files. You don’t need them all to create a presentation. The other files are required by developers to change the source code for Reveal.js, which is definitely not necessary for normal usage.

Copy the files you need to your working directory

  • Copy the directories css, js, plugin, and lib into the directory you’ll use to write the HTML file that makes up the presentation.

It can be a local directory on your computer or the WWW directory on your production machine. We’ll call it the production directory, to distinguish it from the working directory you used to extract the full Reveal.js-master.zip file.

Create the slide show as a single HTML file

Your Reveal.js slide show is a normal HTML file. Here’s the complete code for a 3-slide presentation with minimal comments so you can see how little work you actually need to do. The rest of this article shows how you would build this presentation in bite-size pieces, explaining what the source code means along the way.

  • Save it as index.html in your working directory with your Reveal.js directories.
  • Open the page in your browser and you’ll see it in action:

 

Try it here

Here’s the example Reveal.js code in living color. A step-by-step explanation follows.

Creating a Reveal.js Presentation Step by Step

Here’s a look at the source code above, with step by step explanations of what to add to your HTML file and why. You can use this as a template anytime you make a Reveal.js presentation. It all starts with a minimal HTML file:

1. Add references to the Reveal.js base and theme style sheets to the <head> section

The <head> section must include references to two style sheets: reveal.min.css, and a theme, such as default.css.

The file reveal.min.css is a “minimized” file that gives Reveal its base styles.

About minimized files

“Minimized” means that  every part of the file a human needs is removed, leaving only what the browser needs. For example, reveal.min.css is all on a single line of text. Minimizing files of any type speeds up page loads because they’re smaller. By convention, a minimized file is named like the full style sheet (in this case, reveal.css) but with “min” before the “css”, thus reveal.min.css.

The file default.css represents the default Reveal.js theme, which provides a skin for the overall appearance of your presentation. If you replaced “default.css” with  “sky.css” it would load the Sky theme, which looks like this: reveal.js example sky theme

You can find all the themes in the directory css/theme.

Try all the things!

You can change themes the fly. Here’s demo that changes Reveal.js themes dynamically: Demo

2. Add support for Internet Explorer 9 to the <head> section

The next thing to add to the <head> section is optional but strongly recommended: support for the errant Internet Explorer 9, which at the time of writing is one of the most popular browsers. Eventually this will be unnecessary, but include it if you plan for the general public to view your presentation.

3. <body>: Wrap the entire slide show in a <div> using “reveal” class

All CSS frameworks use some kind of container scheme which requires all markup used by that framework to be placed inside a <div> of the specified class that wraps the outermost reaches of the <body> section. In this case, of course, its name is “reveal”:

 

4. <body>: Wrap all slides in a single <div> using the “slides” class

Each slide presentation is must live within a lt;div> of the class “slides”, which is in turn wrapped by the <div> of class “reveal”:

5. <body>: Each slide is a <section> element

Each slide is simply an HTML5 <section> element reconfigured using CSS. All slides must be further nested in the <div> of class “slides” but the <section> elements themselves require no special class:

 

6. <body>: Load Javascript references at bottom

At the bottom of the <body> section include references to the Reveal.js Javascript files. Putting them at the bottom reduces the perceived load time.

  • The Javascript file reveal.min.js is of course what gives Reveal.js most of its behaviors. It is minimized for speed, but you can learn a lot from the original, un-minimized version, simply called reveal.js.
  • Head JS project. It provides a number of utility classes. It’s stable now but from time to time it wouldn’t hurt to get an updated version.

7. <body>: Call to Reveal.initialize()

The last thing you need is at the very bottom of the  <body> section. It’s a call to the Javascript function Reveal.initialize(). The demo shows a billion options but you don’t need any of them for your first presentation.

Later you can take a look at Reveal.initialize() in Github to see how you can use it to customize your presentation. For example, here’s how you’d get Reveal.js presentations to run without the controls if you’re speaking publicly and just want to press Space to move through the presentation in a linear fashion:

Linking to other slides in a Reveal.js presentation

Part of Reveal.js’s CSS magic is that it renders each  <section> as if it were a separate HTML page, when in fact that are all <section> are part of the same HTML file’s markup.

There are several ways to address a slide separately and navigate to it, among them using the slide’s implicit order in the presentation and assigning the slide and id=”slide name”. Reveal.js uses familiar HTML bookmark syntax for this purpose.

Let’s review the sample code where slides are defined.

Reveal.js automatically assigns each slide a number starting with 1, in the order they are defined in markup. So the “About” my Product slide is #1, the “Show a live link” slide is #2, and “Slide 3” is, uh, slide #3.

Linking to slides using implicit numbering

When you visit “Slide 3” and click its link, it currently uses the  ID assigned to it for navigation purposes to move to slide #2 when the link is clicked. Let’s rewrite that link to use the slide number instead.

Obviously the problem with this straightforward technique is that you could insert a section later and forget to update the number.  Assign an ID to the <section> eliminates this problem and makes your slides futureproof.

Linking to slides using <section> IDs

Sections have an optional ID you create using a quoted string, as shown in Slide 2, which has been assigned the ID “show-a-link”:

To link to it from another slide, just use HTML bookmark syntax:

Now go create your own Reveal.js presentation!

We’ve hit the 20% of the Reveal.js features that make up 80% of a presentation. Maybe more: this is enough to create a show that no one will criticize because it’s low on bling. Reveal.js has lots of other tricks up its sleeves, such as nested slides,  fragments that build up the slide incrementally, slide speaker notes, broadcasting speaker notes to viewers without showing them onscreen, and creating PDFs from a Chrome browser.

To me very few Javascript libraries give you so much bang for your coding buck. You only need a few lines of code to deliver a lively, interactive slide show to anyone with a browser or smart phone. The trick is knowing what those few lines are, and that’s what this article showed you.

Even if you’re not a go-to-the-source kind of person, this article was designed to make that process easier for you. Visit the Reveal.js demo file on Github at (https://github.com/hakimel/reveal.js/blob/master/index.html) and it should be much easier to understand at this point. Even if you’re unsure, just try stuff. It’s HTML. No one will get hurt.