Home
slidev
antfu/skills
Create and present web-based slide decks using Slidev with Markdown, Vue components, code highlighting, animations, and interactive features. Ideal for technical presentations, conference talks, code walkthroughs, teaching materials, or developer decks.
...Expand all
50
Updated time September 7, 2026
Slidev - Presentation Slides for Developers
Web-based slides maker built on Vite, Vue, and Markdown.
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)
- Record presentations with presenter notes
- Export to PDF, PPTX, or host as SPA
- Code walkthroughs for developer talks or workshops
Quick Start
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
---
theme: default
title: My Presentation
---
# First Slide
Content here
---
# Second Slide
More content
---separates slides- First frontmatter = headmatter (deck config)
- HTML comments = presenter notes
Core References
| Topic | Description | Reference |
|---|---|---|
| Markdown Syntax | Slide separators, frontmatter, notes, code blocks | core-syntax |
| Animations | v-click, v-clicks, motion, transitions | core-animations |
| Headmatter | Deck-wide configuration options | core-headmatter |
| Frontmatter | Per-slide configuration options | core-frontmatter |
| CLI Commands | Dev, build, export, theme commands | core-cli |
| Components | Built-in Vue components | core-components |
| Layouts | Built-in slide layouts | core-layouts |
| Exporting | PDF, PPTX, PNG export options | core-exporting |
| Hosting | Build and deploy to various platforms | core-hosting |
| Global Context | $nav, $slidev, composables API | core-global-context |
Feature Reference
Code & Editor
| Feature | Usage | Reference |
|---|---|---|
| Line highlighting | ```ts {2,3} |
code-line-highlighting |
| Click-based highlighting | ```ts {1|2-3|all} |
code-line-highlighting |
| Line numbers | lineNumbers: true or {lines:true} |
code-line-numbers |
| Scrollable code | {maxHeight:'100px'} |
code-max-height |
| Code tabs | ::code-group (requires comark: true) |
code-groups |
| Monaco editor | ```ts {monaco} |
editor-monaco |
| Run code | ```ts {monaco-run} |
editor-monaco-run |
| Edit files | <<< ./file.ts {monaco-write} |
editor-monaco-write |
| Code animations | ````md magic-move |
code-magic-move |
| TypeScript types | ```ts twoslash |
code-twoslash |
| Import code | <<< @/snippets/file.js |
code-import-snippet |
Diagrams & Math
| Feature | Usage | Reference |
|---|---|---|
| Mermaid diagrams | ```mermaid |
diagram-mermaid |
| PlantUML diagrams | ```plantuml |
diagram-plantuml |
| LaTeX math | $inline$ or $$block$$ |
diagram-latex |
Layout & Styling
| Feature | Usage | Reference |
|---|---|---|
| Canvas size | canvasWidth, aspectRatio |
layout-canvas-size |
| Zoom slide | zoom: 0.8 |
layout-zoom |
| Scale elements | |
layout-transform |
| Layout slots | ::right::, ::default:: |
layout-slots |
| Scoped CSS | |