name	slidev
description	Comprehensive guide for Slidev - a web-based presentation framework for developers. Covers Markdown syntax, layouts, components, animations, theming, and exporting. Use this skill when creating or working with developer presentations using Slidev.

Slidev

Overview

Slidev is a presentation platform for developers that enables creating slides using Markdown while leveraging Vue and web technologies for interactive, pixel-perfect designs. This skill provides complete guidance for creating, customizing, and exporting Slidev presentations.

Use this skill when:

Creating new developer presentations
Working with Markdown-based slides
Adding interactive components and animations
Customizing slide layouts and themes
Integrating code blocks with syntax highlighting
Exporting presentations to PDF, PPTX, or PNG
Setting up Slidev projects

Quick Start

Installation and Setup

Create a new Slidev presentation:

# Using pnpm (recommended)
pnpm create slidev

# Using npm
npm init slidev

# Using yarn
yarn create slidev

# Using bun
bun create slidev

Or try online at https://sli.dev/new (StackBlitz)

Essential Commands

Start development server:

slidev
# or specify entry file
slidev slides.md

Build for production:

slidev build

Export to PDF:

slidev export

Export to other formats:

slidev export --format pptx
slidev export --format png
slidev export --format md

Format slides:

slidev format

Markdown Syntax

Slide Separators

Separate slides with --- padded by blank lines:

# Slide 1

Content here

---

# Slide 2

More content

Frontmatter and Headmatter

Configure entire deck with headmatter (first YAML block):

---
theme: default
background: https://cover.sli.dev
title: My Presentation
info: |
  ## Slidev Starter
  Presentation slides for developers
class: text-center
highlighter: shiki
---

Configure individual slides with frontmatter:

---
layout: center
background: ./images/bg.jpg
class: text-white
---

# Centered Slide

Content here

Code Blocks

Code with syntax highlighting:

```ts
console.log('Hello, World!')
```

With line numbers:

```ts {lines:true}
function greet(name: string) {
  console.log(`Hello, ${name}!`)
}
```

With line highlighting:

```ts {2,4-6}
function calculate() {
  const x = 10  // highlighted
  const y = 20
  const sum = x + y  // highlighted
  const product = x * y  // highlighted
  const difference = x - y  // highlighted
  return sum
}
```

Presenter Notes

Add notes at the end of slides using comment blocks:

# Slide Title

Content visible to audience

<!--
Notes for presenter only
Can include **markdown** and HTML
-->

Layouts

Using Layouts

Specify layout in frontmatter:

---
layout: cover
---

# Presentation Title

Built-in Layouts

Basic Layouts:

default - Standard layout for any content
center - Centers content on screen
cover - Opening slide for presentations
end - Closing slide
none - Unstyled layout

Content Layouts:

intro - Introduction with title and author details
section - Marks new presentation sections
quote - Displays quotations with emphasis
fact - Highlights data or facts prominently
statement - Features affirmations as main content
full - Utilizes entire screen space

Image Layouts:

image - Full-screen image display
image-left - Image on left, content on right
image-right - Image on right, content on left

Iframe Layouts:

iframe - Full-screen web page embedding
iframe-left - Web page on left side
iframe-right - Web page on right side

Multi-Column Layouts:

two-cols - Two-column content separation
two-cols-header - Header spanning both columns with left/right split

Two-Column Layout Example

---
layout: two-cols
---

# Left Column

Content for left side

::right::

# Right Column

Content for right side

Two-Column with Header

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

# Header Across Both Columns

::left::

Left column content

::right::

Right column content

Components

Built-in Components

Navigation:

<Link> - Navigate between slides
<Arrow> - Directional lines with customization
<VDragArrow> - Draggable arrows

Text:

<AutoFitText> - Auto-sizing text to fit container
<TitleRenderer> - Display parsed slide titles
<Toc> - Table of contents generation

Media:

<Youtube> - Embed YouTube videos
<Tweet> - Embed Twitter posts
<SlidevVideo> - HTML5 video with autoplay

Utilities:

<SlideCurrentNo> - Current slide number
<SlidesTotal> - Total slide count
<Transform> - Scaling and transformation
<LightOrDark> - Theme-based content rendering
<RenderWhen> - Conditional rendering by context
<VSwitch> - Cycle between content on click
<VDrag> - Draggable functionality

Component Usage Examples

<Youtube id="dQw4w9WgXcQ" />

