10 ms·

Reveal.js: HTML presentation framework

411 points by lopespm 6y ago

racingmars 6y ago
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!
- dang 6y ago
  Thanks! Done now.
dang 6y ago
If curious see also 2013 https://news.ycombinator.com/item?id=6450223 https://news.ycombinator.com/item?id=6450223 2012 https://news.ycombinator.com/item?id=4323172 https://news.ycombinator.com/item?id=4323172
selfishgene 6y ago
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?
- joking 6y ago
  no, and neither i have found a similar layout editor that is open source.
- duluca 6y ago
  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.
  - selfishgene 6y ago
    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://docs.deckdeckgo.com/ https://pencil.evolus.vn/ https://pencil.evolus.vn/ http://thomas.nadev.net/notes/2017-inkscape.html http://thomas.nadev.net/notes/2017-inkscape.html https://github.com/rainwoodman/inkslides https://github.com/rainwoodman/inkslides https://sozi.baierouge.fr/ https://sozi.baierouge.fr/
snapetom 6y ago
+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.
nickjj 6y ago
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/nyhackr-cli-dev-env.pdf 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.
- tra3 6y ago
  How do you capture terminal to gifs?
  - phist_mcgee 6y ago
    https://github.com/faressoft/terminalizer https://github.com/faressoft/terminalizer is my go to.
  - thunderbong 6y ago
    ScreenToGif? https://www.screentogif.com https://www.screentogif.com
  - jpm48 6y ago
    I use https://asciinema.org/ 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/lab1/ https://nccastaff.bournemouth.ac.uk/jmacey/msc/ase/labs/lab1...
  - nickjj 6y ago
    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 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.
xyzelement 6y ago
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.
- neodymiumphish 6y ago
  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 https://htns.xyz/4f98xk54
  - xyzelement 6y ago
    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.
ohlookabird 6y ago
Have used it for many talks. Fantastic software. Especially the presenter mode in a separate window is nice.
cycomanic 6y ago
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?
- EuAndreh 6y ago
  reveal.js has built-in support for markdown already https://revealjs.com/markdown/ https://revealjs.com/markdown/. Is that what you are after, or you're talking about something else?
  - thayne 6y ago
    it looks like there is still a fair amount of boilerplate involved to set that up.
- j-james 6y ago
  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/ https://slides.com/
  - cycomanic 6y ago
    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.
bordakt 6y ago
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.
acidburnNSA 6y ago
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 https://pandoc.org/MANUAL.html#slide-shows
- dpeck 6y ago
  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.
- 1propionyl 6y ago
  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.
  - nanna 6y ago
    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.
- toinbis 6y ago
  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/ https://sphinx-revealjs.readthedocs.io/en/latest/ , demo of generated presentation: https://attakei.github.io/sphinx-revealjs/ https://attakei.github.io/sphinx-revealjs/ . Did not compare sphinx-revealjs with pandoc's coverage of reveal.js features though.
- reegnz 6y ago
  That's how I've been doing presentations for years! Made me really excited and happy when I discovered it.
geraldbauer 6y ago
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/ http://slideshow-s9.github.io/ [2] http://slideshow-templates.github.io http://slideshow-templates.github.io PS: Yes, Slideshow (S9) is basically a static website generator / compiler for (web) presentations.
curiousgal 6y ago
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.
- dazbradbury 6y ago
  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?
  - curiousgal 6y ago
    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.
  - o-__-o 6y ago
    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
- FPGAhacker 6y ago
  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.
- benjanik 6y ago
  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.
svdr 6y ago
I was looking for a demo and then I saw that the big header is a presentation. Well done.
yoloClin 6y ago
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.
makach 6y ago
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..?
- rhencke 6y ago
  I look forward to seeing your open-source library that does this. :)
- adamnew123456 6y ago
  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.
- marviio 6y ago
  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.
openbrian 6y ago
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 https://github.com/arnehilmann/markdeck
euske 6y ago
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.
- colesantiago 6y ago
  are you trying to send me to sleep?
- tra3 6y ago
  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?
- lenkite 6y ago
  Can you write a tutorial on this with an example ?
- lucasverra 6y ago
  Collaboration in real time with the fellow associates seem to be unavailable right ? That for me is then a no go
  - eternauta3k 6y ago
    You can, with onenote
- sshine 6y ago
  If you turn off JS, a revealjs slideshow will naturally degrade into a one-page HTML file.
motyar 6y ago
If you want it quick. https://mark.show https://mark.show proudly powered by RevealJS
- arnaudsm 6y ago
  Great tool ! Is is open-source ?
  - motyar 6y ago
    Thanks! No
werber 6y ago
I wish this was a little bigger on mobile, I have fat fingers and struggled to navigate the demo
memco 6y ago
I’m a big fan of reveal.js via reveal-md: https://github.com/webpro/reveal-md https://github.com/webpro/reveal-md. Makes it very easy to quickly create good looking slides without clicking around GUIs.
- godot 6y ago
  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?
