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
bash
pnpm create slidev # Create projectpnpm run dev # Start dev server (opens http://localhost:3030)pnpm run build # Build static SPApnpm 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
markdown
---theme: defaulttitle: My Presentation---# First SlideContent here---# Second SlideMore content<!--Presenter notes go here-->
--- 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 [blocked]
Animations
v-click, v-clicks, motion, transitions
core-animations [blocked]
Headmatter
Deck-wide configuration options
core-headmatter [blocked]
Frontmatter
Per-slide configuration options
core-frontmatter [blocked]
CLI Commands
Dev, build, export, theme commands
core-cli [blocked]
Components
Built-in Vue components
core-components [blocked]
Layouts
Built-in slide layouts
core-layouts [blocked]
Exporting
PDF, PPTX, PNG export options
core-exporting [blocked]
Hosting
Build and deploy to various platforms
core-hosting [blocked]
Global Context
nav,slidev, composables API
core-global-context [blocked]
Feature Reference
Code & Editor
Feature
Usage
Reference
Line highlighting
```ts {2,3}
code-line-highlighting [blocked]
Click-based highlighting
```ts {1|2-3|all}
code-line-highlighting [blocked]
Line numbers
lineNumbers: true or {lines:true}
code-line-numbers [blocked]
Scrollable code
{maxHeight:'100px'}
code-max-height [blocked]
Code tabs
::code-group (requires comark: true)
code-groups [blocked]
Monaco editor
```ts {monaco}
editor-monaco [blocked]
Run code
```ts {monaco-run}
editor-monaco-run [blocked]
Edit files
<<< ./file.ts {monaco-write}
editor-monaco-write [blocked]
Code animations
````md magic-move
code-magic-move [blocked]
TypeScript types
```ts twoslash
code-twoslash [blocked]
Import code
<<< @/snippets/file.js
code-import-snippet [blocked]
Diagrams & Math
Feature
Usage
Reference
Mermaid diagrams
```mermaid
diagram-mermaid [blocked]
PlantUML diagrams
```plantuml
diagram-plantuml [blocked]
LaTeX math
$inline$ or $$block$$
diagram-latex [blocked]
Layout & Styling
Feature
Usage
Reference
Canvas size
canvasWidth, aspectRatio
layout-canvas-size [blocked]
Zoom slide
zoom: 0.8
layout-zoom [blocked]
Scale elements
<Transform :scale="0.5">
layout-transform [blocked]
Layout slots
::right::, ::default::
layout-slots [blocked]
Scoped CSS
<style> in slide
style-scoped [blocked]
Global layers
global-top.vue, global-bottom.vue
layout-global-layers [blocked]
Draggable elements
v-drag, <v-drag>
layout-draggable [blocked]
Icons
<mdi-icon-name />
style-icons [blocked]
Animation & Interaction
Feature
Usage
Reference
Click animations
v-click, <v-clicks>
core-animations [blocked]
Rough markers
v-mark.underline, v-mark.circle
animation-rough-marker [blocked]
Drawing mode
Press C or config drawings:
animation-drawing [blocked]
Direction styles
forward:delay-300
style-direction [blocked]
Note highlighting
[click] in notes
animation-click-marker [blocked]
Syntax Extensions
Feature
Usage
Reference
Comark syntax
comark: true + {style="color:red"}
syntax-comark [blocked]
Block frontmatter
```yaml instead of ---
syntax-block-frontmatter [blocked]
Import slides
src: ./other.md
syntax-importing-slides [blocked]
Merge frontmatter
Main entry wins
syntax-frontmatter-merging [blocked]
Presenter & Recording
Feature
Usage
Reference
Recording
Press G for camera
presenter-recording [blocked]
Timer
duration: 30min, timer: countdown
presenter-timer [blocked]
Remote control
slidev --remote
presenter-remote [blocked]
Ruby text
notesAutoRuby:
presenter-notes-ruby [blocked]
Export & Build
Feature
Usage
Reference
Export options
slidev export
core-exporting [blocked]
Build & deploy
slidev build
core-hosting [blocked]
Build with PDF
download: true
build-pdf [blocked]
Cache images
Automatic for remote URLs
build-remote-assets [blocked]
OG image
seoMeta.ogImage or og-image.png
build-og-image [blocked]
SEO tags
seoMeta:
build-seo-meta [blocked]
Export prerequisite: pnpm add -D playwright-chromium is required for PDF/PPTX/PNG export. If export fails with a browser error, install this dependency first.