TL;DR: Slidev is the Vue-powered presentation framework — Markdown slides with Vue components, code highlighting with animations, presenter mode, and recording built in. Marp is the Markdown-to-slide converter — write Markdown, export to HTML/PDF/PPTX, integrate with VS Code, and keep presentations in version control. Reveal.js is the original HTML presentation framework — plugin ecosystem, speaker notes, multiplexing, and the most customizable option for complex slide decks. In 2026: Slidev for interactive developer presentations with live code, Marp for simple Markdown-to-PDF slide decks, Reveal.js for maximum customization and plugin ecosystem.

Key Takeaways

Slidev: Vue 3 + Vite powered. Markdown + Vue components, Shiki code highlighting with line animations, LaTeX math, presenter mode, recording. Best for developer conference talks with live code demos
Marp: Pure Markdown → slides. VS Code extension, CLI for HTML/PDF/PPTX export, theme engine, directives for styling. Best for quick slide decks from Markdown with zero setup
Reveal.js: HTML/Markdown framework. Plugin architecture, speaker notes, auto-animate, multiplexing, PDF export. Best for highly customized presentations with complex animations

Slidev — Vue-Powered Presentations

Slidev combines Markdown simplicity with Vue component power — write slides in Markdown, embed interactive components, and present with live code.

Basic Slide Deck

---
theme: default
title: Building APIs with Hono
info: |
  ## Building APIs with Hono
  A talk about modern API development
class: text-center
drawings:
  persist: false
transition: slide-left
mdc: true
---

# Building APIs with Hono

The lightweight framework for every runtime

<div class="abs-br m-6 flex gap-2">
  <a href="https://github.com/honojs/hono" target="_blank">
    <carbon-logo-github class="text-xl" />
  </a>
</div>

---
transition: fade-out
---

# Why Hono?

- 🚀 **Fast** — Built on Web Standards
- 🌐 **Universal** — Runs on Cloudflare, Deno, Bun, Node.js
- 📦 **Tiny** — ~14KB, zero dependencies
- 🔒 **Type-safe** — Full TypeScript support

---
layout: two-cols
layoutClass: gap-16
---

# Setup

Install and create a Hono app in seconds.

::right::

```ts {all|1|3-5|7-9|all}
import { Hono } from 'hono'

const app = new Hono()

app.get('/', (c) => c.json({ hello: 'world' }))

export default app

layout: center class: text-center

Demo Time

Q: Why Hono?

🚀 Fast — Built on Web Standards 🌐 Universal — Cloudflare, Deno, Bun, Node.js 📦 Tiny — ~14KB, zero dependencies 🔒 Type-safe — Full TypeScript support ---

Feature Comparison

Feature	Hono	Express	Fastify
Bundle Size	14KB	200KB	2MB
TypeScript	Native	@types	Native
Runtime	Any	Node.js	Node.js

layout: end

Thank You!

Slides · GitHub


### Code Highlighting with Animations

```markdown
---

# Code Walkthrough

Step through code line by line:

```ts {1|2-4|6-10|all}
import { Hono } from 'hono'

// Create app instance
const app = new Hono()

// Define routes with type safety
app.get('/users/:id', async (c) => {
  const id = c.req.param('id')
  const user = await getUser(id)
  return c.json(user)
})

// Start server
export default app

Diff Highlighting

Show code changes:

// Before
app.get('/users', (c) => {
  const users = db.getAll()
  return c.json(users)
})
~~~
// After
app.get('/users', async (c) => {
  const users = await db.getAll()
  return c.json(users, 200, {
    'Cache-Control': 'max-age=60'
  })
})


### Vue Components in Slides

```vue
<!-- components/Counter.vue — used directly in slides -->
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <div class="flex items-center gap-4">
    <button @click="count--" class="btn">-</button>
    <span class="text-4xl font-bold">{{ count }}</span>
    <button @click="count++" class="btn">+</button>
  </div>
</template>

<!-- In your slide markdown: -->
<!-- <Counter /> -->

---

# Interactive Demo

<Counter />

Click the buttons — this is a live Vue component in your slides!

---

# Live API Demo

<div v-click>