tlhunter 6y ago
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 https://github.com/tlhunter/presentations - [2]: https://thomashunter.name/presentations/ https://thomashunter.name/presentations/
zX41ZdbW 6y ago
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 https://github.com/ClickHouse/clickhouse-presentations - [2] https://shwr.me/ https://shwr.me/
- explorigin 6y ago
  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
nwsm 6y ago
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.
- kyawzazaw 6y ago
  I think it's good for showcasing slides on your personal website.
  - phist_mcgee 6y ago
    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.
jez 6y ago
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 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 https://sorbet.org [2] https://youtu.be/jielBIZ40mw https://youtu.be/jielBIZ40mw
- shepherdjerred 6y ago
  Woah that's incredible!
- marcan_42 6y ago
  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.
- deleted 6y ago
  [deleted]
- atg_abhishek 6y ago
  Thank you for sharing!! I'm totally going to be using this all the time now!
tikhonj 6y ago
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 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.
- nanna 6y ago
  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!
addcninblue 6y ago
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 https://github.com/d0c-s4vage/lookatme
hakim 6y ago
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 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).
- wheresmycraisin 6y ago
  Been using it since around 2013 for all sorts of presentations, from college to work to conference talks. Thanks for the great work!
  - hakim 6y ago
    Glad to hear its continued to be useful for so long!
- sshine 6y ago
  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!
- jpm48 6y ago
  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/ https://nccastaff.bournemouth.ac.uk/jmacey/Lectures/
  - bobbydreamer 6y ago
    That's really nice. How did you do that
privatemonkey 6y ago
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://github.com/hakimel / https://hakim.se/ 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 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 :-)
bitwize 6y ago
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.
MarcScott 6y ago
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 https://github.com/yjwen/org-reveal
- nanna 6y ago
  And there I was crafting my own ya-snippets for it! Facepalm
huuru 6y ago
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
djsumdog 6y ago
A good use case for Reveal.js is if you have several presentations that share slides: http://bigsense.github.io/presentations/index.html 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 https://github.com/BigSense/presentations
locallost 6y ago
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!
gmixer 6y ago
The dokuwiki plugin version is great, make a presentation from straight wiki page, without substantial faffing about. https://www.dokuwiki.org/plugin:revealjs https://www.dokuwiki.org/plugin:revealjs
bentolor 6y ago
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 https://github.com/asciidoctor/asciidoctor-reveal.js [2] https://bentolor.github.io/java9to13/ https://bentolor.github.io/java9to13/ [3] https://github.com/bentolor/java9to13/tree/master/docs https://github.com/bentolor/java9to13/tree/master/docs
sandreas 6y ago
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/ http://mdprez.fynder.de/

411 points by lopespm 6y ago

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!

dang 6y ago
Thanks! Done now.

dang 6y ago

If curious see also 2013 https://news.ycombinator.com/item?id=6450223 https://news.ycombinator.com/item?id=6450223 2012 https://news.ycombinator.com/item?id=4323172 https://news.ycombinator.com/item?id=4323172

selfishgene 6y ago

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?

joking 6y ago
no, and neither i have found a similar layout editor that is open source.
duluca 6y ago
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.
- selfishgene 6y ago
  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://docs.deckdeckgo.com/ https://pencil.evolus.vn/ https://pencil.evolus.vn/ http://thomas.nadev.net/notes/2017-inkscape.html http://thomas.nadev.net/notes/2017-inkscape.html https://github.com/rainwoodman/inkslides https://github.com/rainwoodman/inkslides https://sozi.baierouge.fr/ https://sozi.baierouge.fr/

snapetom 6y ago

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

nickjj 6y ago

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/nyhackr-cli-dev-env.pdf 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.

tra3 6y ago
How do you capture terminal to gifs?
- phist_mcgee 6y ago
  https://github.com/faressoft/terminalizer https://github.com/faressoft/terminalizer is my go to.
- thunderbong 6y ago
  ScreenToGif? https://www.screentogif.com https://www.screentogif.com
- jpm48 6y ago
  I use https://asciinema.org/ 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/lab1/ https://nccastaff.bournemouth.ac.uk/jmacey/msc/ase/labs/lab1...
- nickjj 6y ago
  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 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.

xyzelement 6y ago

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.

neodymiumphish 6y ago
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 https://htns.xyz/4f98xk54
- xyzelement 6y ago
  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.

ohlookabird 6y ago

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

cycomanic 6y ago

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?

EuAndreh 6y ago
reveal.js has built-in support for markdown already https://revealjs.com/markdown/ https://revealjs.com/markdown/. Is that what you are after, or you're talking about something else?
- thayne 6y ago
  it looks like there is still a fair amount of boilerplate involved to set that up.
