CodeinWP CodeinWP

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.”

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

“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.

37 Responses

  1. Beben Koben says:

    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. Shawn Allen says:

    Mike Bostock’s stack is pretty sweet.

  4. marco says:

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

  5. Adam says:

    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 says:

      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.

    • Mikkle says:

      Shower has a notes plugiin, and notes are visible e.g. in “slides list mode”. So you can have two windows of the slides open, one in presentation model, the other in slides list mode to see your noes, with the presentation window being sent to the beamer.

      Any of these presentation systems that allow arrow navigation will work with any presenter that registers arrow presses, like my Targus presenter.

  6. Tony Karrer says:

    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 says:

      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.

    • Alessandro Aprile says:

      best guess is to export ppt in html and fine tune it to fit the framework requirements, or if the case convert ppt -> mtml -> markdown

  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. Bruno Michel says:

    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. Julian says:

    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 says:

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

  17. Hanka says:

    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 says:

    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. Nancy says:

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

  21. Julian Ma. says:

    It is very interesting to see how these new tools, most of them based on JS and jQuery, are grabbing attention. Well, ultimately, that’s all about presentations, engage the audience and grab their attention. Personally, I think that using these tools you can make something that looks really unique, at least compared with the presentations using ordinary or default templates like those found in Microsoft PowerPoint.

  22. Sam says:

    First, thank you for the resource list!

    I see you have written this post in 2012. However, even after 6 years, there is no robust non-Flash toolkit that can completely reproduce the animations and transition of Microsoft PowerPoint, at least for WordPress. We recently wanted to show previews of our PowerPoint templates at https://slidehelper.com using a HTML/JS solution due to the site speed issues we are encountering currently. We tested almost every WordPress plugin out there, but none of them met our needs. Many of them are functioning just like another image gallery plugin. We decided to stick with video previews and look for a custom plugin developer when our resources are ready.

  23. Javier Pena says:

    Using these tools are really helpful but ultimately using presentations is the key tool .

  24. Andrew says:

    Here’s another one for the list: https://remarkjs.com/#1

  25. Abhinav says:

    Hey, I have come across another useful website https://slideuplift.com/ for PowerPoint presentations and blogs. It has over 1000+ ppt templates for educational as well as business purposes.

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field and deep URLs are not allowed in the "Website" field. If you use keywords or deep URLs, your comment or URL will be removed. No foul language, please. Thank you for cooperating.

Markdown in use! Use `backticks` for inline code snippets and triple backticks at start and end for code blocks. You can also indent a code block four spaces. And no need to escape HTML, just type it correctly but make sure it's inside code delimeters (backticks or triple backticks).