```ts
const response = await fetch('/api/demo')
const data = await response.json()

Result:


### CLI and Export

```bash
# Install and create a project
npm init slidev@latest my-talk

# Start dev server with hot reload
npx slidev

# Build for production (SPA)
npx slidev build

# Export to PDF
npx slidev export

# Export to PNG images
npx slidev export --format png

# Record presentation
npx slidev --record
# Presenter camera + slides recorded together

# Deploy to Netlify/Vercel
npx slidev build
# Upload dist/ folder

Marp — Markdown to Slides

Marp converts Markdown to presentation slides — write in VS Code, export to HTML, PDF, or PowerPoint.

Basic Slide Deck

---
marp: true
theme: default
paginate: true
header: "Building APIs with Hono"
footer: "Your Name — March 2026"
---

# Building APIs with Hono

The lightweight framework for every runtime

---

## Why Hono?

- 🚀 **Fast** — Built on Web Standards
- 🌐 **Universal** — Cloudflare, Deno, Bun, Node.js
- 📦 **Tiny** — ~14KB, zero dependencies
- 🔒 **Type-safe** — Full TypeScript support

---

## Quick Setup

```ts
import { Hono } from 'hono'

const app = new Hono()

app.get('/', (c) => c.json({ hello: 'world' }))

export default app

Feature Comparison

Feature	Hono	Express	Fastify
Bundle Size	14KB	200KB	2MB
TypeScript	Native	@types	Native
Runtime	Any	Node.js	Node.js

Thank You!

@yourhandle


### Directives and Styling

```markdown
---
marp: true
theme: uncover
style: |
  section {
    background-color: #1a1a2e;
    color: #eee;
  }
  h1 {
    color: #0fd;
  }
  code {
    background: #16213e;
  }
  section.lead {
    text-align: center;
  }
  section.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2em;
  }
---

<!-- _backgroundColor: #0d1117 -->
<!-- _color: white -->

# Dark Slide

This slide has a custom dark background.

---

<!-- _class: split -->

# Two Columns

Left content here with explanation text.

Right content here with code example:

```ts
const app = new Hono()

bg right:40%

Background Images

Marp supports background images with positioning:

bg — full background
bg right:40% — right 40%
bg left — left half
bg contain — fit inside
bg cover — cover entire slide

Math Support

Inline: $E = mc^2$

Block:

$$ \sum_{i=1}^{n} x_i = x_1 + x_2 + \ldots + x_n $$


### Custom Theme

```css
/* themes/company.css */
/* @theme company */

@import 'default';

section {
  font-family: 'Inter', sans-serif;
  background: #0a0a0a;
  color: #e0e0e0;
}

h1 {
  color: #0fd;
  font-size: 2.5em;
  border-bottom: 3px solid #0fd;
  padding-bottom: 0.3em;
}

h2 {
  color: #0fd;
  font-size: 1.8em;
}

code {
  background: #1a1a2e;
  border-radius: 4px;
  padding: 2px 6px;
}

pre code {
  font-size: 0.8em;
  line-height: 1.5;
}

