Slidev Presentation Builder
Build developer-focused presentations with Slidev — Markdown-driven slides with live code, syntax highlighting, Monaco editor embeds, Mermaid/PlantUML diagrams, LaTeX math, click-based animations, and presenter notes, plus a quick-reference table for the exact syntax each feature needs.
PowerPoint can't run your code live, animate a diff line-by-line, or render a Mermaid diagram from a code block — Slidev builds slides from Markdown with Vite and Vue underneath, so a conference talk or code walkthrough stays version-controlled text instead of a fragile binary file nobody can diff.
Who it's for: developers preparing a conference talk, workshop, or internal tech talk with live code examples, engineers who want presenter notes and slides in the same version-controlled Markdown file, teams building teaching materials with runnable code snippets and diagrams, anyone tired of PowerPoint for anything code-heavy
Example
"Build a conference talk about our new API with live code examples" → A Slidev project scaffolded with pnpm create slidev, slides written in Markdown with --- separators, syntax-highlighted and click-revealed code blocks using the {1|2-3|all} line-highlighting syntax, a Mermaid architecture diagram embedded directly in a code fence, and a PDF export via pnpm run export for sharing afterward
New here? 3-minute setup guide → | Already set up? Copy the template below.
# Slidev — Presentation Slides for Developers
Create and present web-based slidedecks for developers using Slidev, a slides maker built on Vite, Vue, and Markdown. Use it for technical presentations, conference talks, code walkthroughs, teaching materials, and developer decks — anything that benefits from live code, syntax highlighting, math, and diagrams over a traditional slide tool.
## When to Use
- Technical presentations or slidedecks with live code examples.
- Syntax-highlighted code snippets with animations.
- Interactive demos (Monaco editor, runnable code).
- Mathematical equations (LaTeX) or diagrams (Mermaid, PlantUML).
- Recording presentations with presenter notes.
- Exporting to PDF, PPTX, or hosting as a standalone SPA.
- Code walkthroughs for developer talks or workshops.
## Quick Start
```bash
pnpm create slidev # Create project
pnpm run dev # Start dev server (opens http://localhost:3030)
pnpm run build # Build static SPA
pnpm run export # Export to PDF (requires playwright-chromium)
```
Verify: after `pnpm run dev`, confirm slides load at `http://localhost:3030`. After `pnpm run export`, check the output PDF exists in the project root.
## Basic Syntax
```md
---
theme: default
title: My Presentation
---
# First Slide
Content here
---
# Second Slide
More content
<!--
Presenter notes go here
-->
```
- `---` separates slides.
- The first frontmatter block is the headmatter (deck-wide config).
- HTML comments are presenter notes, visible only in presenter mode.
## Quick Reference
### Code & Editor
| Feature | Usage |
|---|---|
| Line highlighting | ` ```ts {2,3} ` |
| Click-based highlighting | ` ```ts {1\|2-3\|all} ` |
| Line numbers | `lineNumbers: true` or `{lines:true}` |
| Scrollable code | `{maxHeight:'100px'}` |
| Code tabs | `::code-group` (requires `comark: true`) |
| Monaco editor | ` ```ts {monaco} ` |
| Run code | ` ```ts {monaco-run} ` |
| Edit files | `<<< ./file.ts {monaco-write}` |
| Code animations (magic move) | ` ````md magic-move ` |
| TypeScript types (twoslash) | ` ```ts twoslash ` |
| Import code | `<<< @/snippets/file.js` |
### Diagrams & Math
| Feature | Usage |
|---|---|
| Mermaid diagrams | ` ```mermaid ` |
| PlantUML diagrams | ` ```plantuml ` |
| LaTeX math | `$inline$` or `$$block$$` |
### Layout & Styling
| Feature | Usage |
|---|---|
| Canvas size | `canvasWidth`, `aspectRatio` |
| Zoom slide | `zoom: 0.8` |
| Scale elements | `<Transform :scale="0.5">` |
| Layout slots | `::right::`, `::default::` |
| Scoped CSS | `<style>` in slide |
| Global layers | `global-top.vue`, `global-bottom.vue` |
| Draggable elements | `v-drag`, `<v-drag>` |
| Icons | `<mdi-icon-name />` |
### Animation & Interaction
| Feature | Usage |
|---|---|
| Click animations | `v-click`, `<v-clicks>` |
| Rough markers | `v-mark.underline`, `v-mark.circle` |
| Drawing mode | Press `C`, or `drawings:` config |
| Direction styles | `forward:delay-300` |
| Note highlighting | `[click]` in notes |
## Common Slide Layouts
Built-in layouts cover the standard deck structure: `cover`, `intro`, `section`, `two-cols`, `center`, `quote`, `fact`, `full`, `image-left`/`image-right`, `iframe`, `end`. Set one per slide via frontmatter: `layout: two-cols`.
## Headmatter vs. Frontmatter
- **Headmatter** — the very first frontmatter block in the file. Deck-wide settings: `theme`, `title`, `canvasWidth`, `transition`, `drawings`, `download`.
- **Frontmatter** — any `---`-delimited block before a slide's content. Per-slide settings: `layout`, `class`, `zoom`, `clicks`, `transition`.
## Presenter Mode
Run `pnpm run dev` and open `/presenter/` for a presenter view with notes, a timer, and a next-slide preview. Presenter notes live as HTML comments directly under each slide's content.
Get new playbooks like this one
One email a week with new Claude Code workflows. Free, like everything here.
No spam. Unsubscribe anytime.
What This Does
A quick-reference guide for Slidev, the Vite/Vue/Markdown-based slide tool built specifically for developers, covering the full range of what makes it different from a general-purpose presentation tool: live, runnable code blocks (including an embedded Monaco editor and a "monaco-run" mode), line-by-line and click-revealed syntax highlighting, Mermaid and PlantUML diagrams rendered straight from a code fence, LaTeX math, and Magic Move animations that morph one code block into the next. The core syntax is minimal — --- separates slides, the first frontmatter block sets deck-wide config, HTML comments become presenter notes — and a quick-reference table maps every notable feature (code tabs, draggable elements, scoped per-slide CSS, layout slots, click animations, rough-marker annotations) to its exact Markdown or frontmatter syntax.
It also covers the practical mechanics of shipping a deck: the dev server for live editing, the presenter mode (with notes, a timer, and a next-slide preview) that runs alongside the audience-facing view, PDF export via a headless Chromium build, and building a standalone SPA for hosting the deck as a website. Built-in layouts (cover, two-cols, center, quote, image-left, and more) cover the standard structural needs of a talk without custom CSS.
Quick Start
Step 1: Create a Project Folder
mkdir slidev-talk && cd slidev-talk
Step 2: Download the Template
Click Download above, then:
mv ~/Downloads/CLAUDE.md ./
Step 3: Build a Deck
claude
Ask Claude to scaffold a Slidev presentation on your topic, add live code examples, embed a diagram, or set up presenter notes. It will use pnpm create slidev to bootstrap the project and write slides in the correct Markdown syntax for whichever features the talk needs.
Tips & Best Practices
- Keep presenter notes (the HTML comments under each slide) genuinely useful during the actual talk — timing cues, the point you're trying to land, or a reminder of what to demo next, not a transcript of the slide content.
- Use click-based line highlighting (
{1|2-3|all}) instead of separate slides when walking through a code block step by step — it keeps the audience oriented on one piece of code instead of re-parsing a new slide each time. - Export to PDF early and check it renders correctly — some interactive features (Monaco, draggable elements, drawing mode) don't have a meaningful static PDF equivalent, and it's better to know that before the day of the talk.
Limitations
- PDF export requires
playwright-chromiumand a working headless-browser environment — CI or sandboxed environments without browser support will need that dependency installed separately. - Interactive features (live-runnable Monaco code, draggable elements, drawing mode) only work in the live dev-server or hosted SPA view, not in a static PDF or PPTX export.
- Best suited to developer-audience talks that benefit from code and diagrams; a purely visual or narrative deck may not gain much over a conventional slide tool.