As I find myself repeatedly wanting to embed Observable content in presentations, I thought I’d create an Observable-friendly interface to reveal.js.
I’ve tried to make its use require minimum changes to Observable cell content and hopefully it is reasonably intuitive to use. I’ve created documentation pages here:
https://observablehq.com/@jwolondon/observable-embedded-slideshow
Feedback / suggestions for changes/additions welcome.
This is so cool! It’s great to see that we can create interactive slides directly from Observable. Do you think it would be useful to have a browser extension that automatically converts a notebook into slides, with each cell becoming a slide?
I think that would be hard for a couple of reasons:
So while there is, in my view, no likely single automated conversion, I think there is also value in consciously choosing how to design for slide presentation. The electoral bias slideshow is a good example of this: The majority of the work is done by notebook cells that aren’t directly displayed as slides, but together contribute to the output in final slideshow. And while not all slides are dynamic or interactive, they all retain their reactive dependency on the underlying data. Should we need to update the data, this will cascade to the visible slides in the deck.
Good points! I think what I really want comes down to two features:
I also realized that building a Chrome extension was overcomplicating the solution. So, as an experiment, I created a tiny library that addresses these two needs, inspired by the solutions proposed by you, @mbostock Slide and @Fil Fullscreen!
https://observablehq.com/@pearmini/slide
Feel free to try it out and thanks for your inspiring works!
This is great! (It’s what I love about a community forum where ideas can get bounced around and improved along the way).
I think your approach of being able to display each slide in sequence (as well as the actual full-screen deck) works well for designing the slide deck. In my approach I was struggling between the design tensions of ‘compactly sharable for readers to view the slideshow’ and ‘allow authors to develop their slideshow’. I’ve prioritised the former, to some extent at the cost of the latter.
However, following your requests, I have now added persistent slide positions, so when working on slide 17 of 99 the display remains on the last slide viewed even if it is updated. I have also added a slide overview showing thumbnails of all slides in sequence. This actually came for free, as it is part of reveal.js functionality. Pressing the ‘O’ key will toggle between thumbnail overview and per-slide view.
I just tried the two new features, and they worked really well. Thanks so much for the quick response!
I completely understand your design choice. Your approach is definitely better suited for presenting more informative content, such as all the wonderful course slides you create. I wish I’d had slides like those when I first learned data visualization! My approach is probably better suited for simpler content.
Thanks again for sharing your thoughts. I’d love to try your approach someday!
I also find this so cool - thanks for posting it here! I will directly use it at my upcoming Data Viz meetup! 
.
One feature I would like to see is a slide which shows code and the result. It would be great if you could add that to your notebook.
Here is my attempt: https://observablehq.com/@ambassadors/code-slide-test
Here is an alternative version of @jwoLondon 's
https://observablehq.com/@tomlarkworthy/slides
Main differences
edit: works the same on both sites now
I really like what you’ve done there, and thanks for the feedback.
I think there are two separate elements, which I’ve now added to slideshow.
The first is the ability to have a ‘split screen’ with draggable divider. I’ve added this as a 5th built-in layout: split (see ‘Split panels’ on this page: https://observablehq.com/@jwolondon/using-built-in-slide-settings). I think this has use beyond code display, for example as ‘asides’ or ‘more detail’ that may or may not be revealed in a presentation (I’ve given the option of a 0-space panel along with a minimal divider handle so support this).
The second is the formatted code output. Markdown’s existing fenced code blocks provide some out of the box formatting here, but more control such as line numbering is offered by Reveal.js’s plug-in as you have illustrated. I’ve added the plugin by default to Slideshow now, so it is available within minimal extra effort via a new codeBlock() function. See ‘Showing code’ on this page: https://observablehq.com/@jwolondon/basic-slide-styling
I’ve given default syntax colouring to match Observable’s default, as that seems the most likely to buy useful given the context, but styles can be overridden with CSS if desired.
Does that cover your use-cases sufficiently?
Thanks @jwoLondon for adding these features! 
It covers my case for now, at one point I would like to show code which creates animations (that’s why I had the buttons), but not now.
It’s incredible three gerat approaches are already posted here, hopefully we can channel the combined ideas into one main approach. Thanks for sharing your great approaches! @tomlarkworthy @subairui @jwoLondon