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

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