Slidev

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

Feature Reference

Code & Editor

Diagrams & Math

Layout & Styling

Animation & Interaction

Syntax Extensions

Presenter & Recording

Export & Build

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

Lifecycle & API

Common Layouts

Resources

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

MIT License

Copyright (c) 2020-PRESENT Anthony Fu

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Slidev Skills for Claude Code

Agent skills that help Claude Code understand and work with Slidev presentations.

Installation

npx skills add slidevjs/slidev

This will add the Slidev skill to your Claude Code configuration.

What's Included

The Slidev skill provides Claude Code with knowledge about:

• Core Syntax - Markdown syntax, slide separators, frontmatter
• Animations - Click animations, transitions, motion effects
• Code Features - Line highlighting, Monaco editor, code groups, magic-move
• Diagrams - Mermaid, PlantUML, LaTeX math
• Layouts - Built-in layouts, slots, global layers
• Presenter Mode - Recording, timer, remote access
• Exporting - PDF, PPTX, PNG, SPA hosting

Usage

Once installed, Claude Code will automatically use Slidev knowledge when:

• Creating new presentations
• Adding slides with code examples
• Setting up animations and transitions
• Configuring themes and layouts
• Exporting presentations

Example Prompts

Create a Slidev presentation about TypeScript generics with code examples

Add a two-column slide with code on the left and explanation on the right

Set up click animations to reveal bullet points one by one

Configure the presentation for PDF export with speaker notes

Documentation

• Slidev Documentation
• Theme Gallery
• Showcases

License

MIT

Click Markers

Highlight and auto-scroll presenter notes based on click progress.

Syntax

Add [click] markers in presenter notes:

<!--
Content before the first click

[click] This will be highlighted after the first click

Also highlighted after the first click

- [click] This list element highlights after the second click

[click:3] Last click (skip two clicks)
-->

Behavior

• Notes between markers highlight in sync with slide progress
• Auto-scrolls presenter view to active section
• Use [click:{n}] to skip to specific click number

Requirements

• Only works in presenter mode
• Notes must be HTML comments at end of slide

Drawing & Annotations

Draw and annotate slides during presentation. Powered by drauu.

Enable Drawing

Click the pen icon in the navigation bar or press C.

Stylus Support

Stylus pens (iPad + Apple Pencil) work automatically - draw with pen, navigate with fingers.

Persist Drawings

Save drawings as SVGs and include in exports:

---
drawings:
  persist: true
---

Drawings saved to .slidev/drawings/.

Disable Drawing

Entirely:

---
drawings:
  enabled: false
---

Only in development:

---
drawings:
  enabled: dev
---

Only in presenter mode:

---
drawings:
  presenterOnly: true
---

Sync Settings

Disable sync across instances:

---
drawings:
  syncAll: false
---

Only presenter's drawings sync to others.

Rough Markers

Hand-drawn style highlighting using Rough Notation.

v-mark Directive

<span v-mark>Important text</span>

Marker Types

<span v-mark.underline>Underlined</span>
<span v-mark.circle>Circled</span>
<span v-mark.highlight>Highlighted</span>
<span v-mark.strike-through>Struck through</span>
<span v-mark.box>Boxed</span>

Colors

<span v-mark.red>Red marker</span>
<span v-mark.blue>Blue marker</span>

Custom color:

<span v-mark="{ color: '#234' }">Custom color</span>

Click Timing

Works like v-click:

<span v-mark="5">Appears on click 5</span>
<span v-mark="'+1'">Next click</span>

Full Options

<span v-mark="{ at: 5, color: '#234', type: 'circle' }">
  Custom marker
</span>

Slide Hooks

Lifecycle hooks for slide components.

Available Hooks

import { onSlideEnter, onSlideLeave, useIsSlideActive } from '@slidev/client'

const isActive = useIsSlideActive()

onSlideEnter(() => {
  // Called when slide becomes active
})

onSlideLeave(() => {
  // Called when slide becomes inactive
})

Important

Do NOT use onMounted / onUnmounted in slides - component instance persists even when slide is inactive.

Use onSlideEnter and onSlideLeave instead.

Use Cases

• Start/stop animations
• Play/pause media
• Initialize/cleanup resources
• Track analytics

Open Graph Image

Set preview image for social media sharing.

Custom URL

---
seoMeta:
  ogImage: https://url.to.your.image.png
---

Local Image

Place ./og-image.png in project root - Slidev uses it automatically.

Auto-generate

Generate from first slide:

---
seoMeta:
  ogImage: auto
---

Uses Playwright to capture first slide. Requires playwright to be installed.

Generated image saved as ./og-image.png - can be committed to repo.

Generate PDF when Building

Generate a downloadable PDF alongside your built slides.

Enable in Headmatter

---
download: true
---

This generates a PDF and adds a download button to the built slides.

Custom PDF URL

Skip generation and use an existing PDF:

---
download: 'https://example.com/my-talk.pdf'
---

CLI Option

slidev build --download

Export Options

Configure PDF export settings via:

• CLI: slidev build --download --with-clicks --timeout 60000
• Headmatter: Set exportFilename, withClicks, etc.

Bundle Remote Assets

Remote images are automatically cached on first run for faster loading.

Remote Images

