Mind-Blowing Quarto Slide Extensions 💬 🖍️ 🤯 | Emil Hvitfeldt | Data Science Lab
The Data Science Lab is a live weekly call. Register at pos.it/dslab! Discord invites go out each week on lives calls. We'd love to have you!
The Lab is an open, messy space for learning and asking questions. Think of it like pair coding with a friend or two. Learn something new, and share what you know to help others grow.
On this call, Libby Heeren is joined by Emil Hvitfeldt, who walks through the art of "slide crafting" in Quarto and shows off the collection of Reveal JS extensions he's been building to make slides way more fun and powerful.
Emil starts with the basics of building slides in Quarto with the Reveal JS format (fragments, columns, a little CSS) and explains how Quarto extensions differ from packages. Then he shows off the good stuff: iMessage-style chat bubbles 😍 hand-drawn "rough notation" highlighting and annotations 🖍️ the Flourish extension for animating code chunks, gorgeous reusable themes, and his in-progress "editable" extension that lets you drag, resize, and restyle slide elements right in the browser and save the changes back to your source. And, spoiler, his "editable" extension is much further along as of the publishing of this video!! If you've ever fought with slide layouts, there is definitely something here you can try at home!
Hosting crew from Posit: Libby Heeren, Isabella Velasquez
Emil's socials and urls:
website: https://emilhvitfeldt.com/
GitHub: https://github.com/emilhvitfeldt
Bluesky: https://bsky.app/profile/emilhvitfeldt.bsky.social
LinkedIn: https://www.linkedin.com/in/emilhvitfeldt/
Resources mentioned in the video and chat:
🔗 Emil's GitHub (home of his Quarto extensions): https://github.com/EmilHvitfeldt
🔗 quarto-revealjs-editable extension: https://github.com/EmilHvitfeldt/quarto-revealjs-editable
🔗 quarto-revealjs-rows extension (shared by Emil after the session): https://github.com/EmilHvitfeldt/quarto-revealjs-rows
🔗 Quarto Reveal JS documentation: https://quarto.org/docs/presentations/revealjs/
🔗 Quarto Reveal JS demo slides: https://quarto.org/docs/presentations/revealjs/demo/#/title-slide
🔗 News! Quarto 2 (Quarto in Rust): https://quarto.org/docs/blog/posts/2026-04-06-whats-next-quarto-2/
🔗 Dynamic Tabsets in Quarto (Josh Cowley): https://josh.quarto.pub/posts/2022-11-10-quarto-tabsets-update/2022-11-10-quarto-tabsets-update.html
🔗 Embedding Reveal JS via iframe (Quarto source example): https://github.com/quarto-dev/quarto-web/blob/main/docs/presentations/revealjs/index.qmd#L12-L14
🔗 posit::conf 2026: https://conf.posit.co/2026/
🔗 R/Medicine conference: https://rconsortium.github.io/RMedicine_website/
🔗 Muntasir Masum's slides repo: https://github.com/muntasirmasum/epi553-data-viz
🔗 Example Quarto slides — Nicola Rennie (Styling Charts): https://nrennie.rbind.io/MFC-CDT-data-viz/slides/styling-charts-r.html
🔗 Example Quarto slides — Colin Madland: https://cmadland.github.io/slides/
🔗 Colin Madland's slides repo: https://github.com/cmadland/slides
🔗 Example Quarto slides — Raha Dastgheyb (R/Medicine 2024): https://rdastgh1.quarto.pub/rmedicine-2024-scidatareportr/#/title-slide
► Subscribe to Our Channel Here: https://bit.ly/2TzgcOu
Follow Us Here:
Website: https://www.posit.co
Hangout: https://pos.it/dsh
The Lab: https://pos.it/dslab
LinkedIn: https://www.linkedin.com/company/posit-software
Bluesky: https://bsky.app/profile/posit.co
Thanks for hanging out with us! 💛
Timestamps
00:00 Introduction
01:22 Demoing a primer on Reveal JS slides in Quarto
05:11 "Does that PDF export still use Pandoc, or is there an option of exporting via Typst?"
08:17 Demoing slide crafting with a new Quarto document
11:24 Demoing how to download and use a Quarto template
14:01 "Is this UI you're using for slide generation exclusive to Positron?"
16:16 Demoing how to install a Quarto extension from the terminal
18:45 "Is there a maximum number of columns you can have?"
19:18 Demoing adding custom CSS classes to slide columns
23:03 "Do we know if extensions will still be submitted to the OpenVSX marketplace?"
25:11 "Are these Quarto extensions global, or are they per project?"
27:42 "When you change the text fonts inside those columns, could you do it for all the columns at once, maybe by changing the top div?"
29:31 "Do you also get grid logic like you have with CSS Grid?"
31:54 Demoing Quarto VS Code extensions for autocomplete and shortcodes
34:32 Demoing the chat bubbles extension
37:38 Demoing the rough notation extension for highlighting text fragments
40:20 Demoing the Flourish extension for highlighting code chunks
43:07 Demoing the editable extension for dragging and adjusting slide elements
49:28 Demoing custom Reveal JS slide themes
52:26 "Is there a Quarto extension that can help dynamically create tabs or chunks?" (see dynamic tabs link in the resources above!)
53:58 Explaining the default code chunk highlighting feature in Quarto
55:11 "How do you embed a Reveal JS site into another Quarto document?"
The Lab is an open, messy space for learning and asking questions. Think of it like pair coding with a friend or two. Learn something new, and share what you know to help others grow.
On this call, Libby Heeren is joined by Emil Hvitfeldt, who walks through the art of "slide crafting" in Quarto and shows off the collection of Reveal JS extensions he's been building to make slides way more fun and powerful.
Emil starts with the basics of building slides in Quarto with the Reveal JS format (fragments, columns, a little CSS) and explains how Quarto extensions differ from packages. Then he shows off the good stuff: iMessage-style chat bubbles 😍 hand-drawn "rough notation" highlighting and annotations 🖍️ the Flourish extension for animating code chunks, gorgeous reusable themes, and his in-progress "editable" extension that lets you drag, resize, and restyle slide elements right in the browser and save the changes back to your source. And, spoiler, his "editable" extension is much further along as of the publishing of this video!! If you've ever fought with slide layouts, there is definitely something here you can try at home!
Hosting crew from Posit: Libby Heeren, Isabella Velasquez
Emil's socials and urls:
website: https://emilhvitfeldt.com/
GitHub: https://github.com/emilhvitfeldt
Bluesky: https://bsky.app/profile/emilhvitfeldt.bsky.social
LinkedIn: https://www.linkedin.com/in/emilhvitfeldt/
Resources mentioned in the video and chat:
🔗 Emil's GitHub (home of his Quarto extensions): https://github.com/EmilHvitfeldt
🔗 quarto-revealjs-editable extension: https://github.com/EmilHvitfeldt/quarto-revealjs-editable
🔗 quarto-revealjs-rows extension (shared by Emil after the session): https://github.com/EmilHvitfeldt/quarto-revealjs-rows
🔗 Quarto Reveal JS documentation: https://quarto.org/docs/presentations/revealjs/
🔗 Quarto Reveal JS demo slides: https://quarto.org/docs/presentations/revealjs/demo/#/title-slide
🔗 News! Quarto 2 (Quarto in Rust): https://quarto.org/docs/blog/posts/2026-04-06-whats-next-quarto-2/
🔗 Dynamic Tabsets in Quarto (Josh Cowley): https://josh.quarto.pub/posts/2022-11-10-quarto-tabsets-update/2022-11-10-quarto-tabsets-update.html
🔗 Embedding Reveal JS via iframe (Quarto source example): https://github.com/quarto-dev/quarto-web/blob/main/docs/presentations/revealjs/index.qmd#L12-L14
🔗 posit::conf 2026: https://conf.posit.co/2026/
🔗 R/Medicine conference: https://rconsortium.github.io/RMedicine_website/
🔗 Muntasir Masum's slides repo: https://github.com/muntasirmasum/epi553-data-viz
🔗 Example Quarto slides — Nicola Rennie (Styling Charts): https://nrennie.rbind.io/MFC-CDT-data-viz/slides/styling-charts-r.html
🔗 Example Quarto slides — Colin Madland: https://cmadland.github.io/slides/
🔗 Colin Madland's slides repo: https://github.com/cmadland/slides
🔗 Example Quarto slides — Raha Dastgheyb (R/Medicine 2024): https://rdastgh1.quarto.pub/rmedicine-2024-scidatareportr/#/title-slide
► Subscribe to Our Channel Here: https://bit.ly/2TzgcOu
Follow Us Here:
Website: https://www.posit.co
Hangout: https://pos.it/dsh
The Lab: https://pos.it/dslab
LinkedIn: https://www.linkedin.com/company/posit-software
Bluesky: https://bsky.app/profile/posit.co
Thanks for hanging out with us! 💛
Timestamps
00:00 Introduction
01:22 Demoing a primer on Reveal JS slides in Quarto
05:11 "Does that PDF export still use Pandoc, or is there an option of exporting via Typst?"
08:17 Demoing slide crafting with a new Quarto document
11:24 Demoing how to download and use a Quarto template
14:01 "Is this UI you're using for slide generation exclusive to Positron?"
16:16 Demoing how to install a Quarto extension from the terminal
18:45 "Is there a maximum number of columns you can have?"
19:18 Demoing adding custom CSS classes to slide columns
23:03 "Do we know if extensions will still be submitted to the OpenVSX marketplace?"
25:11 "Are these Quarto extensions global, or are they per project?"
27:42 "When you change the text fonts inside those columns, could you do it for all the columns at once, maybe by changing the top div?"
29:31 "Do you also get grid logic like you have with CSS Grid?"
31:54 Demoing Quarto VS Code extensions for autocomplete and shortcodes
34:32 Demoing the chat bubbles extension
37:38 Demoing the rough notation extension for highlighting text fragments
40:20 Demoing the Flourish extension for highlighting code chunks
43:07 Demoing the editable extension for dragging and adjusting slide elements
49:28 Demoing custom Reveal JS slide themes
52:26 "Is there a Quarto extension that can help dynamically create tabs or chunks?" (see dynamic tabs link in the resources above!)
53:58 Explaining the default code chunk highlighting feature in Quarto
55:11 "How do you embed a Reveal JS site into another Quarto document?"
