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 highlightingts {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 codets {monaco-run}
editor-monaco-run
Edit files
<<< ./file.ts {monaco-write}
editor-monaco-write
Code animations
`md magic-move
code-magic-move
TypeScript typests twoslash
code-twoslash
Import code
<<< @/snippets/file.js
code-import-snippet
Diagrams & Math
Feature
Usage
Reference
Mermaid diagrams
mermaid
diagram-mermaid
PlantUML diagramsplantuml
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