Reveal.js: HTML presentation framework | Hacker News Reader

Reveal.js: HTML presentation framework

revealjs.com

411 pointslopespm106 comments

Hey! I’m the creator of reveal.js. Thanks for sharing. Happy to answer questions if you have any.

reveal.js was first released in 2011. A few years later I also launched a visual editing environment for reveal.js called Slides (slides.com). It has some pretty unique features targeted at developers, like a built-in CSS editor, access to the HTML source, and stepped line-by-line code highlighting. http://slides.com/news/developers

It’s been really great finding a sustainable way to continue working on open source (reveal.js) thanks to the revenue from the proprietary editor (Slides).

Been using it since around 2013 for all sorts of presentations, from college to work to conference talks. Thanks for the great work!

Glad to hear its continued to be useful for so long!

I use it for my personal website, and I use it as the front-end for a comic book viewer that I’m tinkering with. And naturally, I use Slides.com for my teaching slides and for my tech presentations. ;-)

Truly a versatile, well-made script.

Thanks for making it!

I use this for all my lectures. Thanks for all the great work makes my life so much easier. Click on the links to see the slides!

https://nccastaff.bournemouth.ac.uk/jmacey/Lectures/

That's really nice. How did you do that

The table of contents is written in D3.

Link is down

Thank you so much for your work! I work at microsoft, so everyone around me uses PowerPoint. I give all my presentations with revealjs, which I take directly from my Zettlr notes with minimal conversion. My colleagues were impressed this week that I could throw together a presentation with nice slides in less than an hour of work, with such a readable markdown "version" of the contents.

Thank you for the gift of productivity!

I'd just like to thank you for your work! I've used reveal.js on numerous school presentations and it continues to impress the audience every time.

It is very versatile and I've also modded it to be used to create live effects during concerts.

Thanks! I'm using RISE, a reveal.js implementation within Jupyter notebooks and it's so cool. Wish there was more support for the jupyter lab extension, making work presentation in this way is easy and very effective :)

Hi Hakim, this looks really great. Thanks for creating it :)

A minor bit of feedback on the webpage: I spent a while looking for a link to an example presentation, but couldn't find one. I eventually realised that the entire top section is an example presentation. This is so cool!! I wonder if adding some text next to the arrow ("Try the demo", or similar?) might help people find it? The demo is so nice, it would be a shame if some users don't spot it.

That’s a great point. I’ll add a demo link to the sidebar and make it scroll up and highlight the header. Thanks!

There's a new Demo link in the sidebar now :)

slides.com is an amazing domain name. How did you land upon it?

(iirc) It was originally slid.es and the slides.com domain was added later, I know it's not an answer to your exact question, but slid.es was a pretty good start point too :-)

(It became a defacto go-to tool for slide decks for me because it was so memorable)

You’re absolutely right. We started as slid.es which is still my personal favorite domain :)

We started out as slid.es and then bought slides.com. I won’t share the exact amount, but I believe it was 5x our yearly revenue at the time so safe to say it was a big investment. We haven’t raised any money so my co-founder and I had to pay out of pocket.

Big fan of reveal, thanks so much for your work. Useful for so many more things than just presentations. I normally use it for static marketing-ish sites, but been thinking recently about how to use it for more interactive applications...

Thanks for making this!

IMHO this is the best tool to present scientific content, because it really allows "multi media" in the original sense: formulas, different kinds of images, and videos.

Although I'm struggling right now with the formula part (going off the example in readme which is also not working) but I'm sure I'll figure that one out after some shut-eye. :P

I found out recently that pandoc can take text markdown-ish files and turn them into

* Beamer presentations

* Powerpoint presentations

* Reveal.js presentations

Kind of crazy and interesting. I made a nuclear power deck with it and it worked ok.

https://pandoc.org/MANUAL.html#slide-shows

I use pandoc + markdown to create a Beamer pdf that we use to guide the agenda for team meeting every week. It works well enough. The layouts are a little minimalist and have an academic feel but it works very well for putting together content for internal teams.

