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
<!--
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 |
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.
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
Converted and distributed by TomeVault — claim your Tome and manage your conversions.
1---2name: slidev3description: Create and present web-based slidedecks for developers using Slidev with Markdown, Vue components, code highlighting, animations, and interactive features. Use when building technical presentations, conference talks, code walkthroughs, teaching materials, or developer decks. Use when this capability is needed.4---56# Slidev - Presentation Slides for Developers78Web-based slides maker built on Vite, Vue, and Markdown.910## When to Use1112- Technical presentations or slidedecks 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 SPA18- Code walkthroughs for developer talks or workshops1920## Quick Start2122```bash23pnpm create slidev # Create project24pnpm run dev # Start dev server (opens http://localhost:3030)25pnpm run build # Build static SPA26pnpm run export # Export to PDF (requires playwright-chromium)27```2829**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.3031## Basic Syntax3233```md34---35theme: default36title: My Presentation37---3839# First Slide4041Content here4243---4445# Second Slide4647More content4849<!--50Presenter notes go here51-->52```5354- `---` separates slides55- First frontmatter = headmatter (deck config)56- HTML comments = presenter notes5758## Core References5960| Topic | Description | Reference |61|-------|-------------|-----------|62| Markdown Syntax | Slide separators, frontmatter, notes, code blocks | [core-syntax](references/core-syntax.md) |63| Animations | v-click, v-clicks, motion, transitions | [core-animations](references/core-animations.md) |64| Headmatter | Deck-wide configuration options | [core-headmatter](references/core-headmatter.md) |65| Frontmatter | Per-slide configuration options | [core-frontmatter](references/core-frontmatter.md) |66| CLI Commands | Dev, build, export, theme commands | [core-cli](references/core-cli.md) |67| Components | Built-in Vue components | [core-components](references/core-components.md) |68| Layouts | Built-in slide layouts | [core-layouts](references/core-layouts.md) |69| Exporting | PDF, PPTX, PNG export options | [core-exporting](references/core-exporting.md) |70| Hosting | Build and deploy to various platforms | [core-hosting](references/core-hosting.md) |71| Global Context | $nav, $slidev, composables API | [core-global-context](references/core-global-context.md) |7273## Feature Reference7475### Code & Editor7677| Feature | Usage | Reference |78|---------|-------|-----------|79| Line highlighting | `` ```ts {2,3} `` | [code-line-highlighting](references/code-line-highlighting.md) |80| Click-based highlighting | `` ```ts {1\|2-3\|all} `` | [code-line-highlighting](references/code-line-highlighting.md) |81| Line numbers | `lineNumbers: true` or `{lines:true}` | [code-line-numbers](references/code-line-numbers.md) |82| Scrollable code | `{maxHeight:'100px'}` | [code-max-height](references/code-max-height.md) |83| Code tabs | `::code-group` (requires `comark: true`) | [code-groups](references/code-groups.md) |84| Monaco editor | `` ```ts {monaco} `` | [editor-monaco](references/editor-monaco.md) |85| Run code | `` ```ts {monaco-run} `` | [editor-monaco-run](references/editor-monaco-run.md) |86| Edit files | `<<< ./file.ts {monaco-write}` | [editor-monaco-write](references/editor-monaco-write.md) |87| Code animations | `` ````md magic-move `` | [code-magic-move](references/code-magic-move.md) |88| TypeScript types | `` ```ts twoslash `` | [code-twoslash](references/code-twoslash.md) |89| Import code | `<<< @/snippets/file.js` | [code-import-snippet](references/code-import-snippet.md) |9091### Diagrams & Math9293| Feature | Usage | Reference |94|---------|-------|-----------|95| Mermaid diagrams | `` ```mermaid `` | [diagram-mermaid](references/diagram-mermaid.md) |96| PlantUML diagrams | `` ```plantuml `` | [diagram-plantuml](references/diagram-plantuml.md) |97| LaTeX math | `$inline$` or `$$block$$` | [diagram-latex](references/diagram-latex.md) |9899### Layout & Styling100101| Feature | Usage | Reference |102|---------|-------|-----------|103| Canvas size | `canvasWidth`, `aspectRatio` | [layout-canvas-size](references/layout-canvas-size.md) |104| Zoom slide | `zoom: 0.8` | [layout-zoom](references/layout-zoom.md) |105| Scale elements | `<Transform :scale="0.5">` | [layout-transform](references/layout-transform.md) |106| Layout slots | `::right::`, `::default::` | [layout-slots](references/layout-slots.md) |107| Scoped CSS | `<style>` in slide | [style-scoped](references/style-scoped.md) |108| Global layers | `global-top.vue`, `global-bottom.vue` | [layout-global-layers](references/layout-global-layers.md) |109| Draggable elements | `v-drag`, `<v-drag>` | [layout-draggable](references/layout-draggable.md) |110| Icons | `<mdi-icon-name />` | [style-icons](references/style-icons.md) |111112### Animation & Interaction113114| Feature | Usage | Reference |115|---------|-------|-----------|116| Click animations | `v-click`, `<v-clicks>` | [core-animations](references/core-animations.md) |117| Rough markers | `v-mark.underline`, `v-mark.circle` | [animation-rough-marker](references/animation-rough-marker.md) |118| Drawing mode | Press `C` or config `drawings:` | [animation-drawing](references/animation-drawing.md) |119| Direction styles | `forward:delay-300` | [style-direction](references/style-direction.md) |120| Note highlighting | `[click]` in notes | [animation-click-marker](references/animation-click-marker.md) |121122### Syntax Extensions123124| Feature | Usage | Reference |125|---------|-------|-----------|126| Comark syntax | `comark: true` + `{style="color:red"}` | [syntax-comark](references/syntax-comark.md) |127| Block frontmatter | `` ```yaml `` instead of `---` | [syntax-block-frontmatter](references/syntax-block-frontmatter.md) |128| Import slides | `src: ./other.md` | [syntax-importing-slides](references/syntax-importing-slides.md) |129| Merge frontmatter | Main entry wins | [syntax-frontmatter-merging](references/syntax-frontmatter-merging.md) |130131### Presenter & Recording132133| Feature | Usage | Reference |134|---------|-------|-----------|135| Recording | Press `G` for camera | [presenter-recording](references/presenter-recording.md) |136| Timer | `duration: 30min`, `timer: countdown` | [presenter-timer](references/presenter-timer.md) |137| Remote control | `slidev --remote` | [presenter-remote](references/presenter-remote.md) |138| Ruby text | `notesAutoRuby:` | [presenter-notes-ruby](references/presenter-notes-ruby.md) |139140### Export & Build141142| Feature | Usage | Reference |143|---------|-------|-----------|144| Export options | `slidev export` | [core-exporting](references/core-exporting.md) |145| Build & deploy | `slidev build` | [core-hosting](references/core-hosting.md) |146| Build with PDF | `download: true` | [build-pdf](references/build-pdf.md) |147| Cache images | Automatic for remote URLs | [build-remote-assets](references/build-remote-assets.md) |148| OG image | `seoMeta.ogImage` or `og-image.png` | [build-og-image](references/build-og-image.md) |149| SEO tags | `seoMeta:` | [build-seo-meta](references/build-seo-meta.md) |150151**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.152153### Editor & Tools154155| Feature | Usage | Reference |156|---------|-------|-----------|157| Side editor | Click edit icon | [editor-side](references/editor-side.md) |158| VS Code extension | Install `antfu.slidev` | [editor-vscode](references/editor-vscode.md) |159| Prettier | `prettier-plugin-slidev` | [editor-prettier](references/editor-prettier.md) |160| Eject theme | `slidev theme eject` | [tool-eject-theme](references/tool-eject-theme.md) |161162### Lifecycle & API163164| Feature | Usage | Reference |165|---------|-------|-----------|166| Slide hooks | `onSlideEnter()`, `onSlideLeave()` | [api-slide-hooks](references/api-slide-hooks.md) |167| Navigation API | `$nav`, `useNav()` | [core-global-context](references/core-global-context.md) |168169## Common Layouts170171| Layout | Purpose |172|--------|---------|173| `cover` | Title/cover slide |174| `center` | Centered content |175| `default` | Standard slide |176| `two-cols` | Two columns (use `::right::`) |177| `two-cols-header` | Header + two columns |178| `image` / `image-left` / `image-right` | Image layouts |179| `iframe` / `iframe-left` / `iframe-right` | Embed URLs |180| `quote` | Quotation |181| `section` | Section divider |182| `fact` / `statement` | Data/statement display |183| `intro` / `end` | Intro/end slides |184185## Resources186187- Documentation: https://sli.dev188- Theme Gallery: https://sli.dev/resources/theme-gallery189- Showcases: https://sli.dev/resources/showcases190191---192> Converted and distributed by [TomeVault](https://tomevault.io/claim/antfu) — claim your Tome and manage your conversions.193<!-- tomevault:4.0:skill_md:2026-04-11 -->
tomevault-io