Reveal.js: a new way of making slideshows

To advance to the next slide, press the “>” button in the bottom right corner of the screen. Alternatively, you can use the right arrow key on a keyboard or swipe left on a touchscreen.


  • This is a template (and a demo) of a slideshow presentation using Reveal.js by Hakim El Hattab.
  • Additionally, this slideshow includes preconfigured plugins, such as MathJax used to render mathematics.
  • It is aimed at mathematicians, physicists, researchers and teachers, who would like to put the Latex ‘beamer’ package out of its misery.
  • Reveal.js presentations are HTML5 documents and thus can be published on the web without any modifications.


Reveal.js gives you complete flexibility in organising the content of your slides into paragraphs, boxes, and custom elements.

  • Bulleted and numbered lists are easy to make with plain HTML.
  • All elements can be customised with CSS
Beamer-style box
This is a typical box similar to how ‘beamer’ displays certain environments. You can use it for theorems, examples, etc.


Mathematical formulae are rendered automatically by MathJax. To typeset a display equation, simply enclose your LaTeX code in \[ ... \]. Example formula: \[ \int_{-\infty}^{\infty} e^{-\pi x^2}\,dx = 1. \]

Inline mathematics is enclosed in \( ... \). For example, \(a^2 + b^2 = c^2\).

You can embed vector graphics in SVG format directly into your presentation.

Progressive revealing of contents

Just like with any presentation software…

  • Contents can disappear…
  • …or become red.
  • But by default, they appear (fade in).
  • They can also appear only temporarily.
  • Various transitions are supported.

Syntax highlighting

Reveal.js comes with a built-in syntax highlighting plugin supporting many markup and programming languages.
You can see an example of a highlighted C code snippet below.

int _getpid(void) {return 1;}

int _kill(int PID, int signal) {return 0;}

void _exit(int status)
{	// Enter infinite loop
	while(1) {}

Annotations engine

  1. Press A to enter annotation mode.
  2. In annotation mode, left mouse key draws, right key erases.
  3. Keys Z and X cycle through the available colours.
  4. Press A again to exit annotation mode.
  5. The Delete key erases all annotations.
  6. In case you don't like using the keyboard for controlling the annotation mode, you can create custom interactive controls, for example an

Blackboard mode

  1. Blackboard mode is similar to the annotations mode, except that you enter and leave it by pressing the key B.
  2. Other controls are similar as in annotation mode.
  3. When you re-enter blackboard mode, your writing is still there. You have a separate blackboard for every slide.

Custom transitions

Various transition styles are available.
Cool stuff
Take a look at Reveal.js documentation to learn about custom transitions.
Use the demo
Alternatively, you can look at the HTML source of this demo presentation in order to see how these effects are created.

Unlimited possibilities

  • Since your Reveal.js slides are just an HTML5 document, all forms of multimedia content available on a modern webpage can be embedded into your presentation.
  • Publishing your presentation online makes it instantly available to your audience. All they need is a web browser! Mobile and touchscreen devices are supported too.

How to get started

License information

This demo presentation was created by Rafael Siejakowski and is licensed under the Creative Commons CC BY-SA 4.0 license. You are free to create derivative works based on it.


This software is provided “AS IS”, without warranty of any kind, be that express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and non-infringement. In no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use, misuse, failure to use, or other dealings in the software.