8 ms·

reveal.js: HTML5 based Slide Presentation Tool

110 points by stevewilhelm 14y ago

bergie 14y ago
Looks fairly interesting. I wonder how it will behave if you add slides after initialization. If that was supported, I could try to build a http://createjs.org/ http://createjs.org/ based slide editor for this.
- hakim 14y ago
  Adding slides after initialization isn't a problem. I'm also working on an editor for this: http://www.youtube.com/watch?v=l3RQZ4mcr1c&feature=plcp http://www.youtube.com/watch?v=l3RQZ4mcr1c&feature=plcp
  - bergie 14y ago
    All right, then I probably shouldn't bother :-) However, maybe some of the Create.js components, like Hallo.js would make sense? http://hallojs.org/ http://hallojs.org/
    - hakim 14y ago
      Hallo.js looks cool. I like the idea of inline editing. That said, I've already spent a good amount of time fixing integration errors with my current editor so am not sure I want to restart that process with another library right now. Perhaps after release.
      - bergie 14y ago
        Well, if it is going to be open source, I may be able to help with that :-)
  - senko 14y ago
    This looks great! Is this available somewhere to play with? If it supports vertical align in addition to the features you demoed there, that's all I need for most of my presentations.
    - hakim 14y ago
      It's not online anywhere yet unfortunately. Vertical alignment is on the to-do list – will be added as an opt-in config value.
  - ionwake 14y ago
    dude I just want to say I know you, I follow your posts, and as scary as this sounds, I think you are awesome. Well done sir.
thibaut_barrere 14y ago
Link to live demo: http://lab.hakim.se/reveal-js/ http://lab.hakim.se/reveal-js/ This is one of the tools I (quickly) reviewed (together with showoff and impress.js) before preparing slides for my last presentation [1]; but in the end I went back to KeyNote + Gist (for copy-paste syntax coloring) and one ColourLover palette, because it was faster/more comfortable to use for me, allows PDF export etc. I'm curious how many coders prefer a non-coding slide tool as well? [1] https://speakerdeck.com/u/thbar/p/transforming-data-with-ruby-and-activewarehouse-etl https://speakerdeck.com/u/thbar/p/transforming-data-with-rub...
davetron5000 14y ago
I found it hard to edit the HTML slides compared to the markdown for showoff, and the font-size is overall really too small (and my attempts to tweak it break a several assumptions in the CSS/transformations). HTML is not a great way to write content. Showoff is much better for browser-based. And it does export to PDF
- hakim 14y ago
  Agree that HTML isn't ideal for writing content. Support for Markdown was added to reveal.js two days ago and I'm hoping that will make it a bit easier. A GUI editor is also underway for people that don't want to touch any code at all.
CJefferson 14y ago
While these HTML5 based slide tools are fun, I find they generally aren't even comparable to Powerpoint from Office 95 in terms of features and usability, which is unfortunate. While this might be nice for putting presentations on the internet, I consider vital features to include, at a minimum: * Display presenter notes on a second screen * Cope smoothly with differing screen resolutions * Print out PDFs of presentation Now, this system does seem to cope with the first of these, if I install node.js, but not the others. I don't want to sound like a downer, just put into perspective that at the moment I feel that HTML5 presentations have a long way to go to catch Powerpoint / Keynote. Hopefully they will some day.
- corin_ 14y ago
  It has the ability to display presenter notes on a second screen - albeit it needs a little setting up. https://github.com/hakimel/reveal.js#speaker-notes https://github.com/hakimel/reveal.js#speaker-notes (edit: Seen you had noticed this already. Point still stands, this feature does exist.) Screen resolutions, I haven't tried but does it not? He talks about it working on mobile safari, so I presume it's OK on an iPad screen at least. Printing... the logical (to me) way of doing this is to design in PowerPoint then convert to this system. That makes the creation easier, and allows you to print it out or convert to PDF.
  - CJefferson 14y ago
    No, the screen resolutions is a serious problem. Design your slides on a big desktop, and half the slide will be invisible on iPad. This is a problem with projectors, where I have given talks from 640x480 to 1024x768 and beyond. What size do I design my slides at? Why bother converting a powerpoint presentation? Is this really that much better than putting a PDF on your website?
- hakim 14y ago
  The library sizes to fit a large variety of screen resolutions, PDF export has been added as well: https://github.com/hakimel/reveal.js#pdf-export https://github.com/hakimel/reveal.js#pdf-export
