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
6
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 | |