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

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