![Remote Image](https://sli.dev/favicon.png)

Cached automatically by vite-plugin-remote-assets.

Local Images

Place in public/ folder and reference with leading slash:

![Local Image](/pic.png)

Do NOT use relative paths like ./pic.png.

Custom Styling

Convert to img tag for custom sizes/styles:

<img src="/pic.png" class="m-40 h-40 rounded shadow" />

SEO Meta Tags

Configure social media and search engine meta tags.

Configuration

---
seoMeta:
  ogTitle: Slidev Starter Template
  ogDescription: Presentation slides for developers
  ogImage: https://cover.sli.dev
  ogUrl: https://example.com
  twitterCard: summary_large_image
  twitterTitle: Slidev Starter Template
  twitterDescription: Presentation slides for developers
  twitterImage: https://cover.sli.dev
  twitterSite: username
  twitterUrl: https://example.com
---

Available Options

Open Graph (Facebook, LinkedIn):

• ogTitle - Title
• ogDescription - Description
• ogImage - Preview image URL
• ogUrl - Canonical URL

Twitter Card:

• twitterCard - Card type (summary, summary_large_image)
• twitterTitle - Title
• twitterDescription - Description
• twitterImage - Preview image URL
• twitterSite - Twitter username

Powered by unhead.

Code Groups

Group multiple code blocks with tabs and automatic icons.

Requirements

Enable Comark syntax in headmatter:

---
comark: true
---

Syntax

````md ::code-group

```sh [npm] npm i @slidev/cli

yarn add @slidev/cli

pnpm add @slidev/cli

::

Title Icon Matching

Icons auto-match by title name. Install @iconify-json/vscode-icons for built-in icons.

Supported: npm, yarn, pnpm, bun, deno, vue, react, typescript, javascript, and many more.

Custom Icons

Use ~icon~ syntax in title:

```md ``js [npm ~i-uil:github~] console.log('Hello!')

Requires: 1. Install icon collection: pnpm add @iconify-json/uil 2. Add to safelist in uno.config.ts:

export default defineConfig({
  safelist: ['i-uil:github']
})

Import Code Snippets

Import code from external files into slides.

Basic Syntax

<<< @/snippets/snippet.js

@ = package root directory. Recommended: place snippets in @/snippets/.

Import Region

Use VS Code region syntax:

<<< @/snippets/snippet.js#region-name

Specify Language

<<< @/snippets/snippet.js ts

With Features

Combine with line highlighting, Monaco editor:

<<< @/snippets/snippet.js {2,3|5}{lines:true}
<<< @/snippets/snippet.js ts {monaco}{height:200px}

Placeholder

Use {*} for line highlighting placeholder:

<<< @/snippets/snippet.js {*}{lines:true}

Monaco Write

Link editor to file for live editing:

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

Line Highlighting

Highlight specific lines in code blocks.

Static Highlighting

```md ``ts {2,3} function add( a: Ref<number> | number, b: Ref<number> | number ) { return computed(() => unref(a) + unref(b)) }

Dynamic (Click-based)

Use | to separate stages:

```md ``ts {2-3|5|all} function add( a: Ref<number> | number, b: Ref<number> | number ) { return computed(() => unref(a) + unref(b)) }

Click progression: lines 2-3 → line 5 → all lines

Special Values

• hide - Hide the code block
• none - Show code without highlighting
• all - Highlight all lines

```md ``ts {hide|none|all} // Hidden → No highlight → All highlighted

Code Block Line Numbers

Enable line numbering for code blocks.

Global Setting

Enable for all code blocks in headmatter:

---
lineNumbers: true
---

Per-Block Setting

```md ``ts {6,7}{lines:true,startLine:5} function add( a: Ref<number> | number, b: Ref<number> | number ) { return computed(() => unref(a) + unref(b)) }

Options

• lines: true/false - Enable/disable line numbers
• startLine: number - Starting line number (default: 1)

With Line Highlighting

Use {*} as placeholder when combining with other features:

```md ``ts {*}{lines:true,startLine:5} // code here

Shiki Magic Move

Animate code changes with smooth transitions (like Keynote's Magic Move).

Basic Usage

````md ```md magic-move

console.log(`Step ${1}`)

console.log(`Step ${1 + 1}`)

console.log(`Step ${3}` as string)

``` ````

Note: Use 4 backticks for the wrapper.

With Line Highlighting

````md ``md magic-move {at:4, lines: true} ``js {*|1|2-5} let count = 1 function add() { count++ }

Non-code blocks in between are ignored.

let count = 1 const add = () => count += 1

`````

How It Works

• Wraps multiple code blocks as one
• Each block is a "step"
• Morphs between steps on click
• Syntax highlighting preserved during animation

Resources

• Playground: https://shiki-magic-move.netlify.app/

Code Block Max Height

Set a fixed height for code blocks with scrolling.

Usage

```md ``ts {2|3|7|12}{maxHeight:'100px'} function add( a: Ref<number> | number, b: Ref<number> | number ) { return computed(() => unref(a) + unref(b)) } /// ...as many lines as you want const c = add(1, 2)

With Line Highlighting Placeholder

Use {*} when you only need maxHeight:

```md ``ts {*}{maxHeight:'100px'} // long code here

Use Case

When code is too long to fit on one slide but you want to show it all with scrolling.

TwoSlash Integration

Show TypeScript type information inline or on hover.

Usage

```md ``ts twoslash import { ref } from 'vue'

const count = ref(0) // ^?

Features

• Type information on hover
• Inline type annotations with ^?
• Errors and warnings display
• Full TypeScript compiler integration

Annotations

```ts twoslash const count = ref(0) // ^? // Shows: const count: Ref<number>

## Use Case

Perfect for TypeScript/JavaScript teaching materials where showing types helps understanding.

## Resources

- TwoSlash docs: https://twoslash.netlify.app/

Animations

Click animations, motion effects, and slide transitions.

Click Animations

v-click Directive

<div v-click>Appears on click</div>
<div v-click>Appears on next click</div>

v-clicks Component

Animate list items:

<v-clicks>

- Item 1
- Item 2
- Item 3

</v-clicks>

With depth for nested lists:

<v-clicks depth="2">

- Parent 1
  - Child 1
  - Child 2
- Parent 2

</v-clicks>

Click Positioning

Relative positioning:

<div v-click>1st (default)</div>
<div v-click="+1">2nd</div>
<div v-click="-1">Same as previous</div>

Absolute positioning:

<div v-click="3">Appears on click 3</div>
<div v-click="[2,5]">Visible clicks 2-5</div>

v-after

Show with previous element:

<div v-click>Main element</div>
<div v-after>Appears with main element</div>

v-switch

Conditional rendering by click:

<v-switch>
  <template #1>First state</template>
  <template #2>Second state</template>
  <template #3>Third state</template>
</v-switch>

Custom Click Count

---
clicks: 10
---

Or starting from specific count:

---
clicksStart: 5
---

Motion Animations

Using @vueuse/motion:

<div
  v-motion
  :initial="{ x: -100, opacity: 0 }"
  :enter="{ x: 0, opacity: 1 }"
>
  Animated content
</div>

Click-based motion:

<div
  v-motion
  :initial="{ scale: 1 }"
  :click-1="{ scale: 1.5 }"
  :click-2="{ scale: 1 }"
>
  Scales on clicks
</div>

Slide Transitions

In headmatter (all slides):

---
transition: slide-left
---

Per-slide:

---
transition: fade
---

Built-in Transitions

• fade / fade-out
• slide-left / slide-right
• slide-up / slide-down
• view-transition (View Transitions API)

Directional Transitions

Different transitions for forward/backward:

---
transition: slide-left | slide-right
---

Custom Transitions

Define CSS classes:

.my-transition-enter-active,
.my-transition-leave-active {
  transition: all 0.5s ease;
}
.my-transition-enter-from,
.my-transition-leave-to {
  opacity: 0;
  transform: translateX(100px);
}

Use: transition: my-transition

CSS Classes

Animation targets get these classes:

• .slidev-vclick-target - Animated element
• .slidev-vclick-hidden - Hidden state
• .slidev-vclick-current - Current click target
• .slidev-vclick-prior - Previously shown

Default Animation CSS

.slidev-vclick-target {
  transition: opacity 100ms ease;
}
.slidev-vclick-hidden {
  opacity: 0;
  pointer-events: none;
}

CLI Commands

Slidev command-line interface reference.

Dev Server

slidev [entry]
slidev slides.md

Options:

Examples:

slidev --port 8080 --open
slidev --remote mypassword
slidev --base /talks/my-talk/

Build

slidev build [entry]

Options:

Examples:

slidev build --base /my-repo/
slidev build --download --out public
slidev build slides1.md slides2.md  # Multiple builds

Export

slidev export [entry]

Options:

Examples:

slidev export
slidev export --format pptx
slidev export --format png --range 1-5
slidev export --with-clicks --dark
slidev export --timeout 60000 --wait 2000

Format

slidev format [entry]

Formats the slides markdown file.

Theme Eject

slidev theme eject [entry]

Options:

Extracts theme to local directory for customization.

npm Script Usage

In package.json:

{
  "scripts": {
    "dev": "slidev",
    "build": "slidev build",
    "export": "slidev export"
  }
}

With arguments (note --):

npm run dev -- --port 8080 --open
npm run export -- --format pptx

Boolean Options

slidev --open           # Same as --open true
slidev --no-open        # Same as --open false

Install CLI Globally

npm i -g @slidev/cli

Built-in Components

Ready-to-use components in Slidev.

Navigation

Link

Navigate to slide:

<Link to="5">Go to slide 5</Link>
<Link to="intro">Go to intro</Link>  <!-- with routeAlias -->

SlideCurrentNo / SlidesTotal

Slide <SlideCurrentNo /> of <SlidesTotal />

Toc (Table of Contents)

<Toc />
<Toc maxDepth="2" />
<Toc columns="2" />

Props:

• columns - Number of columns
• maxDepth / minDepth - Heading depth filter
• mode - 'all' | 'onlyCurrentTree' | 'onlySiblings'

TitleRenderer

Render slide title:

<TitleRenderer no="3" />

Animations

VClick / VClicks

<VClick>Shows on click</VClick>

<VClicks>

- Item 1
- Item 2

</VClicks>

VAfter

<VClick>First</VClick>
<VAfter>Shows with first</VAfter>

VSwitch

<VSwitch>
  <template #1>State 1</template>
  <template #2>State 2</template>
</VSwitch>

Drawing

Arrow

<Arrow x1="10" y1="10" x2="100" y2="100" />
<Arrow x1="10" y1="10" x2="100" y2="100" two-way />

Props: x1, y1, x2, y2, width, color, two-way

VDragArrow

Draggable arrow:

<VDragArrow />

Layout

Transform

Scale elements:

<Transform :scale="0.5">
  <LargeContent />
</Transform>

Props: scale, origin

AutoFitText

Auto-sizing text:

<AutoFitText :max="200" :min="50" modelValue="Hello" />

Media

SlidevVideo

<SlidevVideo v-click autoplay controls>
  <source src="/video.mp4" type="video/mp4" />
</SlidevVideo>

Props: controls, autoplay, autoreset, poster, timestamp

Youtube

<Youtube id="dQw4w9WgXcQ" />
<Youtube id="dQw4w9WgXcQ" width="600" height="400" />

Tweet

<Tweet id="1423789844234231808" />
<Tweet id="1423789844234231808" :scale="0.8" />

Conditional

LightOrDark

<LightOrDark>
  <template #dark>Dark mode content</template>
  <template #light>Light mode content</template>
</LightOrDark>

RenderWhen

<RenderWhen context="presenter">
  Only in presenter mode
</RenderWhen>

Context values:

• main - Main presentation view
• visible - Visible slides
• print - Print/export mode
• slide - Normal slide view
• overview - Overview mode
• presenter - Presenter mode
• previewNext - Next slide preview

Branding

PoweredBySlidev

<PoweredBySlidev />

Draggable

VDrag

<VDrag pos="myElement">
  Draggable content
</VDrag>

See draggable for details.

Component Auto-Import

Components from these sources are auto-imported: 1. Built-in components 2. Theme components 3. Addon components 4. ./components/ directory

No import statements needed.

Exporting Slides

Export presentations to PDF, PPTX, PNG, or Markdown.

Browser Exporter

Access at http://localhost:3030/export:

• Select format and options
• Preview and download

CLI Export

Requires playwright:

pnpm add -D playwright-chromium

PDF Export

slidev export
slidev export --output my-slides.pdf

PowerPoint Export

slidev export --format pptx

PNG Export

slidev export --format png
slidev export --format png --range 1-5

Markdown Export

slidev export --format md

Export Options

With Click Steps

Export each click as separate page:

slidev export --with-clicks

Dark Mode

slidev export --dark

Slide Range

slidev export --range 1,4-7,10

Table of Contents

PDF with clickable outline:

slidev export --with-toc

Timeout

For slow-rendering slides:

slidev export --timeout 60000

Wait

Wait before capture:

slidev export --wait 2000

Wait Until

Wait condition:

slidev export --wait-until networkidle   # Default
slidev export --wait-until domcontentloaded
slidev export --wait-until load
slidev export --wait-until none

Transparent Background

slidev export --omit-background

Custom Browser

slidev export --executable-path /path/to/chrome

Headmatter Options

---
exportFilename: my-presentation
download: true              # Add download button in build
export:
  format: pdf
  timeout: 30000
  withClicks: false
---

Troubleshooting

Missing Content

Increase wait time:

slidev export --wait 3000 --timeout 60000

Wrong Global Layer State

Use --per-slide or use slide-top.vue instead of global-top.vue.

Broken Emojis

Use system fonts or install emoji font on server.

CI/CD Export

Install playwright browsers:

npx playwright install chromium

Per-Slide Frontmatter

Configuration options for individual slides.

Layout

---
layout: center
---

Available layouts: default, cover, center, two-cols, two-cols-header, image, image-left, image-right, iframe, iframe-left, iframe-right, quote, section, statement, fact, full, intro, end, none

Background

---
background: /image.jpg
backgroundSize: cover
class: text-white
---

Click Count

---
clicks: 5                   # Total clicks for this slide
clicksStart: 0              # Starting click number
---

Transitions

---
transition: fade            # Slide transition
---

Or different for forward/backward:

---
transition: slide-left | slide-right
---

Zoom

---
zoom: 0.8                   # Scale content (0.8 = 80%)
---

Hide Slide

---
disabled: true              # Hide this slide
# or
hide: true
---

Table of Contents

---
hideInToc: true             # Hide from Toc component
level: 2                    # Override heading level
title: Custom Title         # Override slide title
---

Import External File

---
src: ./slides/intro.md      # Import markdown file
---

With specific slides:

---
src: ./other.md#2,5-7       # Import slides 2, 5, 6, 7
---

Route Alias

---
routeAlias: intro           # URL: /intro instead of /1
---

Preload

---
preload: false              # Don't mount until entering
---

Draggable Positions

---
dragPos:
  logo: 100,50,200,100,0    # Left,Top,Width,Height,Rotate
  arrow: 300,200,50,50,45
---

Image Layouts

---
layout: image-left
image: /photo.jpg
backgroundSize: contain
class: my-custom-class
---

Iframe Layouts

---
layout: iframe
url: https://example.com
---

Two Columns

---
layout: two-cols
---

# Left Side

Content

::right::

# Right Side

Content

Two Columns with Header

---
layout: two-cols-header
---

# Header

::left::

Left content

::right::

Right content

Full Example

---
layout: center
background: /bg.jpg
class: text-white text-center
transition: fade
clicks: 3
zoom: 0.9
hideInToc: false
---

# Slide Content

Global Context & API

Access navigation, slide info, and configuration programmatically.

Template Variables

Available in slides and components:

Page {{ $page }} of {{ $nav.total }}
Title: {{ $slidev.configs.title }}

$nav

Navigation state and controls:

$slidev

Global context:

$frontmatter

Current slide frontmatter:

Layout: {{ $frontmatter.layout }}

$clicks

Current click count on slide.

$page

Current page number (1-indexed).

$renderContext

Current render context:

• 'slide' - Normal slide view
• 'overview' - Overview mode
• 'presenter' - Presenter mode
• 'previewNext' - Next slide preview

Composables

Import from @slidev/client:

import {
  useNav,
  useDarkMode,
  useIsSlideActive,
  useSlideContext,
  onSlideEnter,
  onSlideLeave,
} from '@slidev/client'

useNav

const nav = useNav()
nav.next()
nav.go(5)
console.log(nav.currentPage)

useDarkMode

const { isDark, toggle } = useDarkMode()

useIsSlideActive

const isActive = useIsSlideActive()
// Returns ref<boolean>

useSlideContext

const { $page, $clicks, $frontmatter } = useSlideContext()

Lifecycle Hooks

import { onSlideEnter, onSlideLeave } from '@slidev/client'

onSlideEnter(() => {
  // Slide became active
  startAnimation()
})

onSlideLeave(() => {
  // Slide became inactive
  cleanup()
})

Important: Don't use onMounted/onUnmounted in slides - component instance persists. Use onSlideEnter/onSlideLeave instead.

Conditional Rendering Examples

<!-- Show only in presenter mode -->
<div v-if="$nav.isPresenter">
  Presenter notes
</div>

<!-- Hide on cover slide -->
<footer v-if="$nav.currentLayout !== 'cover'">
  Page {{ $nav.currentPage }}
</footer>

<!-- Different content by context -->
<template v-if="$renderContext === 'slide'">
  Normal view
</template>
<template v-else-if="$renderContext === 'presenter'">
  Presenter view
</template>

Type Imports

import type { TocItem } from '@slidev/types'

Headmatter Configuration

Deck-wide configuration options in the first frontmatter block.

Theme & Appearance

---
theme: default              # Theme package or path
colorSchema: auto           # 'auto' | 'light' | 'dark'
favicon: /favicon.ico       # Favicon URL
aspectRatio: 16/9           # Slide aspect ratio
canvasWidth: 980            # Canvas width in px
---

Fonts

---
fonts:
  sans: Roboto
  serif: Roboto Slab
  mono: Fira Code
  provider: google          # 'google' | 'none'
---

Code & Highlighting

---
highlighter: shiki          # Code highlighter
lineNumbers: false          # Show line numbers
monaco: true                # Enable Monaco editor ('true' | 'dev' | 'build')
twoslash: true              # Enable TwoSlash
monacoTypesSource: local    # 'local' | 'cdn' | 'none'
---

Features

---
drawings:
  enabled: true             # Enable drawing mode
  persist: false            # Save drawings
  presenterOnly: false      # Only presenter can draw
  syncAll: true             # Sync across instances
record: dev                 # Enable recording
selectable: true            # Text selection
contextMenu: true           # Right-click menu
wakeLock: true              # Prevent screen sleep
---

Export & Build

---
download: false             # PDF download button
exportFilename: slides      # Export filename
export:
  format: pdf
  timeout: 30000
  withClicks: false
  withToc: false
---

Info & SEO

---
title: My Presentation
titleTemplate: '%s - Slidev'
author: Your Name
keywords: slidev, presentation
info: |
  ## About
  Presentation description
---

SEO Meta Tags

---
seoMeta:
  ogTitle: Presentation Title
  ogDescription: Description
  ogImage: https://example.com/og.png
  ogUrl: https://example.com
  twitterCard: summary_large_image
  twitterTitle: Title
  twitterDescription: Description
  twitterImage: https://example.com/twitter.png
---

Addons & Themes

---
theme: seriph
addons:
  - excalidraw
  - '@slidev/plugin-notes'
---

Theme Configuration

---
themeConfig:
  primary: '#5d8392'
  # Theme-specific options
---

Defaults

Set default frontmatter for all slides:

---
defaults:
  layout: default
  transition: fade
---

HTML Attributes

---
htmlAttrs:
  dir: ltr
  lang: en
---

Presenter & Browser

---
presenter: true             # 'true' | 'dev' | 'build'
browserExporter: dev        # 'true' | 'dev' | 'build'
routerMode: history         # 'history' | 'hash'
---

Remote Assets

---
remoteAssets: false         # Download remote assets locally
plantUmlServer: https://www.plantuml.com/plantuml
---

Full Template

---
theme: default
title: Presentation Title
author: Your Name
highlighter: shiki
lineNumbers: true
transition: slide-left
aspectRatio: 16/9
canvasWidth: 980
fonts:
  sans: Roboto
  mono: Fira Code
drawings:
  enabled: true
  persist: true
download: true
---

Hosting & Deployment

Build and deploy Slidev presentations.

Build for Production

slidev build

Output: dist/ folder (static SPA)

Options

slidev build --base /talks/my-talk/    # Custom base path
slidev build --out public              # Custom output dir
slidev build --download                # Include PDF
slidev build --without-notes           # Exclude notes

Multiple Presentations

slidev build slides1.md slides2.md

GitHub Pages

GitHub Actions

Create .github/workflows/deploy.yml:

name: Deploy

on:
  push:
    branches: [main]

permissions:
  contents: read
  pages: write
  id-token: write

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: 'lts/*'

      - name: Install
        run: npm install

      - name: Build
        run: npm run build -- --base /${{ github.event.repository.name }}/

      - uses: actions/configure-pages@v4

      - uses: actions/upload-pages-artifact@v3
        with:
          path: dist

      - uses: actions/deploy-pages@v4

Netlify

Create netlify.toml:

[build]
  publish = 'dist'
  command = 'npm run build'

[[redirects]]
  from = '/*'
  to = '/index.html'
  status = 200

Vercel

Create vercel.json:

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

Docker

Using Official Image

docker run --name slidev --rm -it \
  -v ${PWD}:/slidev \
  -p 3030:3030 \
  tangramor/slidev:latest

Custom Dockerfile

FROM tangramor/slidev:latest

COPY slides.md .
COPY public ./public

RUN npm run build

EXPOSE 80
CMD ["npx", "serve", "dist"]

Base Path

For subdirectory deployment:

# Build
slidev build --base /my-slides/

# Or in headmatter
---
base: /my-slides/
---

Router Mode

For servers without rewrite support:

---
routerMode: hash
---

URLs become: /#/1, /#/2, etc.

Built-in Layouts

Available layouts for slides.

Basic Layouts

default

Standard slide layout.

---
layout: default
---

center

Content centered horizontally and vertically.

---
layout: center
---

cover

Title/cover slide with centered content.

---
layout: cover
---

end

End slide.

---
layout: end
---

full

Full-screen content, no padding.

---
layout: full
---

none

No layout styling.

---
layout: none
---

Text Layouts

intro

Introduction slide.

---
layout: intro
---

quote

Large quotation display.

---
layout: quote
---

section

Section divider.

---
layout: section
---

statement

Statement/affirmation display.

---
layout: statement
---

fact

Fact/data display.

---
layout: fact
---

Multi-Column Layouts

two-cols

Two columns side by side:

---
layout: two-cols
---

# Left Column

Left content

::right::

# Right Column

Right content

two-cols-header

Header with two columns below:

---
layout: two-cols-header
---

# Header

::left::

Left content

::right::

Right content

Image Layouts

image

Full-screen image:

---
layout: image
image: /photo.jpg
backgroundSize: cover
---

image-left

Image on left, content on right:

---
layout: image-left
image: /photo.jpg
class: my-class
---

# Content on Right

image-right

Image on right, content on left:

---
layout: image-right
image: /photo.jpg
---

# Content on Left

Props: image, class, backgroundSize

Iframe Layouts

iframe

Full-screen iframe:

---
layout: iframe
url: https://example.com
---

iframe-left

Iframe on left, content on right:

---
layout: iframe-left
url: https://example.com
---

# Content

iframe-right

Iframe on right, content on left:

---
layout: iframe-right
url: https://example.com
---

# Content

Layout Loading Order

1. Slidev default layouts 2. Theme layouts 3. Addon layouts 4. Custom layouts (./layouts/)

Later sources override earlier ones.

Custom Layouts

Create layouts/my-layout.vue:

<template>
  <div class="slidev-layout my-layout">
    <slot />
  </div>
</template>

<style scoped>
.my-layout {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

With named slots:

<template>
  <div class="slidev-layout two-areas">
    <div class="top">
      <slot name="top" />
    </div>
    <div class="bottom">
      <slot />
    </div>
  </div>
</template>

Usage:

---
layout: two-areas
---

::top::

Top content

::default::

Bottom content

Slidev Markdown Syntax

Core Markdown syntax for Slidev presentations.

Slide Separator

Use --- with blank lines before and after:

# Slide 1

Content

---

# Slide 2

More content

Headmatter (Deck Config)

First frontmatter block configures the entire deck:

---
theme: default
title: My Presentation
lineNumbers: true
---

# First Slide

Per-Slide Frontmatter

Each slide can have its own frontmatter:

---
layout: center
background: /image.jpg
class: text-white
---

# Centered Slide

Presenter Notes

HTML comments at end of slide become presenter notes:

# My Slide

Content here

<!--
These are presenter notes.
- Remember to mention X
- Demo the feature
-->

Code Blocks

Standard Markdown with Shiki highlighting:

````md

const hello = 'world'

````

With features: ```md `ts {2,3} // Line highlighting `ts {1|2-3|all} // Click-based highlighting `ts {monaco} // Monaco editor `ts {monaco-run} // Runnable code ``ts twoslash // TypeScript types

LaTeX Math

Inline: $E = mc^2$

Block:

$$
\frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
$$

Diagrams

Mermaid: ````md

graph LR
  A --> B --> C

````

PlantUML: ````md

@startuml
Alice -> Bob : Hello
@enduml

````

Comark Syntax

Enable with comark: true:

[styled text]{style="color:red"}
![](/image.png){width=500px}
::component{prop="value"}

Scoped CSS

Styles apply only to current slide:

# Red Title

<style>
h1 { color: red; }
</style>

Import Slides

---
src: ./pages/intro.md
---

Import specific slides:

---
src: ./other.md#2,5-7
---

LaTeX

Render mathematical equations. Powered by KaTeX.

Inline Math

$\sqrt{3x-1}+(1+x)^2$

Block Math

$$
\begin{aligned}
\nabla \cdot \vec{E} &= \frac{\rho}{\varepsilon_0} \\
\nabla \cdot \vec{B} &= 0
\end{aligned}
$$

Line Highlighting

$$ {1|3|all}
\begin{aligned}
\nabla \cdot \vec{E} &= \frac{\rho}{\varepsilon_0} \\
\nabla \cdot \vec{B} &= 0 \\
\nabla \times \vec{E} &= -\frac{\partial\vec{B}}{\partial t}
\end{aligned}
$$

Chemical Equations

Enable mhchem extension in vite.config.ts:

import 'katex/contrib/mhchem'

export default {}

Then use:

$$
\ce{B(OH)3 + H2O <--> B(OH)4^- + H+}
$$

Mermaid Diagrams

Create diagrams from text descriptions.

Basic Usage

````md

sequenceDiagram
  Alice->John: Hello John, how are you?
  Note over Alice,John: A typical interaction

````

With Options

```md ``mermaid {theme: 'neutral', scale: 0.8} graph TD B[Text] --> C{Decision} C -->|One| D[Result 1] C -->|Two| E[Result 2]

Diagram Types

• graph / flowchart - Flow diagrams
• sequenceDiagram - Sequence diagrams
• classDiagram - Class diagrams
• stateDiagram - State diagrams
• erDiagram - Entity relationship
• gantt - Gantt charts
• pie - Pie charts

Resources

• Mermaid docs: https://mermaid.js.org/
• Live editor: https://mermaid.live/

PlantUML Diagrams

Create UML diagrams from text descriptions.

Basic Usage

````md

@startuml
Alice -> Bob : Hello!
@enduml

````

Server Configuration

Default: Uses https://www.plantuml.com/plantuml

Custom server in headmatter:

---
plantUmlServer: https://your-server.com/plantuml
---

Diagram Types

• Sequence diagrams
• Class diagrams
• Activity diagrams
• Component diagrams
• State diagrams
• Object diagrams
• Use case diagrams

Resources

• PlantUML docs: https://plantuml.com/
• Live editor: https://plantuml.com/plantuml

Monaco Runner

Run code directly in the editor and see results.

Basic Usage

```md ``ts {monaco-run} function distance(x: number, y: number) { return Math.sqrt(x 2 + y 2) } console.log(distance(3, 4))

Shows a "Run" button and displays output below the code.

Disable Auto-run

```md ``ts {monaco-run} {autorun:false} console.log('Click the play button to run me')

Show Output on Click

```md ``ts {monaco-run} {showOutputAt:'+1'} console.log('Shown after 1 click')

Supported Languages

• JavaScript
• TypeScript

For other languages, configure custom code runners in /custom/config-code-runners.

Writable Monaco Editor

Edit code and save changes back to the file.

Usage

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

Behavior

• Links Monaco editor to actual file on filesystem
• Changes are saved directly to the file
• Useful for live coding demonstrations

Warning

Back up files before using - changes are saved directly.

Monaco Editor

Turn code blocks into fully-featured editors.

Basic Usage

```md ``ts {monaco} console.log('HelloWorld')

Diff Editor

Compare two code versions:

```md ``ts {monaco-diff} console.log('Original text') ~~~ console.log('Modified text')

Editor Height

Auto-grow as you type:

```md ``ts {monaco} {height:'auto'} console.log('Hello, World!')

Fixed height:

```md ``ts {monaco} {height:'300px'} // code here

Configuration

See /custom/config-monaco for Monaco editor customization options.

Prettier Plugin

Format Slidev markdown files correctly.

Installation

pnpm i -D prettier prettier-plugin-slidev

Configuration

Create/modify .prettierrc:

{
  "overrides": [
    {
      "files": ["slides.md", "pages/*.md"],
      "options": {
        "parser": "slidev",
        "plugins": ["prettier-plugin-slidev"]
      }
    }
  ]
}

Why Needed

Slidev's syntax (frontmatter, code blocks) may conflict with default Markdown formatting. This plugin understands Slidev-specific syntax.

Note

Must specify files via overrides since Slidev and regular Markdown share .md extension.

Integrated Editor

Edit slides source alongside the presentation.

Open Editor

Click the edit icon in the navigation panel.

Features

• Live reload on changes
• Auto-save to file
• Side-by-side editing
• Syntax highlighting

Use Case

Make quick edits during presentation preparation without switching applications.

VS Code Extension

Manage slides visually in VS Code.

Installation

Install from VS Code Marketplace: antfu.slidev

Features

• Preview slides in side panel
• Slides tree view
• Drag and drop to reorder slides
• Folding for slide blocks
• Multiple project support
• One-click dev server start

Usage

1. Click Slidev icon in activity bar 2. Projects tree shows all Slidev projects in workspace 3. Slides tree shows slides in active project 4. Preview panel shows live preview

Commands

Type Slidev in command palette to see available commands.

Configuration

Include specific files as Slidev entries:

{
  "slidev.include": ["**/presentation.md"]
}

Custom dev command:

{
  "slidev.dev-command": "pnpm slidev ${args}"
}

Placeholders

• ${args} - All CLI arguments
• ${port} - Port number

Slide Canvas Size

Set the canvas dimensions for all slides.

Configuration

---
aspectRatio: 16/9
canvasWidth: 980
---

• aspectRatio: Ratio of width to height (default: 16/9)
• canvasWidth: Canvas width in pixels (default: 980)

Related Features

• Scale individual slides: use zoom frontmatter option
• Scale elements: use <Transform> component

Draggable Elements

Move, resize, and rotate elements by dragging during presentation.

Directive Usage

With Frontmatter Position

---
dragPos:
  square: Left,Top,Width,Height,Rotate
---

<img v-drag="'square'" src="https://sli.dev/logo.png">

Inline Position

<img v-drag="[Left,Top,Width,Height,Rotate]" src="https://sli.dev/logo.png">

Component Usage

---
dragPos:
  foo: Left,Top,Width,Height,Rotate
---

<v-drag pos="foo" text-3xl>
  Draggable content
</v-drag>

Draggable Arrow

<v-drag-arrow />

Controls

• Double-click: Start dragging
• Arrow keys: Move element
• Shift + drag: Preserve aspect ratio
• Click outside: Stop dragging

Auto Height

Set Height to NaN or _ for auto height based on content.

Global Layers

Create components that persist across slides.

Layer Files

Create in project root:

• global-top.vue - Above all slides (single instance)
• global-bottom.vue - Below all slides (single instance)
• slide-top.vue - Above each slide (per-slide instance)
• slide-bottom.vue - Below each slide (per-slide instance)
• custom-nav-controls.vue - Custom navigation controls

Z-Order (top to bottom)

1. NavControls / custom-nav-controls.vue 2. global-top.vue 3. slide-top.vue 4. Slide Content 5. slide-bottom.vue 6. global-bottom.vue

Example: Footer

<!-- global-bottom.vue -->
<template>
  <footer class="absolute bottom-0 left-0 right-0 p-2">Your Name</footer>
</template>

Conditional Rendering

<!-- Hide on cover layout -->
<template>
  <footer v-if="$nav.currentLayout !== 'cover'" class="absolute bottom-0 p-2">
    {{ $nav.currentPage }} / {{ $nav.total }}
  </footer>
</template>

Export Note

Use --per-slide export option when global layers depend on navigation state.

Slot Sugar for Layouts

Shorthand syntax for layout named slots.

Standard Vue Slot Syntax

---
layout: two-cols
---

<template v-slot:default>

# Left

This shows on the left

</template>
<template v-slot:right>

# Right

This shows on the right

</template>

Shorthand Syntax

---
layout: two-cols
---

# Left

This shows on the left

::right::

# Right

This shows on the right

Explicit Default Slot

---
layout: two-cols
---

::right::

# Right

This shows on the right

::default::

# Left

This shows on the left

Common Layouts with Slots

• two-cols: default (left) and right
• two-cols-header: default, left, right
• image-left/right: default for content

Transform Component

Scale elements without affecting slide layout.

Usage

<Transform :scale="0.5" origin="top center">
  <YourElements />
</Transform>

Props

• scale: Scale factor (0.5 = 50%, 2 = 200%)
• origin: Transform origin (CSS transform-origin value)

Use Cases

• Shrink large diagrams
• Scale code blocks
• Fit oversized content
• Create emphasis effects

Related Features

• Scale all slides: Use canvasWidth / aspectRatio in headmatter
• Scale individual slides: Use zoom frontmatter option

Zoom Slides

Scale individual slide content.

Usage

---
zoom: 0.8
---

# A Slide with lots of content

---

# Other slides aren't affected

Values

• zoom: 0.8 - 80% size (fits more content)
• zoom: 1.2 - 120% size (larger, less content)
• zoom: 1 - Normal (default)

Use Cases

• Fit dense content on one slide
• Make text more readable
• Adjust for different content densities

Related Features

• Scale all slides: Use canvasWidth / aspectRatio in headmatter
• Scale elements: Use <Transform> component

Notes Auto Ruby

Automatically add ruby text (pronunciation guides) to presenter notes.

Configuration

---
notesAutoRuby:
  日本語: ni hon go
  勉強: べんきょう
---

Example

Notes:

<!--
私は日本語を勉強しています。
-->

Renders with ruby annotations above the matched words.

Use Case

• Language learning presentations
• Pronunciation guides for technical terms
• Reading assistance for non-native text

Recording

Record presentations with built-in camera and screen capture.

Camera View

Click the camera icon in navigation bar to show camera overlay.

• Drag to move
• Resize from bottom-right corner
• Position persists across reloads

Start Recording

Click the video icon in navigation bar.

Options:

• Camera embedded in slides
• Separate video files for camera and slides

Saves as WebM video.

Technology

Powered by RecordRTC and WebRTC API.

Remote Access

Share presentation across network or internet.

Enable Remote Access

slidev --remote

Password Protection

slidev --remote=your_password

Password required for presenter mode access.

Remote Tunnel

Expose to internet via Cloudflare Quick Tunnels:

slidev --remote --tunnel

Creates public URL for sharing without server setup.

Use Cases

• Control presentation from phone/tablet
• Multiple presenters
• Remote presentations
• Live streaming
• Audience viewing on their devices

Presenter Timer

Timer and progress bar in presenter mode.

Configuration

---
duration: 30min
timer: stopwatch
---

Options

• duration: Presentation length (default: 30min)
• timer: Mode - stopwatch or countdown (default: stopwatch)

Features

• Start, pause, reset controls
• Progress bar showing time elapsed/remaining
• Visible only in presenter mode

Duration Format

• 30min - 30 minutes
• 1h - 1 hour
• 45min - 45 minutes

Navigation Direction Variants

Apply different styles based on navigation direction (forward/backward).

CSS Classes

/* Delay only when navigating forward */
.slidev-nav-go-forward .slidev-vclick-target {
  transition-delay: 500ms;
}
.slidev-nav-go-backward .slidev-vclick-target {
  transition-delay: 0;
}

UnoCSS Variants

Use forward: or backward: prefix:

<div v-click class="transition forward:delay-300">Element</div>

Animation is only delayed when navigating forward, not when going back.

Use Case

Create asymmetric animations where entering a slide feels different from leaving it.

Icons

Use any open-source icon directly in markdown. Powered by unplugin-icons and Iconify.

Installation

pnpm add @iconify-json/[collection-name]

Usage

Use component syntax <collection-icon-name />:

<mdi-account-circle />
<carbon-badge />
<uim-rocket />
<logos-vue />

Popular Collections

• @iconify-json/mdi - Material Design Icons
• @iconify-json/carbon - Carbon Design
• @iconify-json/logos - SVG Logos
• @iconify-json/twemoji - Twitter Emoji

Styling

Style like any HTML element:

<uim-rocket class="text-3xl text-red-400 mx-2" />
<uim-rocket class="text-3xl text-orange-400 animate-ping" />

Browse Icons

• https://icones.js.org/
• https://icon-sets.iconify.design/

Slide Scope Styles

Define CSS that applies only to the current slide.

Usage

# This is Red

<style>
h1 {
  color: red;
}
</style>

---

# Other slides are not affected

Scoped by Default

All <style> tags in slides are automatically scoped.

Child combinators (.a > .b) don't work as expected due to scoping.

Nested CSS with UnoCSS

# Slidev

> Hello **world**

<style>
blockquote {
  strong {
    --uno: 'text-teal-500 dark:text-teal-400';
  }
}
</style>

Global Styles

For global styles, use styles/index.css in your project.

Block Frontmatter

Use a YAML code block as the frontmatter for slides when you need syntax highlighting and formatter support.

Usage

Instead of traditional frontmatter ---, use a yaml code block at the start of a slide:

````md --- theme: default ---

Slide 1

---

layout: quote

Slide 2

---

Slide 3

````

Key Points

• Works for per-slide frontmatter only
• Cannot use for headmatter (first frontmatter of the deck)
• Provides syntax highlighting in editors
• Compatible with prettier-plugin-slidev

Frontmatter Merging

When importing slides, frontmatter from main entry takes priority.

Example

Main file (slides.md):

---
src: ./cover.md
background: https://sli.dev/bar.png
class: text-center
---

Imported file (cover.md):

---
layout: cover
background: https://sli.dev/foo.png
---

# Cover

Cover Page

Result

---
layout: cover
background: https://sli.dev/bar.png  # main entry wins
class: text-center
---

# Cover

Cover Page

Priority Rule

Main entry > Imported file for duplicate keys.

Importing Slides

Split presentations into multiple files for reusability.

Basic Import

# Title

This is a normal page

---
src: ./pages/toc.md
---

<!-- Content here is ignored -->

---

# Page 4

Another normal page

Import Specific Slides

Use hash to select slides:

---
src: ./another-presentation.md#2,5-7
---

Imports slides 2, 5, 6, and 7.

Reuse Slides

Import the same file multiple times:

---
src: ./pages/toc.md
---

<!-- later... -->

---
src: ./pages/toc.md
---

Frontmatter Priority

Main entry frontmatter overrides imported file frontmatter for duplicate keys.

Comark Syntax

Enhanced Markdown with component and style syntax.

Enable

---
comark: true
---

Inline Styles

This is a [red text]{style="color:red"}

Inline Components

:inline-component{prop="value"}

Image Attributes

![](/image.png){width=500px lazy}

Block Components

::block-component{prop="value"}
The **default** slot content
::

Use Cases

• Add inline styles without HTML
• Use Vue components inline
• Add attributes to images
• Create complex component layouts

Based on Comark Syntax.

Eject Theme

Extract installed theme to local filesystem for customization.

Command

slidev theme eject

Result

• Theme files copied to ./theme/
• Frontmatter updated to theme: ./theme

Use Case

• Full control over theme
• Create new theme based on existing one
• Customize without modifying node_modules

If creating a derivative theme, credit the original theme and author.

Sync Info

• Source: vendor/slidev/skills/slidev
• Git SHA: d76850db564ee03afbc4652b36f1bfe3e5602225
• Synced: 2026-03-16