Slidev - Presentation Slides for Developers
Web-based slides maker built on Vite, Vue, and Markdown.
When to Use
Technical presentations 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
Quick Start
pnpm create slidev # Create project
pnpm run dev # Start dev server
pnpm run export # Export to PDF
`## Basic Syntax`
---
theme: default
title: My Presentation
---
# First Slide
Content here
---
# Second Slide
More content
<!--
Presenter notes go here
-->
--- separates slidesFirst frontmatter = headmatter (deck config)
HTML comments = presenter notes
Core References
Topic
Description
Reference
Markdown Syntax
Slide separators, frontmatter, notes, code blocks
Animations
v-click, v-clicks, motion, transitions
Headmatter
Deck-wide configuration options
Frontmatter
Per-slide configuration options
CLI Commands
Dev, build, export, theme commands
Components
Built-in Vue components
Layouts
Built-in slide layouts
Exporting
PDF, PPTX, PNG export options
Hosting
Build and deploy to various platforms
Global Context
n a v , nav, na v , slidev, composables API
Feature Reference
Code & Editor
Feature
Usage
Reference
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 mdc: true)
Monaco editor
````ts {monaco}`
Run code
````ts {monaco-run}`
Edit files
<<< ./file.ts {monaco-write}
Code animations
`````md magic-move`
TypeScript types
````ts twoslash`
Import code
<<< @/snippets/file.js
Diagrams & Math
Feature
Usage
Reference
Mermaid diagrams
````mermaid`
PlantUML diagrams
````plantuml`
LaTeX math
$inline$ or $block$
Layout & Styling
Feature
Usage
Reference
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
Reference
Click animations
v-click, <v-clicks>
Rough markers
v-mark.underline, v-mark.circle
Drawing mode
Press C or config drawings:
Direction styles
forward:delay-300
Note highlighting
[click] in notes
Syntax Extensions
Feature
Usage
Reference
MDC syntax
mdc: true + {style="color:red"}
Block frontmatter
````yamlinstead of---`
Import slides
src: ./other.md
Merge frontmatter
Main entry wins
Presenter & Recording
Feature
Usage
Reference
Recording
Press G for camera
Timer
duration: 30min, timer: countdown
Remote control
slidev --remote
Ruby text
notesAutoRuby:
Export & Build
Feature
Usage
Reference
Export options
slidev export
Build & deploy
slidev build
Build with PDF
download: true
Cache images
Automatic for remote URLs
OG image
seoMeta.ogImage or og-image.png
SEO tags
seoMeta:
Editor & Tools
Feature
Usage
Reference
Side editor
Click edit icon
VS Code extension
Install antfu.slidev
Prettier
prettier-plugin-slidev
Eject theme
slidev theme eject
Lifecycle & API
Feature
Usage
Reference
Slide hooks
onSlideEnter(), onSlideLeave()
Navigation API
$nav, useNav()
Common Layouts
Layout
Purpose
cover
Title/cover slide
center
Centered content
default
Standard slide
two-cols
Two columns (use ::right::)
two-cols-header
Header + two columns
image / image-left / image-right
Image layouts
iframe / iframe-left / iframe-right
Embed URLs
quote
Quotation
section
Section divider
fact / statement
Data/statement display
intro / end
Intro/end slides
Resources