pandoc is magical software. One of those rare examples of a tool that does everything you would hope it does (and more) and nearly always does so correctly or as expected.

Alas that's not exactly the case for all language inputs. LaTeX conversion is patchy . Doubtless because of the sprawling ecosystem, but still, even support for pretty core packages is left still wanting.

Thank you for sharing this! Out of curiosity, checked that Sphinx (my defaults docs engine) seems to be capable of doing this as well. https://sphinx-revealjs.readthedocs.io/en/latest/ , demo of generated presentation: https://attakei.github.io/sphinx-revealjs/ . Did not compare sphinx-revealjs with pandoc's coverage of reveal.js features though.

That's how I've been doing presentations for years!

Made me really excited and happy when I discovered it.

Something cool I’ve done with reveal.js slides: it’s just a web page, so why not embed an iframe? Instead of putting a slide that says “Now for a live demo!” and switching over to an editor, why not just embed an interactive editor?

For example, here’s a slide from a presentation where I was showing off some fun features we had built into Sorbet’s[1] LSP editor support:

https://sorbet.run/talks/RubyConf2019/#/18

The slide has the Sorbet web playground embedded as an iframe, so the demo file persists for anyone who wants to browse the slides later. You can play around with the same example I used on the day of the presentation.[2]

[1] https://sorbet.org

[2] https://youtu.be/jielBIZ40mw

Woah that's incredible!

I've done this with presentations about web stuff - not even an iframe, just embed the demo straight into the slides.

Also, since it's just HTML, you can also dynamically generate content. I've done things like have a bunch of subslides that just mutate content when I'm trying to telling a technical story, with javascript stepping forward the changes. Works much better than copying and pasting and editing the same slide 25 times.

Honestly, I don't think I've made any presentations that didn't use reveal.js (except when forced to) in, what, a decade now? If it wasn't reveal.js back then it was something like it.

Thank you for sharing!! I'm totally going to be using this all the time now!

I've been doing all my talk slides for the past few years with org-mode and Reveal.js. Really happy with both the workflow and the result[1]. I've settled on a pretty simple system with three main files:

ideas.org → outline.org → slides.org

I start with unstructured thoughts, turn them into a structure of a presentation and then into concrete slides, all in roughly the same format. With Emacs, it's easy to navigate between all three files, view them side-by-side, copy/paste between them and make high-level structural changes like reordering slides, all in the same editor I use for everything else.

As a bonus, the defaults are pretty much the opposite of PowerPoint: the path of least resistance is to make simpler, more consistent slides with less text on each one.

I'd use this for any sort of presentation, but it's particularly useful for code. I can easily copy-paste code from my files into slides.org, and I get syntax highlighting in the editor to help catch mistakes. I can use syntax highlighting in the generated slides or not, depending on my needs. I haven't set this up myself, but I've seen people write simple Emacs scripts that compile and test the code from their slides—that would have caught a number of typos that made it into my actual conference presentations!

This also lets me manage everything associated with a presentation in a single git repo. This is incredibly handy, especially for presentations that have their own code or data.

Highly recommend giving a workflow like this a try. Once I got the hang of it, it became far more productive than making slides in PowerPoint, with better results to boot. It's easier to write slides in the first place, make structural changes and reuse content between pretty different presentations.

[1]: Here are the slides for the latest public talk I've given: https://jelv.is/talks/haskell-love-2020/slides.html

I turn the controls in the bottom-left corner off for the presentation itself, but I started enabling them on my website after a few people got confused on how to advance the slides.

Interesting. How do you handle things like fragment markup from org mode, for example to reveal a bullet point or paragraph?

Also, is your workflow org -> MD or org-> html? If to md, as I assume it probably is, can you just call in the slide breaks (---) in org mode directly?

Could you maybe share some code?

Edit: just learned about org-reveal. How did I miss this!

Yep, I use org-reveal which has an annotation for fragments.

Here's a link to the source for that particular talk: https://github.com/TikhonJelvis/talks/tree/master/haskell-lo...