j-james 6y ago
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/ https://slides.com/
- cycomanic 6y ago
  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.

bordakt 6y ago

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.

acidburnNSA 6y ago

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 https://pandoc.org/MANUAL.html#slide-shows

dpeck 6y ago
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.
1propionyl 6y ago
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.
- nanna 6y ago
  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.
toinbis 6y ago
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/ https://sphinx-revealjs.readthedocs.io/en/latest/ , demo of generated presentation: https://attakei.github.io/sphinx-revealjs/ https://attakei.github.io/sphinx-revealjs/ . Did not compare sphinx-revealjs with pandoc's coverage of reveal.js features though.
reegnz 6y ago
That's how I've been doing presentations for years! Made me really excited and happy when I discovered it.

geraldbauer 6y ago

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/ http://slideshow-s9.github.io/ [2] http://slideshow-templates.github.io http://slideshow-templates.github.io PS: Yes, Slideshow (S9) is basically a static website generator / compiler for (web) presentations.

curiousgal 6y ago

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.

dazbradbury 6y ago
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?
- curiousgal 6y ago
  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.
- o-__-o 6y ago
  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
FPGAhacker 6y ago
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.
benjanik 6y ago
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.

svdr 6y ago

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

yoloClin 6y ago

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.

makach 6y ago

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

rhencke 6y ago
I look forward to seeing your open-source library that does this. :)
adamnew123456 6y ago
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.
marviio 6y ago
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.

openbrian 6y ago

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 https://github.com/arnehilmann/markdeck

euske 6y ago

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.

colesantiago 6y ago
are you trying to send me to sleep?
tra3 6y ago
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?
lenkite 6y ago
Can you write a tutorial on this with an example ?
lucasverra 6y ago
Collaboration in real time with the fellow associates seem to be unavailable right ? That for me is then a no go
- eternauta3k 6y ago
  You can, with onenote
sshine 6y ago
If you turn off JS, a revealjs slideshow will naturally degrade into a one-page HTML file.

motyar 6y ago

If you want it quick. https://mark.show https://mark.show proudly powered by RevealJS

arnaudsm 6y ago
Great tool ! Is is open-source ?
- motyar 6y ago
  Thanks! No

werber 6y ago

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

memco 6y ago

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

godot 6y ago
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?

tlhunter 6y ago

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 https://github.com/tlhunter/presentations - [2]: https://thomashunter.name/presentations/ https://thomashunter.name/presentations/

zX41ZdbW 6y ago

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 https://github.com/ClickHouse/clickhouse-presentations - [2] https://shwr.me/ https://shwr.me/

explorigin 6y ago
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

nwsm 6y ago

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.

kyawzazaw 6y ago
I think it's good for showcasing slides on your personal website.
- phist_mcgee 6y ago
  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.

jez 6y ago

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 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 https://sorbet.org [2] https://youtu.be/jielBIZ40mw https://youtu.be/jielBIZ40mw

shepherdjerred 6y ago
Woah that's incredible!
marcan_42 6y ago
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.
deleted 6y ago
[deleted]
atg_abhishek 6y ago
Thank you for sharing!! I'm totally going to be using this all the time now!

tikhonj 6y ago

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

nanna 6y ago
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!

addcninblue 6y ago

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 https://github.com/d0c-s4vage/lookatme

hakim 6y ago

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

wheresmycraisin 6y ago
Been using it since around 2013 for all sorts of presentations, from college to work to conference talks. Thanks for the great work!
- hakim 6y ago
  Glad to hear its continued to be useful for so long!
sshine 6y ago
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!
jpm48 6y ago
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/ https://nccastaff.bournemouth.ac.uk/jmacey/Lectures/
- bobbydreamer 6y ago
  That's really nice. How did you do that

privatemonkey 6y ago

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://github.com/hakimel / https://hakim.se/ 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 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 :-)

bitwize 6y ago

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.

MarcScott 6y ago

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 https://github.com/yjwen/org-reveal

nanna 6y ago
And there I was crafting my own ya-snippets for it! Facepalm

huuru 6y ago

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

djsumdog 6y ago

A good use case for Reveal.js is if you have several presentations that share slides: http://bigsense.github.io/presentations/index.html 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 https://github.com/BigSense/presentations

locallost 6y ago

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!

gmixer 6y ago

The dokuwiki plugin version is great, make a presentation from straight wiki page, without substantial faffing about. https://www.dokuwiki.org/plugin:revealjs https://www.dokuwiki.org/plugin:revealjs

bentolor 6y ago

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 https://github.com/asciidoctor/asciidoctor-reveal.js [2] https://bentolor.github.io/java9to13/ https://bentolor.github.io/java9to13/ [3] https://github.com/bentolor/java9to13/tree/master/docs https://github.com/bentolor/java9to13/tree/master/docs

sandreas 6y ago

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/ http://mdprez.fynder.de/