5 of the Best Free HTML5 Presentation Systems

I have a lot of respect for Microsoft PowerPoint. It may be over-used and encourages people to create shocking slide shows, but it’s powerful and fun. I have just one criticism: all PowerPoint presentations look the same. It doesn’t matter how you change the colors, backgrounds, fonts or transitions — everyone can spot a PPT from a mile away.

Fortunately, we now have another option: HTML5. Or, more specifically, HTML5 templates powered by JavaScript with CSS3 2D/3D transitions and animations. The benefits include:

  • it’s quicker to add a few HTML tags than use a WYSIWYG interface
  • you can update a presentation using a basic text editor on any device
  • files can be hosted on the web; you need never lose a PPT again
  • you can easily distribute a presentation without viewing software
  • it’s not PowerPoint and your audience will be amazed by your technical prowess.

Admittedly, HTML5 presentations are not quite as powerful:

  • you require web coding skills
  • positioning, effects and transitions are more limited
  • few systems offer slide notes (it’s a little awkward to show them separately)
  • it’s more difficult to print handouts

But those are not necessarily killer drawbacks — you’re forced to concentrate on the presentation content rather than frivolous tweaks and awful animations.

Here are the best HTML5 presentation systems I’ve found. Click the headings to view a demonstration — most work best in Chrome, Safari or Firefox…

Reveal.js

This is my current favorite. Slides look great and can be positioned horizontally or vertically. It’s also easy to change the CSS to add your own effects — I managed to add a rudimentary notes facility doing just that.

Slides are defined in separate section tags and Reveal.js offers a choice of several 3D slide transitions … although they look fairly similar.

Download the reveal.js files…

Impress.js

Impress.js is, well, impressive. It’s been influenced by the commercial prezi.com; slides are arranged in a 3-dimensional space and your view rotates and pans accordingly. I won’t attempt to explain it further — just try it and you’ll understand what I mean.

Slides are defined in div elements with data attributes controlling the x, y, z locations and rotations. That’s the only drawback; it’s a little difficult to visualize and define those values. Persevere, though, and you’ll be able to create some stunning and original slide shows.

Download the Impress.js files…

Google Slides Template

As you’d expect, Google has their own HTML5 presentation template (as well as the one offered in Google Docs). It’s fairly basic when compared to Reveal.js or Impress.js; it’s restricted to right-to-left slide transitions and fade-in effects, but it still looks great.

Slides are defined in article tags and it’s easy to add extra stylesheets to override the default CSS.

Download the Google Slides Template file…

Deck.js

Deck.js was one of the first HTML5 presentation systems. It looks similar to Google’s offering — perhaps a little prettier, but without slide transition effects.

Slides are defined within semantically correct section blocks in an outer article. There’s also a documented API so it’s possible to create your own extensions.

Download the Deck.js files…

Shower

Shower is a presentation system by Vadim Makeev of Opera Software. While it’s one of the simpler systems, it’s fast and works well in all browsers. The slide thumbnail view is especially cool (press ESC).

Shower’s main drawback is it’s convoluted HTML. Slides are defined in a section within a div within another div and contain their own header and content. A little more development could make it easier to use.

Download the Shower files…

Other worthy mentions:

Have I neglected to mention your favorite HTML5 presentation system…

If you enjoyed reading this post, you’ll love Learnable; the place to learn fresh skills and techniques from the masters. Members get instant access to all of SitePoint’s ebooks and interactive online courses, like HTML5 & CSS3 For the Real World.

Comments on this article are closed. Have a question about HTML5? Why not ask it on our forums?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://jondkoon.com Jon

    There is a slide generator that allows you to write your slides in markdown called landslide

  • http://itmitica.com/en/ itmitică

    Shower looks very good. It sold me.

  • Kyle Robinson Young

    Don’t forget the feature rich jQuery alternative to impress.js… jmpress.js :)
    http://shama.github.com/jmpress.js/

  • http://github.com/miripiruni miripiruni

    Shower allows me to easily create my own theme and at the same time to update the Shower core.

  • MStalfoort

    DZSlides by Paul Rouget is also one to mention, HTML5 with CSS3

    Several times been used by Christian Heilmann (like http://icant.co.uk/talks/jquk/)

  • http://pepelsbey.net Vadim Makeev

    > Slides are defined in a section within a div within another div
    > and contain their own header and content

    This restrictions needed only for the thumbnail view of the default Ribbon theme, where thubmnails are scaled down by CSS transform, to avoid overflow problems and browsers’ bugs. But you can write your own theme (see themes folder) and use custom markup to have only one section and no header. Also it would be possible to gererate Shower from the simple markdown-like plain text files in the near future. Follow updates on the @shower_me channel in twitter :)

    • http://www.optimalworks.net/ Craig Buckler

      Thanks Vadim – that sounds great!

  • Steve

    Typo:
    For Reveal.js you have “Download the Impress.js files…”

  • tomByrer

    Thanks Craig for you list! (Craig’s list? ;) & thanks to the commenters for alternate alternatives.

    BTW, has anyone used these with smart phones & tablets with a video-out? Do they have enough juice for some of the complex & 3d animations? TIA

    • http://www.optimalworks.net/ Craig Buckler

      I suspect most would work. The animations may not be quite as slick, but it’s worth trying.

  • Drew

    Also check out Hekyll, a jekyll implementation of impress.js which makes it pretty easy to write slides in markdown and then build/customize a presentation. http://bmcmurray.github.com/hekyll/

  • http://imakewebthings.com Caleb

    I’m not sure if maybe you’ve confused deck.js with a different library, and I understand the need for articles like this to summarize for the sake of word count, but each of the first three sentences is just plain false.

    - It is the second youngest of the 5 libraries mentioned here, released to the public 7 months ago.
    - It has slide transitions for any browser that supports CSS transitions (FF, Chrome, Safari, Opera, IE10) as can be seen here: http://imakewebthings.com/deck.js/introduction/
    - By default, slides are defined by any element with a class of slide, and the container is any element with a class of deck-container.

    That said, all of the presentation systems here are great and I hope anyone readng this tries at least one of them out. Just hoping you can fix these inaccuracies.

    • http://www.optimalworks.net/ Craig Buckler

      Thanks Caleb. Perhaps it’s just that I became aware of it before the others.

  • http://MediaConnexus.com Jeff Springer

    We’ve developed presentation software utilizing Flash. It requires no Flash knowledge, no programming, and introduces several revolutionary features to presentation authoring, editing, and delivery.

    The end result is something definitely not PowerPoint – or any other slide-based presentation. We’re currently working on an HTML5 version, but sadly, HTML5 doesn’t yet provide the power and functionality we can deliver currently in Flash.

    You can see sample presentations at http://www.MediaConnexus.com.