Should have thought to link to it in my original comment :P.

FTI here is the source: https://github.com/TikhonJelvis/talks/tree/master/haskell-lo...

I tend to think that page-based presentation is becoming a thing of the past. I usually write a big sprawling one-page HTML, magnify it, and do a presentation by gradually scrolling them. The advantages are obvious:

- No need to tweak the content to fit the page boundary.

- Highly accessible (adjustable to any screen).

- No JS.

- All figures are in SVGs.

- Can also support printing (just insert CSS page break).

- (edit) The scroll bar always shows where you are in the slides.

I keep recommending this to my colleagues, but they're still sticking with PDFs and PowerPoints.

are you trying to send me to sleep?

Fascinating idea. I guess the current format is the result of over head transparencies or basically a book format. No reason to stick with it, unless you have to be conservative.

Anyway, do you use a template? Or any tooling?

Can you write a tutorial on this with an example ?

Collaboration in real time with the fellow associates seem to be unavailable right ? That for me is then a no go

You can, with onenote

If you turn off JS, a revealjs slideshow will naturally degrade into a one-page HTML file.

Interesting, I just used deck.js (I think a similar thing) to create a presentation after decades of professional power-pointing.

I decided to create my presentation in a series of markdown files, then run a script to compile them into a single HTML+deck.js side deck.

The overhead of setting the thing up originally was worth it, the iteration on the presentation (eg ability to work on a single section in a markdown editor) was much faster.

This sounds like an excellent example of what Hedgedoc[0] (née CodiMD) does with the /s/ before the page portion of the URL.

0: https://htns.xyz/4f98xk54

Interesting, thank you. I looked just a bit and that seemed like it required hosting, while with deck.js I just end up with a .HTML file I can send around / play locally. But it does look cool.

Glad to see this on Hacker news! Hakims experiments into CSS, HTML and JS have always been a source of inspiration for me and got me curious about the possibilities of CSS (https://github.com/hakimel / https://hakim.se/). I also have a common interest in exploring the possibilities of Markdown so I've followed Slide and reveal.js with keen interest. For a while it was my number one choice for deck building. Super easy to use and great UX and probably the best Markdown to slide deck option out there.

If you want to code something similar though, my approach has been using Svelte.

Svelte is a framework for building user interfaces that uses a build step to compile your code. The syntax and API is awesome to work with and the first proof of concept took me from Markdown to a working slide deck in maybe 30 minutes. The pages are mostly pre rendered HTML with a small chunk of JS on top. Not the same great UX but... I will get there.

Have a look at my own experiments with Markdown to slide decks here https://www.fictionboard.com/demos where I show how decks can be used for storytelling and immersion in TTRPGs.

I'll probably finish a demo of markdown based interactive fiction and RPG character sheets this week. And I'll expose the syntax :-)

It's solid for creating basic slides quickly, and it supports exporting to PDF by having your printer print the PDF from a browser (it came out perfect).

Here's a 100+ slide PDF of a talk I did the other month with Reveal using an out of the box theme: https://github.com/nickjj/nyhackr-cli-dev-env/blob/master/ny...

The PDF doesn't show it but I had a lot of animated gifs (almost every terminal screenshot is animated). Overall it only took like 30 seconds to assemble each slide once I knew the content I wanted to have, since it's just HTML in the end.

It also has a nice a presenter layout to see slide notes. Perfect for live streaming a remote presentation while having notes off to the side that no one can see on the stream.

The best part about it is the standalone version doesn't require running a Node server. It's just basic HTML, CSS and JS that you can open straight in a browser.

I'll be using it for future presentations.

How do you capture terminal to gifs?

https://github.com/faressoft/terminalizer is my go to.

ScreenToGif?

https://www.screentogif.com

I use https://asciinema.org/ for terminal capture. Works really well and can embed into slides. Here is an example from one of my lab sessions https://nccastaff.bournemouth.ac.uk/jmacey/msc/ase/labs/lab1...