KirinDave 14y ago
Ever since watching the Google I/O 2012 presentations where there are live demos in the slides, I've been trying to find a good off-the-shelf toolkit for doing these sorts of presentations. One example that really wow'd me was the Google Application Engine "Endpoints" demo, where they were interacting with the site they had just pushed in the slides. I wanted something like that where I could take the javascript based backend driven visualizations we've been doing for internal use at CrowdFlower and show those off to the world. I also want something that can work with webgl¹ for some other fun deck-related things. So I looked at a bunch of HTML presentation toolkits and was pretty irritated. Then I found reveal, and it is by far the best for hacking in. Its dependencies are minimal, its css and js is easy to understand and hack, and its markup structure is very clean. I really appreciate the project. ¹ By the way, don't try and do webgl without some toolkits. The API is messy and the error handling for shaders is incomprehensible. I'm using Three.js or scenejs, depending on requirements.
- Daviey 14y ago
  You wanted Google's solution, which is open sourced[0].. but decided on another? [0] http://io-2012-slides.googlecode.com/ http://io-2012-slides.googlecode.com/
  - KirinDave 14y ago
    Yeah I wanted something with a bit more chrome and javascript hooks.
- c3d 14y ago
  You might want to look at Tao Presentations, http://www.taodyne.com http://www.taodyne.com. Very simple to write slides, see http://www.taodyne.com/shop/en/blog/15-multilingual-presentations http://www.taodyne.com/shop/en/blog/15-multilingual-presenta.... Yet fully 3D capable, see http://www.taodyne.com/shop/en/blog/27-reconstructing-the-tedx-intro-in-real-3d http://www.taodyne.com/shop/en/blog/27-reconstructing-the-te.... Not based on Javascript, it has its own language to make it easier to write slides. But can include web pages with something like: url 0, 0, 800, 600. "http://www.google.com" (draws a 800x600 Webkit browser at the center of the screen)
asadotzler 14y ago
Until someone builds a slide editor that's as easy to use as this is pretty to view, it's mostly meaningless to most people.
- bergie 14y ago
  It appears the author of this is working on an editor: http://youtu.be/l3RQZ4mcr1c http://youtu.be/l3RQZ4mcr1c (YouTube link from a another comment in this thread)
- sandyarmstrong 14y ago
  Yes, but adding inline markdown support makes it useful to me, at least.
- drivebyacct2 14y ago
  Different strokes for different folks. After having my list styles reset, unindent and unnumber everytime I edit some of my Word documents, and having the cursor disappear in documents (where the fix is, make a new document), I now vastly prefer document creation in Latex. It also makes versioning my documents easier. Same with Powerpoint. If I could go through and make some divs with some unordered lists and have that render in any browser... YES PLEASE.
hyuuu 14y ago
there is already a javascript plugin with the same name, doing a different thing though. The other reveal is a modal dialog : http://www.zurb.com/playground/reveal-modal-plugin http://www.zurb.com/playground/reveal-modal-plugin
phillmv 14y ago
I was Director of Animated GIFs at a recent conference, and part of my responsibilities involved harassing presenters for their slides. I would like to mention that quite possibly the most important audience for your slides is the conference videographer. These people often have a hard time transferring fancy html presentation decks into slides they can easily slice in with your talk video. With that in mind, I bid thee: use Keynote. It's like $20. Or at the very least, make sure whatever framework you use exports to pdf cleanly.
- paulirish 14y ago
  Capturing the video display from the presenter seems almost easier than having a videographer manually time static slide changes along to the video afterwards. This also assumes that people use slide decks that can't be shared afterwards (in their original glory), can't iframe content, or have syntax highlighting within reach? I'm sorry but for developer speakers and audiences, Keynote is a poor choice.
  - phillmv 14y ago
    >Capturing the video display from the presenter seems almost easier than having a videographer manually time static slide changes along to the video afterwards. Yes and no. For starters, it's more expensive. You need a second camera and, at worst, potentially a second operator to worry over it. Secondly, it's more error prone. Copying the VGA feed off the video switcher will fail in hilarious ways/also require a second person whose job it is to look over it. I've thrown two conferences, and been responsible for front of the house AV for a total of three and a half. You're often understaffed or overbudget, and something often gives. Even in the best of situations you end up wanting the slides as a backup. >This also assumes that people use slide decks that can't be shared afterwards (in their original glory) Post your .ppt or .key file! >can't iframe content PLEASE do not have your talk depend on conference wifi. It's impossible to guarantee stable internet with hundreds of nerds trying to slurp down hotel internet. >I'm sorry but for developer speakers and audiences, Keynote is a poor choice. I disagree. There's absolutely nothing these frameworks give you other than the warm fuzzies over the 3d transitions and that you got to style it using css. You're displaying words and pictures on a screen, and Keynote is absolutely a killer at that task.
egonschiele 14y ago
I see a lot of comments on ease of use, so I'm going to toss my hat in the ring: mdpress (https://github.com/egonSchiele/mdpress https://github.com/egonSchiele/mdpress) makes presentations out of markdown files using impress.js. I wrote it because I needed something dead simple that I wouldn't have to think about. Example: # Hello world! --- # Welcome This is slide 2.