<Tweet id="1234567890" />

<Arrow x1="100" y1="100" x2="200" y2="200" />

<AutoFitText :max="300" :min="20">
  This text will auto-size
</AutoFitText>

<Toc minDepth="1" maxDepth="2" />

Custom Components

Create custom Vue components in ./components/ directory. They are auto-imported without manual registration.

Example structure:

./components/
  MyComponent.vue
  Counter.vue
slides.md

Use in slides:

<MyComponent />

<Counter :initial="10" />

Animations

Click Animations

v-click Directive:

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

v-after Directive:

<div v-click>First</div>
<div v-after>Appears with previous</div>

v-clicks for Lists:

<v-clicks>

- First item
- Second item
- Third item

</v-clicks>

Animation Positioning

Absolute positioning:

<div v-click="1">Shows at step 1</div>
<div v-click="2">Shows at step 2</div>
<div v-click="3">Shows at step 3</div>

Relative positioning:

<div v-click>First</div>
<div v-click="+2">Skip one step</div>
<div v-click="-1">Same time as previous</div>

Motion Animations

Use @vueuse/motion for directional animations:

<div
  v-motion
  :initial="{ x: -80 }"
  :enter="{ x: 0 }">
  Slides in from left
</div>

Slide Transitions

Configure in frontmatter:

---
transition: slide-left
---

Available transitions:

fade
slide-left
slide-right
slide-up
slide-down
view-transition

Styling

UnoCSS Integration

Slidev uses UnoCSS with Tailwind-compatible utilities:

<div class="grid grid-cols-2 gap-4">
  <div class="bg-blue-500 p-4">Column 1</div>
  <div class="bg-red-500 p-4">Column 2</div>
</div>

Custom Styles

Create ./styles/index.css:

.my-custom-class {
  @apply text-2xl font-bold text-blue-500;
}

Slide-Scoped Styles

Add styles to specific slides:

# Slide Title

Content here

<style>
h1 {
  color: #3b82f6;
}
</style>

Dark Mode Support

UnoCSS dark mode utilities:

<div class="bg-white dark:bg-black text-black dark:text-white">
  Adapts to theme
</div>

Exporting

Browser Export (Recommended)

Start dev server: slidev
Click "Export" button in navigation bar
Or visit http://localhost:3030/export
Choose format and download

CLI Export

Install Playwright first:

pnpm add -D playwright-chromium

Export to PDF:

slidev export
# or specify output
slidev export --output my-presentation.pdf

Export to PPTX:

slidev export --format pptx

Export to PNG:

slidev export --format png

Export with animations:

slidev export --with-clicks

Export specific slides:

slidev export --range 1,6-8,10

Export in dark mode:

slidev export --dark

Export Options

--output - Custom filename
--format - Export format (pdf, pptx, png, md)
--with-clicks - Include animation steps
--range - Specific slides (e.g., 1,6-8,10)
--dark - Use dark theme
--timeout - Increase timeout for large presentations
--wait - Add delay before export
--with-toc - Generate PDF outline

Configuration

Directory Structure

./
├─ components/       # Custom Vue components
├─ layouts/          # Custom layouts
├─ public/           # Static assets
├─ setup/            # Custom setup code
├─ snippets/         # Code snippets
├─ styles/           # Custom styles
├─ slides.md         # Main presentation file
├─ vite.config.ts    # Vite configuration
└─ uno.config.ts     # UnoCSS configuration

UnoCSS Configuration

Create uno.config.ts:

import { defineConfig } from 'unocss'

export default defineConfig({
  shortcuts: {
    'bg-main': 'bg-white text-[#181818] dark:(bg-[#121212] text-[#ddd])'
  }
})

Vite Configuration

Extend Vite config in vite.config.ts:

import { defineConfig } from 'vite'

export default defineConfig({
  // Your custom Vite config
})

Features

Code Features

Line Numbers:

```ts {lines:true}
function example() {
  return true
}
```

Line Highlighting:

```ts {2-4}
function calculate() {
  const x = 10  // highlighted
  const y = 20  // highlighted
  const sum = x + y  // highlighted
  return sum
}
```

Monaco Editor:

```ts {monaco}
// Editable code block
console.log('Edit me!')
```

Monaco with Auto-Run:

```ts {monaco-run}
console.log('Runs automatically')
```

Diagrams

Mermaid:

```mermaid
graph TD
  A[Start] --> B[Process]
  B --> C[End]
```

