Roundup of HTML-Based Slide Deck Toolkits

I recently looked into some options for building a slideshow presentation for display in the browser. While there are options like SlideShare and Speaker Deck that let you upload your slides in PowerPoint or PDF format to convert them to online slides, there are also a ton of options for libraries, toolkits, and APIs that let you create your own non-Flash, full screen, responsive presentations.

Usually these presentations are HTML5-based, use JavaScript and/or jQuery, and often require a modern browser. But some of them are simpler and offer deeper browser support. Here’s a list of all of the ones I’ve been able to find, with a brief description of each.

I haven’t used any of these, and don’t know much about them at all, but I thought it would list them here (in no particular order) for future reference for anyone looking into this sort of thing.

Fathom.js

Fathom.js

Fathom.js | Fathom.js on GitHub

“Write your slideshow in HTML, style it with CSS and control it with some jQuery-powered JavaScript. When you’re done, Fathom.js even lets you sync the video of your presentation quickly and easily. Fathom.js comes with mouse, keyboard and scroll bar navigation built in and provides a simple API for creating your own custom interfaces.”

CSS-based Slideshow System (CSSS)

CSSS

CSS-based Slideshow System | CSSS on GitHub

“A simple framework for building presentations with modern web standards.”

impress.js

impress.js

impress.js | impress.js on GitHub

“Don’t you think that presentations given in modern browsers shouldn’t copy the limits of ‘classic’ slide decks? Would you like to impress your audience with stunning visualization of your talk? It’s a presentation tool inspired by the idea behind prezi.com and based on the power of CSS3 transforms and transitions in modern browsers.”

5lide

5lide

5lide

I believe this is the same tool used to create the HTML5rocks slideshow.

reveal.js

reveal.js

reveal.js | reveal.js on GitHub

“reveal.js is an easy to use, HTML based, presentation tool. You’ll need a modern browser with support for CSS 3D transforms to see it in its full glory.”

3D-Cube-Slideshow

3D-Cube-Slideshow

3D-Cube-Slideshow on GitHub

“A presentation deck utilizing 3D CSS transforms and transitions to navigate between slides. Content is a presentation on JavaScript code quality.”

Slidedown

Slidedown

Slidedown | Slidedown on GitHub

“Generate syntax-highlighted slides from Markdown.”

DZSlides

DZSlides

DZSlides | DZSlides on GitHub

“DZSlides is a one-page-template to build your presentation in HTML5 and CSS3.”

deck.js

deck.js

deck.js | deck.js on GitHub

“A JavaScript library for building modern HTML presentations. deck.js is flexible enough to let advanced CSS and JavaScript authors craft highly customized decks, but also provides templates and themes for the HTML novice to build a standard slideshow.”

html5slides

html5slides

html5slides on Google Code | html5slides Demo

“A Google HTML5 slide template.”

Slippy

Slippy

Slippy | Slippy on GitHub

HTML slides with syntax highlighting, incremental slides, and more.

HTML Slidy

HTML Slidy

HTML Slidy

“Slide Shows in HTML and XHTML.”

Scrolldeck

Scrolldeck

Scrolldeck | Scrolldeck on GitHub

“A jQuery plugin for making scrolling presentation decks” with animations, full screen images, and parallaxing.

S5

S5

S5 | S5 Article

This is an older slideshow tool by Eric Meyer. “S5 is a slide show format based entirely on XHTML, CSS, and JavaScript. With one file, you can run a complete slide show and have a printer-friendly version as well.”

Shower

Shower

Shower | Shower on GitHub

“–°ross-browser HTML presentation template.”

Shining

Shining

Shining | Shining on GitHub

“Awesome presentations in HTML + JS + CSS.”

Luminescence

Luminescence

Luminescence | Luminescence on Google Code

“Awesome presentations in HTML + JS + CSS.”

Squeenote

Squeenote

Squeenote | Squeenote on GitHub

“A way for nerds to present to other nerds.”

Landslide

Landslide

Landslide | Landslide on GitHub

This one looks similar to “5lide”, mentioned above. “Generates a slideshow using the slides that power the html5-slides presentation.”

POW

POW

POW | POW on GitHub

“An experimental HTML5 presentation tool. Create simple, powerful presentations using just HTML and JavaScript.”

Slides

POW

Slides | Slides on GitHub

“I got fed up with using Keynote and Powerpoint to create and give presentations. I’m a web developer for pete’s sake, can’t I do it in HTML?”

jmpress.js

jmpress.js

jmpress.js | jmpress.js on GitHub

Not exactly just for presentations, but very cool. “A jQuery plugin to build a website on the infinite canvas.”

Any Others?

