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:

console.log('Hello, World!')

With line numbers:

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

With line highlighting:

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:

function example() {
  return true
}

Line Highlighting:

function calculate() {
  const x = 10  // highlighted
  const y = 20  // highlighted
  const sum = x + y  // highlighted
  return sum
}

Monaco Editor:

// Editable code block
console.log('Edit me!')

Monaco with Auto-Run:

console.log('Runs automatically')

Diagrams

Mermaid:

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

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.