Slidev - Presentation Slides for Developers Skill

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 mdc: 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 | |---------|-------|-----------| | MDC syntax | mdc: true + {style="color:red"} | syntax-mdc | | 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

Documentation: https://sli.dev
Theme Gallery: https://sli.dev/resources/theme-gallery
Showcases: https://sli.dev/resources/showcases

Agent Skills: Slidev - Presentation Slides for Developers

Install this agent skill to your local

Skill Files