Slidev

Developer-focused slide deck tool from Anthony Fu. Author slides in one Markdown file, build with Vue + Vite, export to PDF/PPTX/PNG.

Table of Contents

Slidev is a presentation tool built for developers. You write the whole deck as a single Markdown file, split slides with ---, and drop in Vue components when plain Markdown is not enough. Created by Anthony Fu (the same person behind much of the Vue/Vite tooling ecosystem), it runs on Vue 3 + Vite, so the editing loop is hot-reload fast and the output is a real web app you can host anywhere. MIT licensed.

Slidev
Presentation slides for developers
https://sli.dev/
slidevjs/slidev
Source repo, MIT, 47k+ stars
https://github.com/slidevjs/slidev

What it is

A slide deck is one .md file. Each slide is a block separated by ---. Frontmatter at the top sets the theme and deck-level options; per-slide frontmatter sets the layout, transition, or class for that slide. The text stays plain Markdown, so the source is readable and diffable in git.

---
theme: seriph
title: My Deck
---

# First slide

Plain Markdown here.

---
layout: two-cols
---

# Left column

::right::

# Right column

When Markdown runs out, you embed Vue components directly in the slide body, including your own. That is the whole pitch: a writer's format for the easy 80%, a full framework underneath for the hard 20%.

Stack

Built on the modern Vue toolchain:

Layer Tool
Framework Vue 3
Dev server / build Vite
Styling UnoCSS (atomic, configurable)
Code highlighting Shiki (+ TwoSlash for TypeScript)
Live code editor Monaco
Animations @vueuse/motion
Drawing Drauu
Recording RecordRTC
Math KaTeX
Diagrams Mermaid
Icons Iconify (any icon set)

Core features

  • Code is the point. Shiki highlighting with the same engine VS Code uses, plus TwoSlash for real TypeScript type hover info inside snippets, and Monaco blocks you can edit and run live during the talk.
  • Click animations. v-click, v-clicks, and v-after reveal elements step by step. v-motion (from @vueuse/motion) drives enter/leave motion and slide transitions.
  • Presenter mode. Separate presenter view with notes, next-slide preview, and a timer. There is also an integrated editor and a VS Code extension.
  • Drawing and annotations. Draw on slides live (Drauu); annotations persist.
  • Recording. Built-in camera view and screen recording via RecordRTC.
  • LaTeX, Mermaid, PlantUML. Math via KaTeX, diagrams via Mermaid, plus PlantUML support.
  • Layouts, themes, addons. Pick a layout per slide, install themes as npm packages, extend with addons.
  • Export and host. Export to PDF, PPTX, or PNG, or build to a static SPA and host it (Netlify, Vercel, GitHub Pages, any static host).

Getting started

npm init slidev@latest

That scaffolds a starter deck and opens the dev server. Edit slides.md, save, the browser updates.

Why it fits AI generation

The source is one Markdown file with --- separators. An LLM can emit a full deck as text in a single pass, no clicking through a slide editor, no binary format. Style is theme frontmatter plus UnoCSS classes, both plain text a model handles well. For agent-generated decks where you want code blocks, diagrams, and real layout control, the Markdown-first source is the draw.

The cost: Slidev needs Node and a build step. The model emits the .md, but turning it into a deck means npm and a Vite build. That is heavier than a zero-build tool.

How it compares

| | reveal.js | Slidev | Marp |
| - | - | - |
| Source | HTML (or Markdown plugin) | Markdown + Vue | Markdown |
| Stack | vanilla JS lib | Vue 3 + Vite | Marp CLI / VS Code |
| Build step | none (script tag) | yes (Node + Vite) | light (CLI) |
| Code highlighting | basic | Shiki + TwoSlash | basic |
| Live coding | no | yes (Monaco) | no |
| Interactivity | manual JS | Vue components | minimal |
| Export | print to PDF | PDF / PPTX / PNG | PDF / PPTX / HTML |
| Best for | full web control, custom HTML | developer talks, code-heavy decks | fast plain-Markdown decks |

  • vs reveal.js: reveal.js is the older, lighter, framework-free option you can drop in with a script tag and shape with raw HTML/CSS. Slidev trades that simplicity for a real toolchain and far better developer ergonomics (code highlighting, live coding, Vue components). Reach for reveal.js when you want full HTML control and no build; reach for Slidev for code-heavy technical talks.
  • vs Marp: Marp is the lightest of the three, also Markdown-first, with a thin CLI and no framework. Slidev is the heavier, more capable sibling: interactive components, live code, richer export. If you just need clean Markdown slides fast, Marp wins on simplicity. If you need interactivity and code tooling, Slidev wins on power.

My take

The right pick when the deck is about code and you live in the Node ecosystem already. Single-file Markdown source plus Vue escape hatch is the sweet spot, and it is the most LLM-friendly of the three for generating a deck from a prompt. The build step is the tax: if a teammate just wants a quick deck and has no Node setup, Marp or reveal.js is less friction.

Further reading