PlantUML:

```plantuml
@startuml
Alice -> Bob: Hello
Bob -> Alice: Hi
@enduml
```

LaTeX

Inline math:

Pythagorean theorem: $a^2 + b^2 = c^2$

Block math:

$$
\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
$$

Icons

Use Iconify icons directly:

<carbon-logo-github /> GitHub
<mdi-heart class="text-red-500" /> Love

Drawing

Enable drawing on slides with presenter mode. Drawings are synchronized across devices.

Recording

Record presentations with audio using the built-in recording feature.

Advanced Features

Importing Slides

Import slides from other files:

---
src: ./slides/intro.md
---

---
src: ./slides/content.md
---

Global Layers

Create global-top.vue or global-bottom.vue for persistent UI elements:

<!-- global-top.vue -->
<template>
  <div class="fixed top-0 left-0 right-0 p-4">
    Header content on all slides
  </div>
</template>

Custom Shortcuts

Configure in frontmatter:

---
shortcuts:
  next: space
  prev: shift+space
  toggleOverview: o
---

Remote Access

Enable remote control for presentations:

slidev --remote

Access from another device using the displayed URL.

Theming

Using Themes

Install theme package:

pnpm add slidev-theme-seriph

Configure in headmatter:

---
theme: seriph
---

Available Official Themes

default - Built-in default theme
seriph - Elegant serif theme
apple-basic - Apple-style theme
bricks - Brick-pattern theme
shibainu - Cute Shiba Inu theme

Browse more at https://sli.dev/themes/gallery

Creating Custom Themes

Generate theme package:

pnpm create slidev-theme

For detailed theme development, see references/theming.md.

Best Practices

Organization

Use one slide per concept
Keep slides focused and minimal
Use layouts consistently
Group related slides in sections

Performance

Optimize images before importing
Lazy load heavy components
Use built-in components when possible
Test export early for large presentations

Collaboration

Version control slides.md and assets
Document custom components
Share themes via npm packages
Use consistent formatting

Presenting

Test presenter mode before presenting
Prepare speaker notes
Test all interactive features
Have PDF backup ready

Troubleshooting

Build Issues

If build fails, try:

# Clear cache
rm -rf node_modules/.vite

# Rebuild
slidev build

Export Issues

Missing content: Add wait time

slidev export --wait 2000

Broken emojis: Install system fonts or use icon libraries

Large file size: Export specific slides or reduce image quality

Port Conflicts

Specify custom port:

slidev --port 3333

Theme Not Loading

Ensure theme is installed:

pnpm add slidev-theme-NAME

And configured correctly in headmatter:

---
theme: NAME
---

Resources

For comprehensive documentation on specific topics, see:

references/syntax-guide.md - Complete Markdown syntax reference
references/components-api.md - Detailed component API documentation
references/theming.md - Theme creation and customization
references/features.md - Advanced features and integrations

Official Links

Website: https://sli.dev
Documentation: https://sli.dev/guide
GitHub: https://github.com/slidevjs/slidev
Themes Gallery: https://sli.dev/themes/gallery
Discord Community: https://chat.sli.dev

Common Workflows

Creating Basic Presentation

# Initialize
pnpm create slidev

# Edit slides.md
# Add content with Markdown

# Start dev server
slidev

# Export when done
slidev export

Using Custom Components

# Create component
mkdir components
cat > components/Counter.vue << 'EOF'
<script setup lang="ts">
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">
    Count: {{ count }}
  </button>
</template>
EOF

# Use in slides.md
# <Counter />

Theming Workflow

# Install theme
pnpm add slidev-theme-seriph

# Configure in slides.md headmatter
# ---
# theme: seriph
# ---

# Preview
slidev

Multi-File Presentation

Create slide files:

mkdir slides
echo "# Introduction" > slides/intro.md
echo "# Content" > slides/content.md

Import in slides.md:

---
src: ./slides/intro.md
---

---
src: ./slides/content.md
---

Technology Stack

Slidev is built on:

Vite - Fast build tool
Vue 3 - Component framework
UnoCSS - Atomic CSS engine
Shiki - Syntax highlighter
Monaco Editor - Code editor
Mermaid - Diagram generation
KaTeX - Math rendering
VueUse - Vue composition utilities
Iconify - Icon library

This enables fast development, rich interactivity, and extensive customization options.

Install Skill

SKILL.md