section.lead {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

CLI and Export

# Install Marp CLI
npm install -g @marp-team/marp-cli

# Convert to HTML
marp slides.md -o slides.html

# Convert to PDF
marp slides.md -o slides.pdf

# Convert to PowerPoint
marp slides.md -o slides.pptx

# Convert to PNG images
marp slides.md --images png

# Watch mode with live preview
marp slides.md -w --preview

# Use custom theme
marp slides.md --theme themes/company.css -o slides.pdf

# Serve with hot reload
marp -s slides.md

# VS Code Extension — Marp for VS Code
# Preview slides directly in VS Code editor
# Export from command palette

Reveal.js — HTML Presentation Framework

Reveal.js is the original web-based presentation framework — HTML/Markdown slides with plugins, animations, and speaker notes.

Basic Presentation

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="dist/reveal.css" />
  <link rel="stylesheet" href="dist/theme/dracula.css" />
  <link rel="stylesheet" href="plugin/highlight/monokai.css" />
</head>
<body>
  <div class="reveal">
    <div class="slides">
      <section>
        <h1>Building APIs with Hono</h1>
        <p>The lightweight framework for every runtime</p>
      </section>

      <section>
        <h2>Why Hono?</h2>
        <ul>
          <li class="fragment">🚀 Fast — Web Standards</li>
          <li class="fragment">🌐 Universal — Any runtime</li>
          <li class="fragment">📦 Tiny — 14KB</li>
          <li class="fragment">🔒 Type-safe</li>
        </ul>
      </section>

      <section data-auto-animate>
        <pre data-id="code"><code data-trim data-line-numbers>
import { Hono } from 'hono'
const app = new Hono()
        </code></pre>
      </section>

      <section data-auto-animate>
        <pre data-id="code"><code data-trim data-line-numbers="|3-5">
import { Hono } from 'hono'
const app = new Hono()

app.get('/', (c) => {
  return c.json({ hello: 'world' })
})
        </code></pre>
      </section>

      <section>
        <h2>Feature Comparison</h2>
        <table>
          <thead><tr><th>Feature</th><th>Hono</th><th>Express</th></tr></thead>
          <tbody>
            <tr><td>Size</td><td>14KB</td><td>200KB</td></tr>
            <tr class="fragment"><td>TypeScript</td><td>Native</td><td>@types</td></tr>
          </tbody>
        </table>
      </section>

      <section>
        <h2>Thank You!</h2>
        <aside class="notes">
          Remember to mention the GitHub repo and demo link.
        </aside>
      </section>
    </div>
  </div>

  <script src="dist/reveal.js"></script>
  <script src="plugin/highlight/highlight.js"></script>
  <script src="plugin/notes/notes.js"></script>
  <script src="plugin/math/math.js"></script>
  <script>
    Reveal.initialize({
      hash: true,
      plugins: [RevealHighlight, RevealNotes, RevealMath.KaTeX],
      transition: 'slide',
      slideNumber: true,
    });
  </script>
</body>
</html>

Markdown Content in Reveal.js

<!-- Use Markdown inside Reveal.js slides -->
<section data-markdown>
  <textarea data-template>
    ## Slide 1

    Write slides in **Markdown** within Reveal.js.

    ---

    ## Code Example

    ```ts [1|2-4|6]
    import { Hono } from 'hono'

    const app = new Hono()

    app.get('/', (c) => c.json({ hello: 'world' }))

    export default app
    ```

    ---

    ## Fragments

    - Item 1 <!-- .element: class="fragment" -->
    - Item 2 <!-- .element: class="fragment" -->
    - Item 3 <!-- .element: class="fragment" -->
  </textarea>
</section>

<!-- External Markdown file -->
<section
  data-markdown="slides.md"
  data-separator="^\n---\n"
  data-separator-vertical="^\n--\n"
  data-separator-notes="^Note:"
></section>

Programmatic API

// Initialize with full configuration
import Reveal from "reveal.js";
import Markdown from "reveal.js/plugin/markdown/markdown";
import Highlight from "reveal.js/plugin/highlight/highlight";
import Notes from "reveal.js/plugin/notes/notes";
import Math from "reveal.js/plugin/math/math";

const deck = new Reveal({
  plugins: [Markdown, Highlight, Notes, Math],
  hash: true,
  transition: "convex",
  slideNumber: "c/t",
  autoAnimateDuration: 0.7,
  pdfMaxPagesPerSlide: 1,

  // Multiplexing — control from one device, view on others
  multiplex: {
    secret: "presenter-secret",
    id: "presentation-id",
    url: "https://reveal-multiplex.glitch.me/",
  },
});

deck.initialize().then(() => {
  // Listen to slide change events
  deck.on("slidechanged", (event) => {
    console.log(`Slide ${event.indexh}.${event.indexv}`);
    trackSlideView(event.indexh);
  });

  // Navigate programmatically
  deck.slide(2, 0); // Go to slide 3

  // Get total slides
  console.log(`Total: ${deck.getTotalSlides()}`);
});

Feature Comparison

Feature	Slidev	Marp	Reveal.js
Content Format	Markdown + Vue	Pure Markdown	HTML + Markdown
Framework	Vue 3 + Vite	Marpit engine	Vanilla JS
Code Highlighting	Shiki (line animations)	Prism/Shiki	highlight.js
Line-by-Line Code	✅ (animated)	❌	✅ (data-line-numbers)
Live Components	✅ (Vue components)	❌	✅ (HTML/JS)
Animations	Vue transitions + v-click	❌	Auto-animate + fragments
Speaker Notes	✅ (presenter mode)	❌	✅ (speaker view)
Recording	✅ (built-in)	❌	❌
Math/LaTeX	✅ (KaTeX)	✅ (KaTeX/MathJax)	✅ (KaTeX/MathJax)
Themes	Built-in + custom	Built-in + CSS	Built-in + custom
PDF Export	✅	✅	✅
PPTX Export	❌	✅	❌
VS Code Integration	❌	✅ (extension)	❌
Plugin Ecosystem	Vue ecosystem	Limited	Rich (multiplex, etc.)
Multiplexing	❌	❌	✅ (remote control)
SPA Deploy	✅ (Vite build)	✅ (HTML)	✅ (HTML)
Hot Reload	✅	✅ (watch mode)	Manual
Learning Curve	Medium (Vue knowledge helps)	Low	Medium-High
Best For	Dev conference talks	Quick Markdown slides	Customized presentations

When to Use Each

Choose Slidev if:

You're giving developer conference talks with live code demos
Vue components for interactive elements add value to your slides
Step-by-step code walkthroughs with line highlighting are important
Built-in recording for asynchronous talks is useful
You want the best developer presentation experience with hot reload

Choose Marp if:

You want the simplest Markdown-to-slides workflow
VS Code integration for editing and previewing is important
PowerPoint export (PPTX) is needed for corporate environments
Version-controlled Markdown presentations fit your workflow
Minimal setup — write Markdown, export, present

Choose Reveal.js if:

Maximum customization with HTML, CSS, and JavaScript is needed
The plugin ecosystem (multiplexing, custom plugins) matters
Auto-animate transitions between slides create visual impact
Speaker notes with a separate presenter view are essential
You want full control over every aspect of the presentation

Developer Experience Comparison

The day-to-day workflow differs significantly between the three tools.

Slidev has the most sophisticated development workflow. Running slidev starts a Vite-powered dev server that hot-reloads slides on save. The presenter view opens in a separate window with speaker notes, slide progress, and timer. The presenter view and audience view are synchronized — presenter navigation controls what the audience sees. For conference talks, this workflow is genuinely polished.

The learning curve for Slidev is steeper than the others. The Markdown syntax includes custom directives (::: left, ::: right for layouts, <v-click> for progressive revelation) that aren't standard Markdown. Understanding how Vue components integrate into slides requires some Vue knowledge. For developers already in the Vue ecosystem, this is minimal friction. For developers unfamiliar with Vue, the learning investment is real.

Marp has the flattest learning curve of the three. If you know CommonMark Markdown, you know 95% of Marp. The only Marp-specific elements are the frontmatter directives (theme, paginate, backgroundColor) and the --- slide separator. The VS Code Marp extension provides instant preview as you type. Export to PDF, PowerPoint, or HTML is one command.

Reveal.js has the highest ceiling and the highest floor. HTML slides with nested section elements give complete control over slide structure and animation, but require knowledge of HTML/CSS to use effectively. The JavaScript API for programmatic control (auto-advancing slides, syncing with audio, building interactive demos) is powerful but requires reading documentation. Teams that need custom interactions — live code execution in slides, real-time data, interactive charts — can achieve it in Reveal.js in ways the other tools don't support.

Building Technical Talks With Code

All three tools support syntax-highlighted code blocks, but their approach to code presentation differs meaningfully.

Slidev's shiki integration gives the highest quality code highlighting with support for themes from VS Code's extension marketplace. The {1,3-5} line highlighting syntax lets you specify which lines to highlight within a code block. Combined with <v-click> directives, you can progressively highlight different lines of the same code block on successive clicks — a pattern common in talks that walk through code step by step.

For developers presenting code that actually runs, Slidev's Vue integration enables embedding running React components, fetching live data, or showing interactive examples directly in slides. This transforms presentations from static screenshots to live demonstrations. The Vite vs Rspack vs webpack bundler comparison is an example of the kind of technical content that translates well into an interactive Slidev presentation with live bundle visualization.

Marp's code highlighting uses highlight.js, which covers the common languages well but lacks some of the IDE-style precision of Shiki. For most conference talks, this difference is invisible to the audience. Reveal.js uses highlight.js by default but supports Shiki via plugin.

For teams building developer-focused content, the choice of presentation tool connects to the broader technical writing and documentation workflow. The best monorepo tools 2026 covers tools like Turborepo and Nx that can manage presentation source files alongside the code they demo.

Hosting and Distribution

Slidev and Reveal.js both output standalone HTML that can be hosted on any static hosting platform. Vercel, Netlify, and GitHub Pages all work. Slidev presentations are Vite applications under the hood, so the static build output is a standard HTML/CSS/JS bundle. Reveal.js presentations are similarly a directory of HTML, CSS, and JavaScript.

Marp's strongest distribution feature is its PDF and PowerPoint export. For presentations destined for corporate environments where slides are emailed or uploaded to shared drives rather than linked, Marp's native PPTX export is uniquely practical. The PPTX output isn't editable in PowerPoint (it's basically a PowerPoint with embedded slide images), but it satisfies the "I need to share a PowerPoint" requirement without leaving the Markdown workflow.

