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

bash
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

markdown
---
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

TopicDescriptionReference
Markdown SyntaxSlide separators, frontmatter, notes, code blockscore-syntax [blocked]
Animationsv-click, v-clicks, motion, transitionscore-animations [blocked]
HeadmatterDeck-wide configuration optionscore-headmatter [blocked]
FrontmatterPer-slide configuration optionscore-frontmatter [blocked]
CLI CommandsDev, build, export, theme commandscore-cli [blocked]
ComponentsBuilt-in Vue componentscore-components [blocked]
LayoutsBuilt-in slide layoutscore-layouts [blocked]
ExportingPDF, PPTX, PNG export optionscore-exporting [blocked]
HostingBuild and deploy to various platformscore-hosting [blocked]
Global Contextnav,nav, slidev, composables APIcore-global-context [blocked]

Feature Reference

Code & Editor

FeatureUsageReference
Line highlighting```ts {2,3}code-line-highlighting [blocked]
Click-based highlighting```ts {1|2-3|all}code-line-highlighting [blocked]
Line numberslineNumbers: 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-movecode-magic-move [blocked]
TypeScript types```ts twoslashcode-twoslash [blocked]
Import code<<< @/snippets/file.jscode-import-snippet [blocked]

Diagrams & Math

FeatureUsageReference
Mermaid diagrams```mermaiddiagram-mermaid [blocked]
PlantUML diagrams```plantumldiagram-plantuml [blocked]
LaTeX math$inline$ or $$block$$diagram-latex [blocked]

Layout & Styling

FeatureUsageReference
Canvas sizecanvasWidth, aspectRatiolayout-canvas-size [blocked]
Zoom slidezoom: 0.8layout-zoom [blocked]
Scale elements<Transform :scale="0.5">layout-transform [blocked]
Layout slots::right::, ::default::layout-slots [blocked]
Scoped CSS<style> in slidestyle-scoped [blocked]
Global layersglobal-top.vue, global-bottom.vuelayout-global-layers [blocked]
Draggable elementsv-drag, <v-drag>layout-draggable [blocked]
Icons<mdi-icon-name />style-icons [blocked]

Animation & Interaction

FeatureUsageReference
Click animationsv-click, <v-clicks>core-animations [blocked]
Rough markersv-mark.underline, v-mark.circleanimation-rough-marker [blocked]
Drawing modePress C or config drawings:animation-drawing [blocked]
Direction stylesforward:delay-300style-direction [blocked]
Note highlighting[click] in notesanimation-click-marker [blocked]

Syntax Extensions

FeatureUsageReference
Comark syntaxcomark: true + {style="color:red"}syntax-comark [blocked]
Block frontmatter```yaml instead of ---syntax-block-frontmatter [blocked]
Import slidessrc: ./other.mdsyntax-importing-slides [blocked]
Merge frontmatterMain entry winssyntax-frontmatter-merging [blocked]

Presenter & Recording

FeatureUsageReference
RecordingPress G for camerapresenter-recording [blocked]
Timerduration: 30min, timer: countdownpresenter-timer [blocked]
Remote controlslidev --remotepresenter-remote [blocked]
Ruby textnotesAutoRuby:presenter-notes-ruby [blocked]

Export & Build

FeatureUsageReference
Export optionsslidev exportcore-exporting [blocked]
Build & deployslidev buildcore-hosting [blocked]
Build with PDFdownload: truebuild-pdf [blocked]
Cache imagesAutomatic for remote URLsbuild-remote-assets [blocked]
OG imageseoMeta.ogImage or og-image.pngbuild-og-image [blocked]
SEO tagsseoMeta: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.

Editor & Tools

FeatureUsageReference
Side editorClick edit iconeditor-side [blocked]
VS Code extensionInstall antfu.slideveditor-vscode [blocked]
Prettierprettier-plugin-slideveditor-prettier [blocked]
Eject themeslidev theme ejecttool-eject-theme [blocked]

Lifecycle & API

FeatureUsageReference
Slide hooksonSlideEnter(), onSlideLeave()api-slide-hooks [blocked]
Navigation API$nav, useNav()core-global-context [blocked]

Common Layouts

LayoutPurpose
coverTitle/cover slide
centerCentered content
defaultStandard slide
two-colsTwo columns (use ::right::)
two-cols-headerHeader + two columns
image / image-left / image-rightImage layouts
iframe / iframe-left / iframe-rightEmbed URLs
quoteQuotation
sectionSection divider
fact / statementData/statement display
intro / endIntro/end slides

Resources