/slidev

name: slidev
description: 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.

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](references/core-syntax.md) | | Animations | v-click, v-clicks, motion, transitions | [core-animations](references/core-animations.md) | | Headmatter | Deck-wide configuration options | [core-headmatter](references/core-headmatter.md) | | Frontmatter | Per-slide configuration options | [core-frontmatter](references/core-frontmatter.md) | | CLI Commands | Dev, build, export, theme commands | [core-cli](references/core-cli.md) | | Components | Built-in Vue components | [core-components](references/core-components.md) | | Layouts | Built-in slide layouts | [core-layouts](references/core-layouts.md) | | Exporting | PDF, PPTX, PNG export options | [core-exporting](references/core-exporting.md) | | Hosting | Build and deploy to various platforms | [core-hosting](references/core-hosting.md) | | Global Context | $nav, $slidev, composables API | [core-global-context](references/core-global-context.md) |

Feature Reference

Code & Editor

| Feature | Usage | Reference | |---------|-------|-----------| | Line highlighting | `` ```ts {2,3} `` | [code-line-highlighting](references/code-line-highlighting.md) | | Click-based highlighting | `` ```ts {1\|2-3\|all} `` | [code-line-highlighting](references/code-line-highlighting.md) | | Line numbers | `lineNumbers: true` or `{lines:true}` | [code-line-numbers](references/code-line-numbers.md) | | Scrollable code | `{maxHeight:'100px'}` | [code-max-height](references/code-max-height.md) | | Code tabs | `::code-group` (requires `comark: true`) | [code-groups](references/code-groups.md) | | Monaco editor | `` ```ts {monaco} `` | [editor-monaco](references/editor-monaco.md) | | Run code | `` ```ts {monaco-run} `` | [editor-monaco-run](references/editor-monaco-run.md) | | Edit files | `<<< ./file.ts {monaco-write}` | [editor-monaco-write](references/editor-monaco-write.md) | | Code animations | `` ````md magic-move `` | [code-magic-move](references/code-magic-move.md) | | TypeScript types | `` ```ts twoslash `` | [code-twoslash](references/code-twoslash.md) | | Import code | `<<< @/snippets/file.js` | [code-import-snippet](references/code-import-snippet.md) |

Diagrams & Math

| Feature | Usage | Reference | |---------|-------|-----------| | Mermaid diagrams | `` ```mermaid `` | [diagram-mermaid](references/diagram-mermaid.md) | | PlantUML diagrams | `` ```plantuml `` | [diagram-plantuml](references/diagram-plantuml.md) | | LaTeX math | `$inline$` or `$$block$$` | [diagram-latex](references/diagram-latex.md) |

Layout & Styling

| Feature | Usage | Reference | |---------|-------|-----------| | Canvas size | `canvasWidth`, `aspectRatio` | [layout-canvas-size](references/layout-canvas-size.md) | | Zoom slide | `zoom: 0.8` | [layout-zoom](references/layout-zoom.md) | | Scale elements | `<Transform :scale="0.5">` | [layout-transform](references/layout-transform.md) | | Layout slots | `::right::`, `::default::` | [layout-slots](references/layout-slots.md) | | Scoped CSS | `<style>` in slide | [style-scoped](references/style-scoped.md) | | Global layers | `global-top.vue`, `global-bottom.vue` | [layout-global-layers](references/layout-global-layers.md) | | Draggable elements | `v-drag`, `<v-drag>` | [layout-draggable](references/layout-draggable.md) | | Icons | `<mdi-icon-name />` | [style-icons](references/style-icons.md) |

Animation & Interaction

| Feature | Usage | Reference | |---------|-------|-----------| | Click animations | `v-click`, `<v-clicks>` | [core-animations](references/core-animations.md) | | Rough markers | `v-mark.underline`, `v-mark.circle` | [animation-rough-marker](references/animation-rough-marker.md) | | Drawing mode | Press `C` or config `drawings:` | [animation-drawing](references/animation-drawing.md) | | Direction styles | `forward:delay-300` | [style-direction](references/style-direction.md) | | Note highlighting | `[click]` in notes | [animation-click-marker](references/animation-click-marker.md) |

Syntax Extensions

| Feature | Usage | Reference | |---------|-------|-----------| | Comark syntax | `comark: true` + `{style="color:red"}` | [syntax-comark](references/syntax-comark.md) | | Block frontmatter | `` ```yaml `` instead of `---` | [syntax-block-frontmatter](references/syntax-block-frontmatter.md) | | Import slides | `src: ./other.md` | [syntax-importing-slides](references/synt