110 points by stevewilhelm 14y ago

Looks fairly interesting. I wonder how it will behave if you add slides after initialization. If that was supported, I could try to build a http://createjs.org/ http://createjs.org/ based slide editor for this.

hakim 14y ago
Adding slides after initialization isn't a problem. I'm also working on an editor for this: http://www.youtube.com/watch?v=l3RQZ4mcr1c&feature=plcp http://www.youtube.com/watch?v=l3RQZ4mcr1c&feature=plcp
- bergie 14y ago
  All right, then I probably shouldn't bother :-) However, maybe some of the Create.js components, like Hallo.js would make sense? http://hallojs.org/ http://hallojs.org/
  - hakim 14y ago
    Hallo.js looks cool. I like the idea of inline editing. That said, I've already spent a good amount of time fixing integration errors with my current editor so am not sure I want to restart that process with another library right now. Perhaps after release.
    - bergie 14y ago
      Well, if it is going to be open source, I may be able to help with that :-)
- senko 14y ago
  This looks great! Is this available somewhere to play with? If it supports vertical align in addition to the features you demoed there, that's all I need for most of my presentations.
  - hakim 14y ago
    It's not online anywhere yet unfortunately. Vertical alignment is on the to-do list – will be added as an opt-in config value.
- ionwake 14y ago
  dude I just want to say I know you, I follow your posts, and as scary as this sounds, I think you are awesome. Well done sir.

thibaut_barrere 14y ago

Link to live demo: http://lab.hakim.se/reveal-js/ http://lab.hakim.se/reveal-js/ This is one of the tools I (quickly) reviewed (together with showoff and impress.js) before preparing slides for my last presentation [1]; but in the end I went back to KeyNote + Gist (for copy-paste syntax coloring) and one ColourLover palette, because it was faster/more comfortable to use for me, allows PDF export etc. I'm curious how many coders prefer a non-coding slide tool as well? [1] https://speakerdeck.com/u/thbar/p/transforming-data-with-ruby-and-activewarehouse-etl https://speakerdeck.com/u/thbar/p/transforming-data-with-rub...

davetron5000 14y ago

I found it hard to edit the HTML slides compared to the markdown for showoff, and the font-size is overall really too small (and my attempts to tweak it break a several assumptions in the CSS/transformations). HTML is not a great way to write content. Showoff is much better for browser-based. And it does export to PDF

hakim 14y ago
Agree that HTML isn't ideal for writing content. Support for Markdown was added to reveal.js two days ago and I'm hoping that will make it a bit easier. A GUI editor is also underway for people that don't want to touch any code at all.

CJefferson 14y ago

While these HTML5 based slide tools are fun, I find they generally aren't even comparable to Powerpoint from Office 95 in terms of features and usability, which is unfortunate. While this might be nice for putting presentations on the internet, I consider vital features to include, at a minimum: * Display presenter notes on a second screen * Cope smoothly with differing screen resolutions * Print out PDFs of presentation Now, this system does seem to cope with the first of these, if I install node.js, but not the others. I don't want to sound like a downer, just put into perspective that at the moment I feel that HTML5 presentations have a long way to go to catch Powerpoint / Keynote. Hopefully they will some day.

corin_ 14y ago
It has the ability to display presenter notes on a second screen - albeit it needs a little setting up. https://github.com/hakimel/reveal.js#speaker-notes https://github.com/hakimel/reveal.js#speaker-notes (edit: Seen you had noticed this already. Point still stands, this feature does exist.) Screen resolutions, I haven't tried but does it not? He talks about it working on mobile safari, so I presume it's OK on an iPad screen at least. Printing... the logical (to me) way of doing this is to design in PowerPoint then convert to this system. That makes the creation easier, and allows you to print it out or convert to PDF.
- CJefferson 14y ago
  No, the screen resolutions is a serious problem. Design your slides on a big desktop, and half the slide will be invisible on iPad. This is a problem with projectors, where I have given talks from 640x480 to 1024x768 and beyond. What size do I design my slides at? Why bother converting a powerpoint presentation? Is this really that much better than putting a PDF on your website?
hakim 14y ago
The library sizes to fit a large variety of screen resolutions, PDF export has been added as well: https://github.com/hakimel/reveal.js#pdf-export https://github.com/hakimel/reveal.js#pdf-export

KirinDave 14y ago