I went with a manual approach. It was more than capturing text input in a shell. I was showing things like Vim and tmux workflows, so it involved recording my entire terminal at the application level.

What I ended up doing was taking individual screenshots of each frame I wanted in the animation. Most of them were only ~5 frames long.

Then if needed, I enhanced each screenshot by adding text labels. Like when I demo'd Vim splits I wanted to put a "1", "2", etc. on each split to make it easier to see what's going on.

Then I took all of those individual screenshots and fed them into https://ezgif.com/maker which is an online tool that converts screenshots into an animated gif where I was able to configure how long each frame should stay visible before transitioning to the next one.

It sounds like a lot of work but it wasn't too bad considering I needed to sometimes add graphics to each frame and control the length of each frame. Once you get the work flow down it was pretty fast.

I really like reveal. However I still havent found a good way of creating slides. I find writing directly in HTML too tedious, but haven't really found a good other way. Most of the Markdown converters that are floating around are to restricted. At the moment I'm using org-reveal which works quite well, but I often find that the layout options lacking so I end up putting a lot of HTML into the org files which again defeats the purpose. Anyone have a good solution?

reveal.js has built-in support for markdown already https://revealjs.com/markdown/.

Is that what you are after, or you're talking about something else?

it looks like there is still a fair amount of boilerplate involved to set that up.

Have you given the official online editor a whirl? The last time I used it, I recall it being relatively feature-complete, although there's definitely a tradeoff compared to writing HTML.

https://slides.com/

I had, however I was relying on quite a few plugins and I could not find a way of integrating it into the slides presentation without having to export it to reveal first and the editing the resulting html. Admittedly I did not have time to investigate this in depth.

+1 on Reveal. My last job required a fair amount of lessons with Jupyter. Reveal let me stay in the browser for both slides and code, and since it's all HTML, let me programmatically and quickly style the slides instead of WYSIWYGing in Keynote/PowerPoint.

Plus, I just ran the thing running in Docker with the actual slide HTML file in different host directories. Starting a presentation was just docker run -v.

I used this for a pretty casual work presentation. It came out nicely and the presentation went without a hitch. I liked the flexibility in slide progression (you can easily create a graph of sorts to pick different paths to go through as a presenter, instead of just a linear progression). But honestly I struggle to think of many cases where you really need HTML/JS for your presentation.

I think it's good for showcasing slides on your personal website.

Even more for work presentations as a web developer, if you want to demo live code snippets, that's totally possible with reveal within the slides. Great for brown bag presentations.

Can anyone recommend a realtime remote presentation solution? That is, something that updates the slides for the viewers as well, to use instead of sharing a screen with slides.

Good question. Would also be interested in this, as something to accompany [insert video conferencing tool of choice] to make use of dual monitors sensibly.

What's your use case out of interest?

It would be very useful for schools. I have to grade quite a few presentations and many students have crappy internet so a lot of the times the slides appear smudgy and I have to go over them manually after the presentations.

Having the slides automatically synced during presentation would require way less bandwidth than screen sharing and thus result in a better experience for both parties.

I used this to present my weekly updates to clients and offered a url for them to follow along. I still screenshared for those who couldn’t be bothered.

Would be nice to stream audio directly with the presentation to facilitate things like investor calls without requiring a full conferencing solution

I made something like this for my wife with clojure and clojurescript. Basically it used websockets to broadcast a url to the clients and the client displayed the image at the url with some css decoration.

She was doing phone conferencing for audio at the time.

Worked really well for its purpose and was super simple.

She has since moved to zoom and just does plain screen shares now.

I work for Beautiful.ai - we have this, but currently behind a feature flag. We'll be releasing what you described soon - the reason it isn't fully released yet is that you still need some kind of conference call link, and having two links gets a bit awkward for viewers. We're also working on a way to record video with synchronized slide advancement for an asynchronous "meeting" with the same intended effect. Let me know if you want to chat or check it out.

Apple Keynote does this now I believe via the iCloud web site. Not FOSS but useful

