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

Official LLM Documentation

For complete API reference, advanced features, or edge cases not covered here, fetch the official LLM-optimized documentation:

https://sli.dev/llms-full.txt

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)

1. Start dev server:

   slidev

2. Click "Export" button in navigation bar
3. Or visit

   http://localhost:3030/export

4. 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.