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 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 |
<Transform :scale="0.5"> |
layout-transform |
| Layout slots |
::right::, ::default:: |
layout-slots |
| Scoped CSS |
<style> in slide |
style-scoped |
| Global layers |
global-top.vue, global-bottom.vue |
layout-global-layers |
| Draggable elements |
v-drag, <v-drag> |
layout-draggable |
| Icons |
<mdi-icon-name /> |
style-icons |
Animation & Interaction
| Feature |
Usage |
Reference |
| Click animations |
v-click, <v-clicks> |
core-animations |
| Rough markers |
v-mark.underline, v-mark.circle |
animation-rough-marker |
| Drawing mode |
Press C or config drawings: |
animation-drawing |
| Direction styles |
forward:delay-300 |
style-direction |
| Note highlighting |
[click] in notes |
animation-click-marker |
Syntax Extensions
| Feature |
Usage |
Reference |
| Comark syntax |
comark: true + {style="color:red"} |
syntax-comark |
| Block frontmatter |
```yaml instead of --- |
syntax-block-frontmatter |
| Import slides |
src: ./other.md |
syntax-importing-slides |
| Merge frontmatter |
Main entry wins |
syntax-frontmatter-merging |
Presenter & Recording
| Feature |
Usage |
Reference |
| Recording |
Press G for camera |
presenter-recording |
| Timer |
duration: 30min, timer: countdown |
presenter-timer |
| Remote control |
slidev --remote |
presenter-remote |
| Ruby text |
notesAutoRuby: |
presenter-notes-ruby |
Export & Build
| Feature |
Usage |
Reference |
| Export options |
slidev export |
core-exporting |
| Build & deploy |
slidev build |
core-hosting |
| Build with PDF |
download: true |
build-pdf |
| Cache images |
Automatic for remote URLs |
build-remote-assets |
| OG image |
seoMeta.ogImage or og-image.png |
build-og-image |
| SEO tags |
seoMeta: |
build-seo-meta |
Editor & Tools
| Feature |
Usage |
Reference |
| Side editor |
Click edit icon |
editor-side |
| VS Code extension |
Install antfu.slidev |
editor-vscode |
| Prettier |
prettier-plugin-slidev |
editor-prettier |
| Eject theme |
slidev theme eject |
tool-eject-theme |
Lifecycle & API
| Feature |
Usage |
Reference |
| Slide hooks |
onSlideEnter(), onSlideLeave() |
api-slide-hooks |
| Navigation API |
$nav, useNav() |
core-global-context |
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
1---2name: slidev3description: Create and present web-based slides for developers using Markdown, Vue components, code highlighting, animations, and interactive features. Use when building technical presentations, conference talks, or teaching materials.4---56# Slidev - Presentation Slides for Developers78Web-based slides maker built on Vite, Vue, and Markdown.910## When to Use1112- Technical presentations with live code examples13- Syntax-highlighted code snippets with animations14- Interactive demos (Monaco editor, runnable code)15- Mathematical equations (LaTeX) or diagrams (Mermaid, PlantUML)16- Record presentations with presenter notes17- Export to PDF, PPTX, or host as SPA1819## Quick Start2021```bash22pnpm create slidev # Create project23pnpm run dev # Start dev server24pnpm run export # Export to PDF25```2627## Basic Syntax2829```md30---31theme: default32title: My Presentation33---3435# First Slide3637Content here3839---4041# Second Slide4243More content4445<!--46Presenter notes go here47-->48```4950- `---` separates slides51- First frontmatter = headmatter (deck config)52- HTML comments = presenter notes5354## Core References5556| Topic | Description | Reference |57|-------|-------------|-----------|58| Markdown Syntax | Slide separators, frontmatter, notes, code blocks | [core-syntax](references/core-syntax.md) |59| Animations | v-click, v-clicks, motion, transitions | [core-animations](references/core-animations.md) |60| Headmatter | Deck-wide configuration options | [core-headmatter](references/core-headmatter.md) |61| Frontmatter | Per-slide configuration options | [core-frontmatter](references/core-frontmatter.md) |62| CLI Commands | Dev, build, export, theme commands | [core-cli](references/core-cli.md) |63| Components | Built-in Vue components | [core-components](references/core-components.md) |64| Layouts | Built-in slide layouts | [core-layouts](references/core-layouts.md) |65| Exporting | PDF, PPTX, PNG export options | [core-exporting](references/core-exporting.md) |66| Hosting | Build and deploy to various platforms | [core-hosting](references/core-hosting.md) |67| Global Context | $nav, $slidev, composables API | [core-global-context](references/core-global-context.md) |6869## Feature Reference7071### Code & Editor7273| Feature | Usage | Reference |74|---------|-------|-----------|75| Line highlighting | `` ```ts {2,3} `` | [code-line-highlighting](references/code-line-highlighting.md) |76| Click-based highlighting | `` ```ts {1\|2-3\|all} `` | [code-line-highlighting](references/code-line-highlighting.md) |77| Line numbers | `lineNumbers: true` or `{lines:true}` | [code-line-numbers](references/code-line-numbers.md) |78| Scrollable code | `{maxHeight:'100px'}` | [code-max-height](references/code-max-height.md) |79| Code tabs | `::code-group` (requires `comark: true`) | [code-groups](references/code-groups.md) |80| Monaco editor | `` ```ts {monaco} `` | [editor-monaco](references/editor-monaco.md) |81| Run code | `` ```ts {monaco-run} `` | [editor-monaco-run](references/editor-monaco-run.md) |82| Edit files | `<<< ./file.ts {monaco-write}` | [editor-monaco-write](references/editor-monaco-write.md) |83| Code animations | `` ````md magic-move `` | [code-magic-move](references/code-magic-move.md) |84| TypeScript types | `` ```ts twoslash `` | [code-twoslash](references/code-twoslash.md) |85| Import code | `<<< @/snippets/file.js` | [code-import-snippet](references/code-import-snippet.md) |8687### Diagrams & Math8889| Feature | Usage | Reference |90|---------|-------|-----------|91| Mermaid diagrams | `` ```mermaid `` | [diagram-mermaid](references/diagram-mermaid.md) |92| PlantUML diagrams | `` ```plantuml `` | [diagram-plantuml](references/diagram-plantuml.md) |93| LaTeX math | `$inline$` or `$$block$$` | [diagram-latex](references/diagram-latex.md) |9495### Layout & Styling9697| Feature | Usage | Reference |98|---------|-------|-----------|99| Canvas size | `canvasWidth`, `aspectRatio` | [layout-canvas-size](references/layout-canvas-size.md) |100| Zoom slide | `zoom: 0.8` | [layout-zoom](references/layout-zoom.md) |101| Scale elements | `<Transform :scale="0.5">` | [layout-transform](references/layout-transform.md) |102| Layout slots | `::right::`, `::default::` | [layout-slots](references/layout-slots.md) |103| Scoped CSS | `<style>` in slide | [style-scoped](references/style-scoped.md) |104| Global layers | `global-top.vue`, `global-bottom.vue` | [layout-global-layers](references/layout-global-layers.md) |105| Draggable elements | `v-drag`, `<v-drag>` | [layout-draggable](references/layout-draggable.md) |106| Icons | `<mdi-icon-name />` | [style-icons](references/style-icons.md) |107108### Animation & Interaction109110| Feature | Usage | Reference |111|---------|-------|-----------|112| Click animations | `v-click`, `<v-clicks>` | [core-animations](references/core-animations.md) |113| Rough markers | `v-mark.underline`, `v-mark.circle` | [animation-rough-marker](references/animation-rough-marker.md) |114| Drawing mode | Press `C` or config `drawings:` | [animation-drawing](references/animation-drawing.md) |115| Direction styles | `forward:delay-300` | [style-direction](references/style-direction.md) |116| Note highlighting | `[click]` in notes | [animation-click-marker](references/animation-click-marker.md) |117118### Syntax Extensions119120| Feature | Usage | Reference |121|---------|-------|-----------|122| Comark syntax | `comark: true` + `{style="color:red"}` | [syntax-comark](references/syntax-comark.md) |123| Block frontmatter | `` ```yaml `` instead of `---` | [syntax-block-frontmatter](references/syntax-block-frontmatter.md) |124| Import slides | `src: ./other.md` | [syntax-importing-slides](references/syntax-importing-slides.md) |125| Merge frontmatter | Main entry wins | [syntax-frontmatter-merging](references/syntax-frontmatter-merging.md) |126127### Presenter & Recording128129| Feature | Usage | Reference |130|---------|-------|-----------|131| Recording | Press `G` for camera | [presenter-recording](references/presenter-recording.md) |132| Timer | `duration: 30min`, `timer: countdown` | [presenter-timer](references/presenter-timer.md) |133| Remote control | `slidev --remote` | [presenter-remote](references/presenter-remote.md) |134| Ruby text | `notesAutoRuby:` | [presenter-notes-ruby](references/presenter-notes-ruby.md) |135136### Export & Build137138| Feature | Usage | Reference |139|---------|-------|-----------|140| Export options | `slidev export` | [core-exporting](references/core-exporting.md) |141| Build & deploy | `slidev build` | [core-hosting](references/core-hosting.md) |142| Build with PDF | `download: true` | [build-pdf](references/build-pdf.md) |143| Cache images | Automatic for remote URLs | [build-remote-assets](references/build-remote-assets.md) |144| OG image | `seoMeta.ogImage` or `og-image.png` | [build-og-image](references/build-og-image.md) |145| SEO tags | `seoMeta:` | [build-seo-meta](references/build-seo-meta.md) |146147### Editor & Tools148149| Feature | Usage | Reference |150|---------|-------|-----------|151| Side editor | Click edit icon | [editor-side](references/editor-side.md) |152| VS Code extension | Install `antfu.slidev` | [editor-vscode](references/editor-vscode.md) |153| Prettier | `prettier-plugin-slidev` | [editor-prettier](references/editor-prettier.md) |154| Eject theme | `slidev theme eject` | [tool-eject-theme](references/tool-eject-theme.md) |155156### Lifecycle & API157158| Feature | Usage | Reference |159|---------|-------|-----------|160| Slide hooks | `onSlideEnter()`, `onSlideLeave()` | [api-slide-hooks](references/api-slide-hooks.md) |161| Navigation API | `$nav`, `useNav()` | [core-global-context](references/core-global-context.md) |162163## Common Layouts164165| Layout | Purpose |166|--------|---------|167| `cover` | Title/cover slide |168| `center` | Centered content |169| `default` | Standard slide |170| `two-cols` | Two columns (use `::right::`) |171| `two-cols-header` | Header + two columns |172| `image` / `image-left` / `image-right` | Image layouts |173| `iframe` / `iframe-left` / `iframe-right` | Embed URLs |174| `quote` | Quotation |175| `section` | Section divider |176| `fact` / `statement` | Data/statement display |177| `intro` / `end` | Intro/end slides |178179## Resources180181- Documentation: https://sli.dev182- Theme Gallery: https://sli.dev/resources/theme-gallery183- Showcases: https://sli.dev/resources/showcases
xingyu4j