Ecosystem & Community

Slidev (30k+ GitHub stars as of 2026) is maintained by Anthony Fu, a Vue core team member, and benefits from deep Vue ecosystem integration. The Slidev themes repository has 50+ community themes ranging from minimal academic styles to vibrant developer conference looks. Because Slidev is a Vite-powered application, it has access to the entire Vite plugin ecosystem — you can use any npm package directly in your slides, which is a genuinely powerful capability for technical talks.

Marp's ecosystem is more focused. The core tools — Marp Core, Marp CLI, and the VS Code extension — are well-maintained by Yuki Hattori. The VS Code extension has over 2 million installs, making it one of the most-used presentation tools in the editor. The simplicity is the feature: Marp does one thing (Markdown to slides) and does it reliably. The community maintains additional themes and the Marp team publishes regular updates.

Reveal.js is the oldest and most widely used of the three, with 67k+ GitHub stars. It's been the foundation for countless conference presentation systems and is used by major companies for internal presentation tooling. The ecosystem includes community-maintained plugins for everything from quiz integration to webcam overlays. Hakim El Hattab, the creator, continues to actively maintain it.

For developer advocates and conference speakers, Slidev has become the de facto standard. When you see a conference talk with animated code walkthroughs and live component demos, it's almost certainly built with Slidev.

