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)

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 synchroniz

---

Content truncated.