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

[code-line-highlighting](https://github.com/antfu/skills/blob/HEAD/skills/slidev/references/code-line-highlighting.md)

Click-based highlighting

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

[editor-monaco](https://github.com/antfu/skills/blob/HEAD/skills/slidev/references/editor-monaco.md)

Run code

editor-monaco-run

Edit files

<<< ./file.ts {monaco-write}

editor-monaco-write

Code animations

[code-magic-move](https://github.com/antfu/skills/blob/HEAD/skills/slidev/references/code-magic-move.md)

TypeScript types

code-twoslash

Import code

<<< @/snippets/file.js

code-import-snippet

Diagrams & Math

Feature

Usage

Reference

Mermaid diagrams

[diagram-mermaid](https://github.com/antfu/skills/blob/HEAD/skills/slidev/references/diagram-mermaid.md)

PlantUML diagrams

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