Real-World Adoption

Slidev is the dominant tool for technical conference talks in the Vue, Vite, and broader JavaScript community. Talks at VueConf, ViteConf, and similar events are routinely built with Slidev. The ability to deploy slides as a Vite SPA to Netlify or Vercel means presentations have permanent URLs — useful for sharing after a talk.

Marp sees heavy adoption in academia, corporate training, and documentation teams. Its PowerPoint export is critical for environments where PPTX is the required format for HR, legal, or executive presentations. Version-controlled Markdown presentations fit naturally into docs-as-code workflows, and Marp integrates well with CI/CD pipelines that need to generate slides from Markdown automatically.

Reveal.js powers many commercial presentation services. Slides.com, one of the more popular online presentation tools, is built on Reveal.js. The multiplexing feature — where a presenter controls slides from one device while an audience follows on their own devices — is used extensively in hybrid-remote workshop settings.

Developer Experience Deep Dive

Slidev's hot reload is exceptional. Change a line in your Markdown and the slide updates instantly without losing your current position. The Monaco editor integration means you can embed actual VS Code instances in slides for live coding demos — not just syntax-highlighted code blocks. The presenter mode shows your current slide, next slide, speaker notes, and a timer simultaneously in a separate window.

The TypeScript support in Slidev deserves mention. Because it's a Vite application, you get full TypeScript support in Vue components embedded in slides. If you're demonstrating a TypeScript API, you can embed a component that actually calls the API and shows live results, with full type safety in the component code.