Ever since watching the Google I/O 2012 presentations where there are live demos in the slides, I've been trying to find a good off-the-shelf toolkit for doing these sorts of presentations. One example that really wow'd me was the Google Application Engine "Endpoints" demo, where they were interacting with the site they had just pushed in the slides. I wanted something like that where I could take the javascript based backend driven visualizations we've been doing for internal use at CrowdFlower and show those off to the world. I also want something that can work with webgl¹ for some other fun deck-related things. So I looked at a bunch of HTML presentation toolkits and was pretty irritated. Then I found reveal, and it is by far the best for hacking in. Its dependencies are minimal, its css and js is easy to understand and hack, and its markup structure is very clean. I really appreciate the project. ¹ By the way, don't try and do webgl without some toolkits. The API is messy and the error handling for shaders is incomprehensible. I'm using Three.js or scenejs, depending on requirements.

Daviey 14y ago
You wanted Google's solution, which is open sourced[0].. but decided on another? [0] http://io-2012-slides.googlecode.com/ http://io-2012-slides.googlecode.com/
- KirinDave 14y ago
  Yeah I wanted something with a bit more chrome and javascript hooks.
c3d 14y ago
You might want to look at Tao Presentations, http://www.taodyne.com http://www.taodyne.com. Very simple to write slides, see http://www.taodyne.com/shop/en/blog/15-multilingual-presentations http://www.taodyne.com/shop/en/blog/15-multilingual-presenta.... Yet fully 3D capable, see http://www.taodyne.com/shop/en/blog/27-reconstructing-the-tedx-intro-in-real-3d http://www.taodyne.com/shop/en/blog/27-reconstructing-the-te.... Not based on Javascript, it has its own language to make it easier to write slides. But can include web pages with something like: url 0, 0, 800, 600. "http://www.google.com" (draws a 800x600 Webkit browser at the center of the screen)

asadotzler 14y ago

Until someone builds a slide editor that's as easy to use as this is pretty to view, it's mostly meaningless to most people.

bergie 14y ago
It appears the author of this is working on an editor: http://youtu.be/l3RQZ4mcr1c http://youtu.be/l3RQZ4mcr1c (YouTube link from a another comment in this thread)
sandyarmstrong 14y ago
Yes, but adding inline markdown support makes it useful to me, at least.
drivebyacct2 14y ago
Different strokes for different folks. After having my list styles reset, unindent and unnumber everytime I edit some of my Word documents, and having the cursor disappear in documents (where the fix is, make a new document), I now vastly prefer document creation in Latex. It also makes versioning my documents easier. Same with Powerpoint. If I could go through and make some divs with some unordered lists and have that render in any browser... YES PLEASE.

hyuuu 14y ago

there is already a javascript plugin with the same name, doing a different thing though. The other reveal is a modal dialog : http://www.zurb.com/playground/reveal-modal-plugin http://www.zurb.com/playground/reveal-modal-plugin

phillmv 14y ago

I was Director of Animated GIFs at a recent conference, and part of my responsibilities involved harassing presenters for their slides. I would like to mention that quite possibly the most important audience for your slides is the conference videographer. These people often have a hard time transferring fancy html presentation decks into slides they can easily slice in with your talk video. With that in mind, I bid thee: use Keynote. It's like $20. Or at the very least, make sure whatever framework you use exports to pdf cleanly.

paulirish 14y ago
Capturing the video display from the presenter seems almost easier than having a videographer manually time static slide changes along to the video afterwards. This also assumes that people use slide decks that can't be shared afterwards (in their original glory), can't iframe content, or have syntax highlighting within reach? I'm sorry but for developer speakers and audiences, Keynote is a poor choice.
- phillmv 14y ago
  >Capturing the video display from the presenter seems almost easier than having a videographer manually time static slide changes along to the video afterwards. Yes and no. For starters, it's more expensive. You need a second camera and, at worst, potentially a second operator to worry over it. Secondly, it's more error prone. Copying the VGA feed off the video switcher will fail in hilarious ways/also require a second person whose job it is to look over it. I've thrown two conferences, and been responsible for front of the house AV for a total of three and a half. You're often understaffed or overbudget, and something often gives. Even in the best of situations you end up wanting the slides as a backup. >This also assumes that people use slide decks that can't be shared afterwards (in their original glory) Post your .ppt or .key file! >can't iframe content PLEASE do not have your talk depend on conference wifi. It's impossible to guarantee stable internet with hundreds of nerds trying to slurp down hotel internet. >I'm sorry but for developer speakers and audiences, Keynote is a poor choice. I disagree. There's absolutely nothing these frameworks give you other than the warm fuzzies over the 3d transitions and that you got to style it using css. You're displaying words and pictures on a screen, and Keynote is absolutely a killer at that task.

egonschiele 14y ago

I see a lot of comments on ease of use, so I'm going to toss my hat in the ring: mdpress (https://github.com/egonSchiele/mdpress https://github.com/egonSchiele/mdpress) makes presentations out of markdown files using impress.js. I wrote it because I needed something dead simple that I wouldn't have to think about. Example: # Hello world! --- # Welcome This is slide 2.