Web-Based Slide Decks

Fabian Platzer

Graz University of Technology, Austria

Tue 26 Nov 2024, IAweb WS 2024/2025.

Slides:
https://ftp.isds.tugraz.at/pub/surveys/platzer-2024-11-26-survey-web-slide-decks-slides/

Survey Paper:
https://ftp.isds.tugraz.at/pub/surveys/platzer-2024-11-26-survey-web-slide-decks.pdf

© Copyright 2024 by the author(s), except as otherwise noted.
This work is placed under a Creative Commons Attribution 4.0 International (CC BY 4.0) licence.

Four Categories

Text-Based: Markdown syntax. Simple, lightweight, fast to create and change.
JavaScript-Based: HTML, JavaScript, and CSS. Interactive, powerful styling, advanced animations.
Hosted: Online tools. Easy collaboration and sharing.
Responsive: Responsive slide decks, adapting to wide variety of devices and screen sizes.

a) Marp [2018-]

---
marp: true
theme: default
paginate: true
backgroundColor: #fff
---
<div class=ldiv>
  - Bullet Point 1
  - Bullet Point 2
  - Bullet Point 3
</div>
<div class=rdiv>
  ![Example Image](./diagrams/diagram.svg)
</div>

Marp: Example Slide — Marp: Example slide.

Marp Characteristics

Slide Preview: Instant preview.
Custom Themes: Simple and easy modifiable slide design.
IDE Integration: Extension for Visual Studio Code.
Advanced Features: Syntax highlighting and maths typesetting.
SVG Inclusion: Supports SVG vector graphics.
Multi-Format Export: Export to various formats including PDF, HTML, and PowerPoint.

Collaboration: Not supported.
Swipe Navigation: Not supported.
Margin Navigation: Not supported.
Live Code Integration: Not supported.

b) Slidev [2021-]

---
Slidev Example Slide
---
<div style={{display:"flex", justifyContent:"space-between"}}>
  <div style={{ width: "50%" }}>
    <ul style="padding-left: 2em">
      <li>Bullet Point 1</li>
      <li>Bullet Point 2</li>
      <li>Bullet Point 3</li>
    </ul>
  </div>
  <div style={{ width: "40%" }}>
    <img src="./diagram.svg" alt="Example Diagram"/>
  </div>
</div>

Slidev: Example Slide — Slidev: Example slide.

Slidev Characteristics

Developer Friendly: Excellent support and documentation.
Recording Support: Built-in recording and camera view.
Hackable: Web-based nature allows all web app functionalities in presentations.
Interactive: Integrates Vue.js components for interaction.
Live Code Integration: Built-in live code integration.
Easy Export: Easy export to PDF, PowerPoint, and PNG formats.

Offline Functionality: Advanced features often require an online setup.
HTML Export: Not supported.
Figure Zooming and Panning: Not supported.

Comparison of Text-Based Slide Decks

Table 1: Comparison of text-based slide deck tools.
Feature	Remark	Marp	Fusuma	Slidev
Collaborative	✘	✘	✘	✘
SVG Inclusion	✔	✔	✔	✔
Globally Change Bullet Spacing	✘	✔	✘	✔
Globally Change Bullet Indentation	✘	✔	✘	✔
Export as PDF	✔	✔	✔	✔
Export as HTML	✔	✔	✘	✘
Export as PowerPoint	✘	✔	✔	✔
Slide numbering	✔	✔	✘	✔
Live Code Integration	✘	✘	✘	✔
Open-source	✔	✔	✔	✔
Licence	MIT	MIT	MIT	MIT
First Release	2011-10-15	2018-03-25	2018-04-27	2021-04-12
Last Update	2024-06-24	2024-04-21	2021-12-01	2024-07-22
Popularity (GitHub stars)	7.4k	7.4k	5.4k	32.1k
Swipe Navigation	✔	✘	✔	✔
Margin Navigation	✔	✘	✔	✔
Figure Zooming and Panning	✘	✘	✘	✘
Presenter mode	✔	✔	✔	✔

2. JavaScript-Based Slide Decks

Node-based, HTML, CSS, and JavaScript-driven, Interactive:

Shower [2010-]
Reveal.js [2011-]
Deck.js [2011-2016]

impress.js [2011-]
Bespoke.js [2014-2020]
Inspire.js [2018-]

a) Shower [2010-]

<section class="slide">
  <h2>Shower Example Slide</h2>
    <div class="columns two">
      <ul>
        <li>Bullet Point 1</li>
        <li>Bullet Point 2</li>
        <li>Bullet Point 3</li>
      </ul>
    <div class="image">
      <img src="diagrams/diagram.svg" alt="Example Image">
    </div>
  </div>
</section>

Shower: Example Slide — Shower: Example slide.

Shower characteristics

Minimalist Design: Focuses on content rather than complex effects.
Responsive Layout: Adapts to different screen sizes and devices.
Interactive Navigation: Supports swipe, margin tap and touch navigation.
SVG Inclusion: Supports SVG vector graphics.
PDF Export: Supports PDF export .