Take a look at BigBluebutton [0]. It allows presentation sharing in a nice way and is generally built for sessions with 50 or less users. You have to self host it though but they have a nice install.sh script.

[0] https://bigbluebutton.org

We have a few customers beta testing liven.io right now, which does exactly this. Primarily we're working with venues to coordinate presentations / livestreams across multiple screens (think main pres on one screen, event agenda on another, speaker timer on another, etc.), then broadcasting that out for a remote or hybrid event. It's all browser based and runs on websockets - if that sounds interesting feel free to reach out and you can try it out!

The reveal.js Multiplex plugin lets you do this, though it requires some manual setup to get the server running. https://github.com/reveal/multiplex

The official reveal.js platform at slides.com also support remote presenting, streamed to any number of viewers. More info and screenshots at https://help.slides.com/knowledgebase/articles/333924-presen...

Take reveal.js to the next level with markdeck. It a dockerfied version of reveal using markdown and graphics generated on the fly with asciitosvg and graphviz. https://github.com/arnehilmann/markdeck

If curious see also

2013 https://news.ycombinator.com/item?id=6450223

2012 https://news.ycombinator.com/item?id=4323172

My favorite Reval.js trick is to iframe my public demo site. I give a quick look into the actual thing being presented, without switching windows.

My university examiners always ave at my presentations.

I'm very happy using this tool, but I have to admit you need to be HTML savvy to be really productive. For me the WYSIWYG editors are surely a stepdown for now, and sadly I haven't seen much improvement recently.

I've been using lookatme[1] for my presentations, which converts Markdown to a slides format, and I absolutely love this project. I found out about it through a few people who presented at an online Neovim talk in this format.

[1]: https://github.com/d0c-s4vage/lookatme

I’m a big fan of reveal.js via reveal-md: https://github.com/webpro/reveal-md. Makes it very easy to quickly create good looking slides without clicking around GUIs.

I've dabbled with reveal-md a bit and I like it, but I really want to love it more. I found that, even as a programmer, presentation slides is one of those things that I just wish I'm using a WYSIWYG GUI editor to create. I remember trying out reveal-md; and a little while later, went back to Google Slides next time, and found it simply more liberating to write slides in a GUI. I'll admit this may simply be personal preference though. Or I simply need to give it more time to try to write slides in markdown?

I heavily use/rely on Reveal.js.

Lately I switched over to use RevealJS via asciidoctor [1] and I was really pleasantly suprised how far you can get (see example presentation [2]) and completly sticking to the Asciidoctor-way (source [3])

[1] https://github.com/asciidoctor/asciidoctor-reveal.js

[2] https://bentolor.github.io/java9to13/

[3] https://github.com/bentolor/java9to13/tree/master/docs

I used to use reveal.js when I was teaching for many of my lessons.

Of course there's an Emacs mode for authoring your deck.

https://github.com/yjwen/org-reveal

And there I was crafting my own ya-snippets for it! Facepalm

FYI: Slideshow (S9) [1] lets you write your presentations in markdown and than lets you pick one of many template packs [2] such as Reveal.js, Bespoke.js, Deck.js, Shower.js, S6 and some more. [1] http://slideshow-s9.github.io/ [2] http://slideshow-templates.github.io

PS: Yes, Slideshow (S9) is basically a static website generator / compiler for (web) presentations.

I've got a dozen presentations [1] that all use reveal.js. I like it for presenting at live events because I just host them on my public website [2], and if my machine were to die, I could just borrow one from an audience member.

- [1]: https://github.com/tlhunter/presentations

- [2]: https://thomashunter.name/presentations/

ClickHouse presentations are almost 100% in HTML [1].

All of them are based on Shower [2] and to prepare a new presentation I just copy-paste previous presentation and edit HTML directly... actually very understandable and convenient even for C++ developer.

- [1] https://github.com/ClickHouse/clickhouse-presentations - [2] https://shwr.me/

Shower looks nice but reveal.js has some really great features like a blank screen button and presenter mode with notes a timer and the next slide.

You can make reveal.js slides in a gui at slides.io

I really like Reveal.js.

