In this post we look at reveal.js, a presentation framework from code! We discuss the benefits like importing themes and using i-frames inside the presentation.

For a complete overview of all the features of reveal take a look at the README.md on github here.

Did you ever make decisions based on an outdated version of a presentation? Or used an old theme in a client presentation? Ever took too long while switching from presentation to demo? All this is in the past with reveal.js! Here is how you get it.

Getting Started

The framework is just code so we can clone the repository from here. Then we can start the presentation with the following.

npm install
npm start

Better than listing all the features here you can just run the demo and see for yourself! Delete the index.html and rename demo.html to index.html. You can now run the demo presentation and make changes to the code and play around.

revealjs dark theme presentation 1024x504 - REVEAL.JS

Making a presentation just became familiar to developers alike. With this switch to presentations as code we get version control for free. Never again an outdated version of the presentation.

Demo inside your presentation

Everyone has seen presentations here the demo is held in another screen. The switching back and forth is killing the flow of the story. Here we can use i-frames to port to your application inside the presentation.

<section
    data-background-iframe="https://www.google.com"
    data-background-interactive>
</section>

When adding this slide to your presentation we will get the following result. Browsers don’t like this porting of websites do to X-Frame headers.

crashing iframe in revealjs 1024x439 - REVEAL.JS

But we can use a Chrome extension: ‘Ignore X-Frame headers’. When activated we can link through to your demo application and use it as if you opened it separately.

iframe in revealjs 1024x390 - REVEAL.JS

Note! Look at the url ‘localhost:8000/#/’. This is a website via our presentation and not via the web directly.

Themes

The styling of the presentation is just css. So tailoring a presentation to the style of a client for instance, is just importing the right css and you’re up to date. No more out of date themes or styling.

In the <head> of your index.html just add the following:

<link rel="stylesheet" href="../../css/theme/client.css">

Now copy an existing theme and css away with you client’s styles.

There are also a lot of predefined styles that you can choose from. Just change the code above in one of the predefined <theme>.css. Let’s see what happens if we choose the solarized theme.

revealjs default presentation 1024x515 - REVEAL.JS

Hopefully you can now blow your stakeholders away with slick presentations using reveal.js. Happy revealing!