Marp's developer experience centers on the VS Code extension. The split-panel preview (write Markdown on the left, see slides on the right) is the cleanest Markdown presentation workflow available. Export to PDF works via Puppeteer behind the scenes — the output quality is publication-grade.

Reveal.js requires the most technical investment but rewards it with the most control. Building a custom Reveal.js presentation feels like building a website — you have full access to HTML, CSS, and JavaScript. For teams with web developers who want pixel-perfect, highly interactive presentations, this freedom is valuable.

Performance & File Size

Slidev builds to a Vite SPA, typically 1-3 MB for a standard developer presentation. The build output is fully static and deploys to any CDN. PDF export uses Playwright to capture each slide, producing high-quality vector PDFs. Build time for a 30-slide deck is typically 5-10 seconds.

Marp produces the smallest output files. A 20-slide presentation exports to an HTML file of ~200KB or a PDF of ~500KB. The PPTX export produces files compatible with Microsoft Office and Google Slides. The CLI is fast: generating a PDF from a Markdown file takes 2-3 seconds on typical hardware.

Reveal.js's output size depends on how much you customize it. A basic presentation using the CDN links adds no local files. A self-hosted production build with all plugins is typically 1-2 MB. The framework itself loads in under 100ms, which is important for live presentations where you don't want to wait for the page to load before your talk begins.

Migration Guide

Moving from PowerPoint or Google Slides to any of these tools requires a workflow change. The key insight is that you're trading visual drag-and-drop editing for text-based authoring with code-quality collaboration workflows (git, pull requests, code review on your slides).

For teams starting with Marp, the migration is gentlest — export your existing slides as Markdown-like text, structure them with --- separators, and the bulk of your content is already there. For conference speakers moving to Slidev, the investment in learning Vue-component-based slides pays off in presentation quality but requires a half-day to get comfortable.

For those currently using basic Reveal.js and wanting richer code highlighting, Slidev is the natural upgrade path. The concept of slides-as-code transfers directly; you're just gaining Vue component support and better developer tooling.

Final Verdict 2026

Slidev is the best choice for developer conference talks and technical presentations where code is central. The animated line-by-line code walkthroughs, Vue component integration, and built-in recording capability make it the premium option for technical speakers in 2026.

Marp is the best choice for anyone who wants slides from Markdown with minimal friction. If you write documentation in Markdown and need to turn it into a presentation, Marp is a 5-minute install away from a finished slide deck. The VS Code integration and PowerPoint export cover the majority of presentation scenarios.

Reveal.js is the best choice when you need maximum customization, the multiplexing feature for remote presentations, or want to build a presentation application rather than just a slide deck. Its longevity and plugin ecosystem make it the safe choice for long-term presentation infrastructure.

Methodology

Feature comparison based on Slidev v0.x, Marp CLI v3.x, and Reveal.js v5.x documentation as of March 2026. Slidev evaluated on Vue integration, code highlighting, and presenter features. Marp evaluated on Markdown simplicity and export formats. Reveal.js evaluated on plugin ecosystem, animations, and customization. Code examples use official APIs and configuration.

Related: Best JavaScript Testing Frameworks 2026 for testing the code you show in your slides, Hono vs Elysia 2026 for the web frameworks commonly featured in developer talks, and Best Monorepo Tools 2026 for managing presentation repositories alongside code.

Slidev vs Marp vs Reveal.js 2026

Key Takeaways

Slidev — Vue-Powered Presentations

Basic Slide Deck

layout: center class: text-center

Demo Time

Feature Comparison

layout: end

Thank You!

Diff Highlighting

Marp — Markdown to Slides

Basic Slide Deck

Feature Comparison

Thank You!

Background Images

Math Support

CLI and Export

Reveal.js — HTML Presentation Framework

Basic Presentation

Markdown Content in Reveal.js

Programmatic API

Feature Comparison

When to Use Each

Choose Slidev if:

Choose Marp if:

Choose Reveal.js if:

Developer Experience Comparison

Building Technical Talks With Code

Hosting and Distribution

Ecosystem & Community

Real-World Adoption

Developer Experience Deep Dive

Performance & File Size

Migration Guide

Final Verdict 2026

Methodology

The 2026 JavaScript Stack Cheatsheet