Create Slidev Presentation

Slidev

Overview

Enable creation and editing of high-quality Slidev presentations. Slidev is a web-based presentation framework that uses Markdown with Vue 3 components, providing features like live code editing, syntax highlighting, animations, and export to multiple formats.

Key capabilities:

• Create presentations from markdown with YAML configuration
• Use 17 built-in layouts plus custom layouts
• Add click animations, transitions, and motion effects
• Embed live code editors (Monaco) with TypeScript support
• Include diagrams (Mermaid, PlantUML), LaTeX math, and media
• Export to PDF, PPTX, PNG, or static web application

Requirements: Node.js >= 24.0.0

Quick Start

Creating a New Presentation

# Initialize project
pnpm create slidev

# Or with specific entry file
pnpm create slidev my-slides

# Start development server
cd my-slides
pnpm run dev

Minimal Presentation Structure

---
theme: default
title: My Presentation
---

# Welcome

Introduction slide

---

# Second Slide

Content here

---
layout: end
---

# Thank You

Slide separator: Three dashes (---) padded with new lines

Creating Presentations

Structure Decision Tree

Is this a new presentation?

• Yes → Use template from assets/slide-templates.md or assets/example-configurations.md
• No → See "Editing Presentations" section

What type of presentation?

• Business/Professional → Use seriph theme, simple transitions
• Technical/Code-heavy → Enable monaco, lineNumbers, use code templates
• Conference/Workshop → Enable drawings, record, presenter mode
• Educational → Use clear layouts, diagrams, progressive disclosure
• Design-focused → Minimalist theme, fade transitions, large typography

Configuration Approach

Start with minimal headmatter, add features as needed:

Step 1 - Minimal (always include):

---
theme: default
title: Presentation Title
---

Step 2 - Add features (based on content):

---
theme: seriph
title: Presentation Title
author: Your Name
mdc: true
lineNumbers: true  # For code
monaco: dev        # For live code
transition: slide-left
---

Step 3 - Optimize (for specific use case):

• Code presentations: Add twoslash, higher canvasWidth (1200)
• Media-heavy: Set aspectRatio: 16/9, optimize fonts
• Export-focused: Configure export options, set exportFilename

Layout Selection

Use appropriate layout for each slide's purpose:

Specify layout in per-slide frontmatter:

---
layout: two-cols
---

Reference: references/layouts-reference.md for all 17 layouts with examples

Component Usage

Built-in components for common needs:

Click animations:

<v-clicks>

- Item 1
- Item 2
- Item 3

</v-clicks>

Media embedding:

<Youtube id="dQw4w9WgXcQ" />
<Tweet id="1234567890" />

Navigation:

<Link to="42">Go to slide 42</Link>
<Toc minDepth="1" maxDepth="2" />

Reference: references/components-reference.md for complete component library

Code Presentation

Basic code block:

```typescript
const greeting: string = 'Hello, Slidev!'
console.log(greeting)
```

With line highlighting (incremental):

```ts {1|3-4|all}
const step1 = 'First'
// Highlight line 1
const step2 = 'Second'
const step3 = 'Third'
// Then highlight lines 3-4
// Finally highlight all
```

Interactive editor:

```ts {monaco-run}
console.log('Runs in browser!')
```

Best practices:

1. Always specify language for syntax highlighting
2. Use incremental highlighting to guide attention
3. Keep code blocks under 20 lines (use {maxHeight:'200px'} if longer)
4. Enable lineNumbers: true for code-heavy presentations

Animations

Progressive disclosure (most common):

<v-clicks>

- Point 1
- Point 2
- Point 3

</v-clicks>

Element-level control:

<div v-click>Appears on click 1</div>
<div v-click>Appears on click 2</div>
<div v-click="3">Appears on click 3</div>

Motion animations:

<div
  v-motion
  :initial="{ x: -80, opacity: 0 }"
  :enter="{ x: 0, opacity: 1 }"
>
  Animated entrance
</div>

Slide transitions:

---
transition: slide-left
---

Options: fade, slide-left, slide-right, slide-up, slide-down, view-transition

Editing Presentations

Modification Strategy

Step 1 - Read and understand:

1. Read slides.md to understand structure
2. Identify headmatter (first frontmatter block)
3. Note layouts and components used

Step 2 - Make targeted changes:

• Add slides: Insert --- separator and new content
• Modify content: Edit markdown between separators
• Change layouts: Update per-slide frontmatter
• Adjust config: Modify headmatter or create slidev.config.ts

Step 3 - Test changes:

slidev  # Verify in dev server

Common Editing Tasks

Add slide after specific slide:

1. Find target slide content
2. Add separator (---) after it
3. Add new slide content

Change slide layout:

---
layout: two-cols  # Change this
---

Add click animations to list:

<v-clicks>

- Existing item 1
- Existing item 2

</v-clicks>

Enable feature globally: Update headmatter:

---
# Add/update these
monaco: dev
lineNumbers: true
---

Split long presentation: Create pages/section1.md, then in main slides.md:

---
src: ./pages/section1.md
---

Common Patterns

Use pre-built templates from assets/slide-templates.md:

Title slide pattern:

---
layout: cover
background: /cover.jpg
class: text-center
---

# Title

## Subtitle

Author · Date

Code demo pattern:

---
layout: two-cols
---