Collaboration: Not supported.
Live Code Integration: Not supported.
PowerPoint Export: Not supported.
Figure Zooming and Panning: Not supported.

b) Reveal.js [2011-]

<body>
<div class="reveal">
  <div class="slides">
    <section>
    <h2 class="title">Reveal.js Example Slide</h2>
      <div class="columns two">
        <ul>
          <li>Bullet Point 1</li>
          <li>Bullet Point 2</li>
          <li>Bullet Point 3</li>
        </ul>
        <div class="image">
          <img src="diagrams/diagram.svg" alt="Reveal.js">
        </div>
      </div>
    </section>
  </div>
</div>

<script src="dist/reveal.js"></script>
<script src="plugin/notes/notes.js"></script>
<script>
Reveal.initialize({
hash: true,
});
</script>
</body>

Reveal.js: Example Slide — Reveal.js: Example slide.

Reveal.js Characteristics

Markdown Support: Can include Markdown content.
Code Syntax Highlighting: Syntax highlighting with highlight.js.
Auto-Animate: Automatically animate matching elements.
Swipe Navigation: Supports swipe navigation.
PDF Export: Supports export to PDF.
[Vertical Slides]: Slides can be vertically nested.

Collaboration: Not supported.
Live Code Integration: Not supported.
PowerPoint Export: Not supported.
Figure Zooming and Panning: Not supported.

c) Deck.js [2011-2016]

<div class="slide">
  <h1 class="title">Deck.js Example Slide</h1>
  <div class="columns two">
    <div class="bullets">
      <ul>
        <li>Bullet Point 1</li>
        <li>Bullet Point 2</li>
        <li>Bullet Point 3</li>
      </ul>
    </div>
    <div class="image">
      <img src="diagrams/diagram.svg" alt="Example Image">
    </div>
  </div>
</div>

<script src="jquery.min.js"></script>
<script src="core/deck.core.js"></script>

<script src="extensions/status/deck.status.js"></script>

<script>
  $(function() { $.deck('.slide');});
</script>

Deck.js: Example Slide — Deck.js: Example slide.

Deck.js characteristics

Nested Slides: Allows slides to be embedded within other slides.
Markdown Support: Supports Markdown Syntax.
Extensions and Plugins: Wide variety of extensions and plugins.
Interactive Navigation: Supports click, touch and swipe navigation.

Collaboration: Not supported.
Live Code Integration: Not supported.
PowerPoint Export: Not supported.
PDF Export: Not supported.
Figure Zooming and Panning: Not supported.

Comparison of JavaScript-Based Slide Decks

Table 2: Comparison of JavaScript-based slide deck tools.
Feature	Shower	Reveal.js	Deck.js	impress.js	Bespoke.js	Inspire.js
Collaborative	✘	✘	✘	✘	✘	✘
SVG Inclusion	✔	✔	✔	✔	✔	✔
Globally Change Bullet Spacing	✔	✔	✔	✔	✔	✔
Globally Change Bullet Indentation	✔	✔	✔	✔	✔	✔
Export as PDF	✔	✔	✘	✘	✔	✘
Export as HTML	✔	✔	✔	✔	✔	✔
Export as PowerPoint	✘	✘	✘	✘	✘	✘
Slide numbering	✔	✔	✔	✔	✔	✔
Live Code Integration	✘	✘	✘	✘	✘	✘
Open-source	✔	✔	✔	✔	✔	✔
Licence	MIT	MIT	MIT	MIT	MIT	MIT
First Release	2010-10-25	2011-06-07	2011-06-24	2011-12-28	2012-12-13	2018-09
Last Update	2024-10-25	2024-05-15	2016-05-04	2024-04-26	2020-09-08	2024-06-27
Popularity (GitHub stars)	4.8k	67.4k	5.4k	37.6k	4.7k	1.7k
Swipe Navigation	✔	✔	✔	✔	✔	✔
Margin Navigation	✔	✔	✔	✔	✔	✔
Figure Zooming and Panning	✘	✘	✘	✔	✔	✘
Presenter mode	✔	✔	✔	✔	✔	✔

3. Hosted Slide Decks

Cloud-based, real-time collaborative:

Google Slides [2006-]
Prezi [2009-]
Mentimeter [2014-]

Microsoft Sway [2015-]
Visme [2013-]
Zoho Show [2006-]

Google Slides characteristics

Collaboration: Supports real-time collaborative editing.
Google Workspace Integration: Integrates seamlessly with Google Drive, Sheets, and Docs.
Offline Editing: Supports offline editing with automatic syncing.
Version History: Track and restore previous versions of presentations.
Export Options: Supports export to PowerPoint and PDF formats.
Swipe Navigation: Supports swipe navigation.

SVG inclusion: Not supported.
Live Code integration: Not supported.
Globally Change Bullet Spacing: Not supported.
Figure Zooming and Panning: Not supported.

Prezi characteristics

Collaboration: Supports real-time collaboration.
Embedded Content: Supports embedding of videos, charts, and other multimedia elements.
Integration with Popular Tools: Seamless integration with tools such as Zoom, Microsoft Teams, and Slack.
Figure Zooming and Panning: Supports figure zooming and panning.
Non-Linear Navigation: Presentations do not have to follow a fixed order.

