Creating a simple presentation with reveal.js

Mon 04 November 2013

I have had the challenge of presentations and versioncontrol for quite some time now. I have tried several options and here is a quick walkthrough on how you can get started with reveal.js.

What is reveal.js?

Reveal.js is a javascript framework that lets you write your presentation with markdown syntax. Markdown is a text -> html conversion tool that allows you to enter text which is then converted into structured (x) html for viewing.

You can read everything you need to know about Markdown on this page:

How to install reveal.js?

Reveal.js is just a javascript framework, so installation is quite simple.

  • Download reveal.js files to a folder on your computer.

You can find the latest version at the following link:

Alternatively you can download the directly from git:

  • Consider the index.html as a start for the development of your presentation.

You can find code samples in the index.html file.

Basic syntax

  • Every slide is a section
  • You can use normal html code, <h3>, <p>, <ul> and so on.
  • Images are created with <img src="adress_to_image">
  • Links are created with <a href="link_adress">

The easiest way to see what all the possibilites is to look in the index.html file that you got during installation. This contains all the elements you need to know to get well under way.

Pros with reveal.js

? Why should I use reveal.js?

? Is not it much simpler to use powerpoint or keynote?

  • Using reveal.js or similar, you have the presentation in a plain text format, open and readable without having to use expensive, licensed software.
  • Using reveal.js or similar, you have the opportunity to put your project in versioncontrol since it is only plain text. This makes it easy to collaborate on a presentation.
  • Using reveal.js or similar, you only need a browser to view your presentation. Great for presenting on conferences where you cant install software on the presentation equipment.
  • If you check-in your presentation on github you will be able to reach it as long as you have connection to the Internet.
  • It is easy to share your presentation with an audience that wants to have a copy afterwards. You do not need to convert to pdf, pptx or send files by email.
  • You can create a QR code at the end of your presentation with a link to the presentation. Atendees can take a picture of this, and then they can go directly to your presentation.

See it in action

The best way to get the idea is to see it in action.

The developer of reveal.js have a demo page where you can see some of the possibilities:

The source code of the demo is the index.html file that you got during installation:

This was a short introduction showing an alternative way to create presentations. I imagine that a company may create one or more reveal.js templates that are ready to checkout in an internal version control system. These will typically be set up with your company logo, colors, font types, etc.

Good luck ... :)