```ts {monaco-run}
// Interactive code
```

::right::

# Explanation

- Point 1
- Point 2

Comparison pattern:

---
layout: two-cols
---

# Before

Old approach

::right::

# After

New approach

Section divider pattern:

---
layout: section
background: linear-gradient(to right, #667eea, #764ba2)
class: text-white
---

# Part 2: Implementation

Complete examples: See assets/example-configurations.md for full presentation templates

Export & Build

Export to PDF

# Basic export
slidev export

# With options
slidev export --output presentation.pdf
slidev export --with-clicks  # Include animations
slidev export --dark         # Dark mode
slidev export --range 1,4-8  # Specific slides

Prerequisites: Install playwright-chromium

pnpm add -D playwright-chromium

Export to Other Formats

slidev export --format pptx   # PowerPoint
slidev export --format png    # PNG images
slidev export --format md     # Markdown with PNGs

Build Static Site

slidev build
slidev build --base /slides/  # For subdirectory hosting

Deploy dist/ directory to static hosting (Netlify, Vercel, GitHub Pages).

Configuration Reference

Essential Headmatter Options

---
# Theme
theme: seriph  # or: default, apple-basic, carbon, dracula, nord, etc.

# Metadata
title: Presentation Title
author: Your Name
info: |
  ## Description
  Multi-line supported

# Features
mdc: true              # Enable MDC syntax
monaco: dev            # Enable Monaco editor
lineNumbers: true      # Line numbers in code
twoslash: true         # TypeScript type info
download: true         # PDF download button

# Appearance
colorSchema: auto      # auto, light, or dark
transition: slide-left # Global transition

# Layout
aspectRatio: 16/9
canvasWidth: 980

# Fonts
fonts:
  sans: Inter
  mono: JetBrains Mono
  weights: '300,400,600,700'
  provider: google

# Export
exportFilename: my-presentation
export:
  format: pdf
  withClicks: false
  dark: false
---

Complete reference: See references/configuration-reference.md

Per-Slide Frontmatter

---
layout: center           # Slide layout
background: /image.jpg   # Background image
class: text-white        # CSS classes
transition: fade         # Override global
clicks: 5                # Number of clicks
hideInToc: true         # Hide from TOC
zoom: 0.8               # Scale content
routeAlias: solutions   # Navigation alias
---

Troubleshooting

Common Issues

Slides not updating:

slidev --force  # Clear cache

Layout not found:

• Check layout name spelling (case-sensitive)
• Verify theme includes layout
• Create custom layout in ./layouts/

Code not highlighting:

• Specify language: ```typescript not ```
• Check for syntax errors
• Clear cache: slidev --force

Export fails or hangs:

pnpm add -D playwright-chromium  # Install first
slidev export --timeout 60000    # Increase timeout
slidev export --wait 2000         # Add wait time

Monaco not working:

• Set monaco: 'dev' or monaco: true in headmatter
• Clear cache
• Check browser console for errors

Images not loading:

• Path must start with / for public folder
• Verify file in public/ directory
• Check browser console for 404s

Complete guide: See references/troubleshooting.md

Best Practices

Content Organisation

1. One idea per slide - Don't overcrowd
2. 6x6 rule - Max 6 lines, 6 words per line
3. Visual hierarchy - Use heading levels consistently
4. Progressive disclosure - Use <v-clicks> for lists
5. Consistent styling - Stick to theme

Code Presentation

1. Specify language - Always enable syntax highlighting
2. Line highlighting - Guide attention: {1|3-5|all}
3. Keep it short - Under 20 lines per block
4. Use Monaco - For interactive demos
5. Font size - Ensure readability (use zoom if needed)

Performance

1. Optimise images - Compress, use WebP
2. Lazy load - preload: false on heavy slides
3. Limit animations - Balance engagement vs. performance
4. Local assets - Use /public folder
5. Disable unused features - monaco: false if not needed

Accessibility

1. Colour contrast - Minimum 4.5:1 ratio
2. Alt text - Describe images
3. Font size - Minimum 24pt body text
4. Test keyboard navigation - Arrow keys should work
5. Avoid flashing - No rapid animations (<3/second)

Resources

This skill includes comprehensive documentation:

references/

• layouts-reference.md - All 17 built-in layouts with examples
• components-reference.md - Complete component library and custom patterns
• configuration-reference.md - All configuration options and setup files
• troubleshooting.md - Common issues and solutions

assets/

• slide-templates.md - Ready-to-use templates for common slide types
• example-configurations.md - Complete example configurations for different use cases

Official Documentation

• Website: https://sli.dev
• Docs: https://sli.dev/guide/
• GitHub: https://github.com/slidevjs/slidev
• Themes: https://sli.dev/resources/theme-gallery

Workflow Example

User request: "Create a technical presentation about TypeScript best practices"

Step 1: Choose template from assets/example-configurations.md → "Technical/Code-Heavy Presentation"

Step 2: Create slides.md with appropriate headmatter:

---
theme: default
title: TypeScript Best Practices
author: Developer Name
monaco: dev
lineNumbers: true
twoslash: true
---

Step 3: Add slides using templates from assets/slide-templates.md:

• Cover slide
• Section dividers
• Code demonstration slides
• Comparison slides
• End slide

Step 4: Start dev server to preview:

slidev

Step 5: Export when ready:

slidev export --format pdf