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 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)
CSS-based Slideshow System | CSSS on GitHub
“A simple framework for building presentations with modern web standards.”
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 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
“A presentation deck utilizing 3D CSS transforms and transitions to navigate between slides. Content is a presentation on JavaScript code quality.”
Slidedown
Slidedown | Slidedown on GitHub
“Generate syntax-highlighted slides from Markdown.”
DZSlides
“DZSlides is a one-page-template to build your presentation in HTML5 and CSS3.”
deck.js
“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 on Google Code | html5slides Demo
“A Google HTML5 slide template.”
Slippy
HTML slides with syntax highlighting, incremental slides, and more.
HTML Slidy
“Slide Shows in HTML and XHTML.”
Scrolldeck
Scrolldeck | Scrolldeck on GitHub
“A jQuery plugin for making scrolling presentation decks” with animations, full screen images, and parallaxing.
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
“Сross-browser HTML presentation template.”
Shining
“Awesome presentations in HTML + JS + CSS.”
Luminescence
Luminescence | Luminescence on Google Code
“Awesome presentations in HTML + JS + CSS.”
Squeenote
Squeenote | Squeenote on GitHub
“A way for nerds to present to other nerds.”
Landslide
Landslide | Landslide on GitHub
“Generates a slideshow using the slides that power the html5-slides presentation.”
POW
“An experimental HTML5 presentation tool. Create simple, powerful presentations using just HTML and JavaScript.”
Slides
“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 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.
WOW…reading anymore!!!
thanks for resource, it’s a rock \m/
I am currently using the DZslides at the moment on one of my website.
Mike Bostock’s stack is pretty sweet.
Very true. Nice find.
Is there anything out there that support formulas in latex/mathml?
It should be fairly easy to add mathjax support
revealjs does it already
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.
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.
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.
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…?
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.
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
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.”
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/
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.
This is pretty cool, an app to help create presentations using Reveal.js:
http://www.rvl.io/
Very cool:
http://presentz.org/
Not sure how well it works, but it’s supposed to be able to synch slides with video.
Gotta add this one to the list, currently still in Beta:
http://presentate.com/
Interesting roundup. I have published another alternatives for HTML5 slideshow here: http://bitly.com/html5slideshow
This one looks really cool too:
https://github.com/marcolago/flowtime.js
and here is a demo:
http://flowtime-js.marcolago.com/
Relevant:
http://dfcb.github.com/controldeck.js/
Here’s one made with pure CSS:
http://bytasv.github.com/scriptless-slides/
Very cool, but I doubt I’d ever use it.
This one looks cool:
http://markdalgleish.com/projects/bespoke.js/
rvl.io now redirects to:
http://slid.es/
Which is new. More info here:
http://blog.slid.es/
Thanks a TON! Just what I was hoping for, and then some.
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.
Hi,
just noticed, that you already mentioned flowtime.js this year. Sorry. Slidecaptain (http://www.slidecaptain.com) based on Flowtime.js.
EWC Presenter is another interesting tool. It is more advanced and has lot of features.
I will you use it for my presentation project, thanks!
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.
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.
Using these tools are really helpful but ultimately using presentations is the key tool .
Here’s another one for the list: https://remarkjs.com/#1
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.