SVG inclusion: Not supported.
Live Code integration: Not supported.
Globally Change Bullet Spacing: Not supported.
Globally Change Bullet Indentation: Not supported.
Advanced Features: Advanced features restricted to paid plans.

Mentimeter characteristics

Accessibility: Participants can join and interact from any device.
Real-Time Results: Audience responses displayed live in real-time.
Integration: Seamless integration with PowerPoint, Google Slides, and other presentation software.
Data Visualisation: Responses can be visualised as charts, or graphs.
Reporting and Analytics: Detailed analytic reports and data export options.
SVG Inclusion: Supports SVG vector graphics.

Live Code Integration: Not supported.
Figure Zooming and Panning: Not supported.
Advanced Features: Advanced features restricted to paid plans.

Comparison of Hosted Slide Decks

Table 3: Comparison of hosted slide deck tools.
Feature	Google Slides	Zoho Show	Prezi	Visme	Mentimeter	Microsoft Sway
Collaborative	✔	✔	✔	✔	✔	✔
SVG Inclusion	✘	✘	✘	✔	✔	✘
Globally Change Bullet Spacing	✘	✔	✘	✘	✘	✘
Globally Change Bullet Indentation	✔	✔	✘	✘	✘	✘
Export as PDF	✔	✔	✔	✔	✔	✔
Export as HTML	✘	✔	✘	✔	✘	✘
Export as PowerPoint	✔	✔	✘	✔	✘	✘
Slide numbering	✔	✔	✔	✔	✘	✘
Live Code Integration	✘	✘	✘	✘	✘	✘
Open-source	✘	✘	✘	✘	✘	✘
Licence	Proprietary	Proprietary	Proprietary	Proprietary	Proprietary	Proprietary
First Release	2006-03-09	2006	2009-04-05	2013	2014	2014-08
Last Update	Frequent	Frequent	Frequent	Frequent	Frequent	Frequent
Popularity (Usage)	High	Medium	High	Medium	Medium	Medium
Swipe Navigation	✔	✔	✔	✔	✔	✔
Margin Navigation	✔	✔	✘	✘	✘	✘
Figure Zooming and Panning	✘	✘	✔	✘	✘	✔
Presenter mode	✔	✔	✔	✔	✔	✘

a) Rslidy [2019-]

<section>
  <h1>Rslidy Example Slide</h1>
  <div class="slide-content">
    <div class="bullets">
      <ul>
        <li>Bullet Point 1</li>
        <li>Bullet Point 2</li>
        <li>Bullet Point 3</li>
      </ul>
    </div>
    <div class="image">
      <img src="./images/example.svg" alt="Rslidy">
    </div>
  </div>
</section>

Rslidy: Example Slide — Rslidy: Example slide.

Rslidy Characteristics

Standard HTML5: Slides are created using standard HTML5 elements.
Responsive Design: Slides can be made responsive.
Interactive Navigation: Supports swipe, touch and margin tap navigation.
Live Code Integration: Supports live code integration.
SVG Inclusion: Supports SVG vector graphics.
Figure Zooming and Panning: Supports figure zooming and panning.

Collaboration: Not supported.
PowerPoint Export: Not supported.

Recommendations

Text-Based: Slidev.
- Developer-friendly.
- Live previews.
- Export Options (PDF, PNG, PowerPoint).
- Vue.js integration
- Requires Environment Setup.
- Dependency on Vue.js Ecosystem

Hosted: Google Slides.
- Cloud-based.
- Real-Time Collaboration.
- Version History.
- Offline Editing.
- No SVG Vector Graphics.
- Bullet Spacing and Indentation.

Recommendations

JavaScript-Based: Reveal.js.
- Extensive Plugin Ecosystem.
- Auto-Animate.
- PDF Export.
- [Vertical Slides].
- Requires HTML, CSS, and JavaScript Knowledge.
- No Figure Zooming and Panning.

Responsive: Rslidy.
- Responsive Design.
- Interactive Navigation.
- Advanced Image Viewer.
- Live Code Integration.
- Requires HTML, CSS, and JavaScript Knowledge.
- Limited Export Options.

Web-Based Slide Decks

Fabian Platzer

Graz University of Technology, Austria

Four Categories

1. Text-Based Slide Decks

a) Marp [2018-]

Marp Characteristics

b) Slidev [2021-]

Slidev Characteristics

Comparison of Text-Based Slide Decks

2. JavaScript-Based Slide Decks

a) Shower [2010-]

Shower characteristics

b) Reveal.js [2011-]

Reveal.js Characteristics

c) Deck.js [2011-2016]

Deck.js characteristics

Comparison of JavaScript-Based Slide Decks

3. Hosted Slide Decks

a) Google Slides [2006-]

Google Slides characteristics

b) Prezi [2009-]

Prezi characteristics

c) Mentimeter [2014-]

Mentimeter characteristics

Comparison of Hosted Slide Decks

4. Responsive Slide Decks

a) Rslidy [2019-]

Rslidy Characteristics

Recommendations

Recommendations

Thank you!