I’d like this list to be exhaustive. If you know of any other tools for creating HTML-based presentations, please comment and I’ll add them. And if anyone owns one of these and wants to provide a quick summary of features, I’ll be happy to add your summary to the description.

29 Responses

  1. WOW…reading anymore!!!
    thanks for resource, it’s a rock \m/

  2. I am currently using the DZslides at the moment on one of my website.

  3. Mike Bostock’s stack is pretty sweet.

  4. marco:

    Is there anything out there that support formulas in latex/mathml?

  5. Adam:

    Dumb question.

    Do any of these work with your standard remote? I seem to recall trying it some time ago with my apple remote and not being thrilled.

    Also these presenter interfaces, are they capable of “really” working so you have 1 screen the the presenter notes and one that gets projected?

    Ok that’s two questions.

    • No idea. You’d have to test them out. I collected the resources because I’m considering my options for presentations I might do in the future.

      But I haven’t tried them out to be able to know their full capabilities.

    • venkman:

      Some of them do support speaker notes… and some of those do it by using the console. e.g. open the Shower demo, press F12 (or Ctrl+Shift+K or whatever opens a console in your browser). You can detach the console window and have that one in your “local screen” while the “browser screen” gets projected. This is quite unobtrusive, the disadvantage is the console’s font size.

      Also Lea Verou’s CSSS let’s you open a “projector window” (Shift+P or Ctrl+P) and show speaker notes only in the presenter window. It keeps both windows synchronized, naturally. I think it’s not the only one that does this.

  6. This is an incredible roundup.

    What I’m searching for is a way to take PowerPoint (PPT) files and turn it into something like one of these presenters. I need it as an API/SDK to do it repeatedly.

    Did any of these address this?

    • I have never heard of one of these web-based ones that does this. But maybe I’m wrong…?

      The only one that does something like that I think is Speaker Deck, which lets you upload a PDF. If you can convert your PPT file to a PDF, then you can use Speaker Deck to do the rest, I suppose…?

    • Danny:

      I believe you can do that with Google Docs. Import your ppt file, and then there is a “share” button in the upper right. You can then embed your doc. Downside is that it must be hosted on Google’s servers.

  7. Here’s one that uses Deck.js:

    https://github.com/dseif/slide-drive

    According to the description: “The author needs nothing more than a basic understanding of HTML and CSS to make a fully featured slideshow.”

  8. I wrote slide-em-up, a tool to convert Markdown to HTML slides (with some of the themes listed here): http://blog.menfin.info/slide-em-up/

  9. Interestingly, there’s actually a Wikipedia page on HTML-based slide shows:

    http://en.wikipedia.org/wiki/Web-based_slideshow

    Not sure I agree that this is noteworthy enough to have its own page, but the link comes thanks to this article on conference speaking by Lea Verou.

  10. This is pretty cool, an app to help create presentations using Reveal.js:

    http://www.rvl.io/

  11. Very cool:

    http://presentz.org/

    Not sure how well it works, but it’s supposed to be able to synch slides with video.

  12. Gotta add this one to the list, currently still in Beta:

    http://presentate.com/

  13. Interesting roundup. I have published another alternatives for HTML5 slideshow here: http://bitly.com/html5slideshow

  14. Here’s one made with pure CSS:

    http://bytasv.github.com/scriptless-slides/

    Very cool, but I doubt I’d ever use it.

  15. rvl.io now redirects to:

    http://slid.es/

    Which is new. More info here:

    http://blog.slid.es/

  16. Randall:

    Thanks a TON! Just what I was hoping for, and then some.

  17. Hanka:

    Nice collection! But what about Flowtime.js (http://flowtime-js.marcolago.com/) from Marco Lago and SlideCaptain (http://www.slidecaptain.com). Slide Captain is an online HTML5 presentation tool, that helps you design, publish and share high quality online (and offline) presentations. It supports MathJax, codeintegration and a lot of more stuff.

  18. Hanka:

    Hi,

    just noticed, that you already mentioned flowtime.js this year. Sorry. Slidecaptain (http://www.slidecaptain.com) based on Flowtime.js.

  19. EWC Presenter is another interesting tool. It is more advanced and has lot of features.

  20. I will you use it for my presentation project, thanks!

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field. If you use keywords, your comment will be deleted, or your name will be replaced with the alias from your email address. No foul language, please. Thank you for cooperating.

Instructions for code snippets: Wrap inline code in <code> tags; wrap blocks of code in <pre> and <code> tags. When you want your HTML to display on the page in a code snippet inside of <code> tags, make sure you use &lt; and &gt; instead of < and >, otherwise your code will be eaten by pink unicorns.