I feel the design constraints enforced (size / amount of text per slide) is awesome, but at the same time very limiting for technical presentations where large amounts of text data is pretty important.

Does anyone else have this issue / work around it? Maybe I suck at designing slide decks, but I just feel that the ability to break design rules easily is sometimes a must-have.

It's nice and somehow "just works" (although I used it only in a relatively basic way). I used it years ago at my university when doing a presentation on a small JS project I did. It being basically just a web page, I could run my code directly in the slides which is a lot nicer than Powerpoint. And it made a good impression!

Have a look at my svelte hobby project for taking ONE Markdown file and compiling it into a full featured presentation (all client side) - no guarantees not to be broken or offline, there are lots of alternatives ;)

http://mdprez.fynder.de/

Have used it for many talks. Fantastic software. Especially the presenter mode in a separate window is nice.

If you want it quick.

https://mark.show

proudly powered by RevealJS

Great tool ! Is is open-source ?

Thanks! No

Wow, spent some time fiddling with this framework. I really like it and I think the potential is huge, unfortunately I am too lazy so I will probably just stick with PowerPoint. Maybe make an adapter and publish to this format is possible..?

I look forward to seeing your open-source library that does this. :)

I did something along those lines a few years ago but the scripts for it are long since gone. The basic workflow was to compose the deck in LibreOffice and then do a few conversions:

- ODT -> PDF - PDF -> directory of PNG images

Then all you need is a basic web page with an image and some nav buttons, coupled with some JS that knows the list of files and can update the image's URL based on nav button clicks. At the end you have a portable web slide deck.

Fancier setups are definitely possible (you could for example mimic multi-monitor presenter mode by having multiple pages where one drives the other via websockets, or even just add a timer and presenter's notes) but it gets around having to hope that the other side has a decent PDF reader or a presentation editor that likes your preferred file format.

I use it _because_ I’m lazy. :) PowerPoint is fiddly. Emacs and org-reveal is simple. Just edit in plaintext org. Press a key command and the browser shows the result. Presentation can be version controlled in git.

The dokuwiki plugin version is great, make a presentation from straight wiki page, without substantial faffing about.

https://www.dokuwiki.org/plugin:revealjs

I was looking for a demo and then I saw that the big header is a presentation. Well done.

Is there a way to export in word or powerpoint formats (docx, pptx)? Looking for robust and flexible solution for creating online presentation that can be exported to both pdf and office formats

I wish this was a little bigger on mobile, I have fat fingers and struggled to navigate the demo

A good use case for Reveal.js is if you have several presentations that share slides:

http://bigsense.github.io/presentations/index.html

I wrote a simple builder script that would pull groupings of slides together into different presentations, as well as watcher scripts to rebuild automatically when I saved:

https://github.com/BigSense/presentations

Probably want to take the "#/29" off the end of the link, so we're not linking to the last slide of their demo presentation!

Thanks! Done now.

Is the WYSIWYG editor on slides.com open source for those of us who would like to run it locally and not have to trust a binary?

no, and neither i have found a similar layout editor that is open source.

High quality UX controls rarely are. I love slides.com and pay for the premium option to support the efforts. It’s awesome that they let you take a zip extract of the html/js version and run your whole presentation offline, which is handy at conferences. You can also export to PowerPoint and pdf too, which is was useful a few times.

TeXmacs will probably meet my needs then ... not as much sizzle and flash as reveal.js, but better WYSIWYG support for technical content.

For anyone still looking for an open source editor:

https://docs.deckdeckgo.com/

https://pencil.evolus.vn/

http://thomas.nadev.net/notes/2017-inkscape.html

https://github.com/rainwoodman/inkslides

https://sozi.baierouge.fr/

I use reveal.js to give presentations at work.

Type 'em up in Emacs org-mode, then use org-reveal to spit out the presentation HTML and screenshare with my browser.

It's real nice, the workflow allows me to slap something together in tools I find familiar rather than attempting to wrestle with PowerPoint.

Reply on news.ycombinator.com