Slidev Presentations

Create and edit markdown-based presentations using Slidev syntax.

Before writing slides: Read references/style-and-tone.md for storytelling principles and presentation philosophy.

When to Use

• •Creating new slide decks from topics/outlines
• •Editing existing slides.md files
• •Adding animations, code highlighting, or diagrams to presentations
• •User mentions "slidev", "sli.dev", or "presentation slides"
• •Creating story-driven presentations with clear narrative arcs

Quick Reference

Quick Start

New Presentation

1. •Follow references/project-bootstrap.md for project setup
2. •Create slides.md with headmatter (deck-wide config)
3. •Use --- with blank lines to separate slides
4. •Add layouts, animations, and code as needed

Edit Existing

1. •Read the existing slides.md
2. •Preserve headmatter and existing structure
3. •Make targeted edits

Core Syntax

Slide Separators

Use --- with blank lines before and after:

# Slide 1

Content here

---

# Slide 2

More content

Headmatter (First Block)

Deck-wide configuration at the very top:

---
theme: seriph
title: My Presentation
author: Your Name
transition: slide-left
fonts:
  sans: "Poppins"
  provider: "google"
---

Fonts Configuration

Configure custom fonts from Google Fonts in headmatter:

fonts:
  sans: "Poppins" # Body text font
  serif: "Robot Slab" # Serif font (optional)
  mono: "Fira Code" # Code font (optional)
  provider: "google" # Load from Google Fonts

Preferred font: Poppins - Use the Poppins font family as the default sans-serif font for presentations.

Per-Slide Frontmatter

Configure individual slides:

---
layout: center
background: /image.png
class: text-white
---

Speaker Notes

Add as HTML comments at end of slide:

# My Slide

Content here

<!--
Speaker notes go here.
Supports **markdown**.
-->

Layouts Quick Reference

See layouts.md for all 19 layouts with examples.

Two-Column Example

---
layout: two-cols
---

# Left Side

Content on left

::right::

# Right Side

Content on right

Image Layout Example

---
layout: image-right
image: /diagram.png
---

# Title

Explanation on the left

Animations

v-click (Reveal on Click)

<v-click>Appears on click</v-click>

<div v-click>Also works as directive</div>

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

v-clicks (Animate List Items)

<v-clicks>

- Item 1
- Item 2
- Item 3

</v-clicks>

v-after (With Previous)

<div v-click>First</div>
<div v-after>Appears with First</div>

Hide on Click

<div v-click.hide>Visible initially, hides on click</div>

Click Ranges

<div v-click="[2, 4]">Visible from click 2 to 4</div>

Ghost Preview (Show Hidden as Faded)

Override default hiding to show upcoming content as faint preview. See animations.md for CSS.

Code Blocks

Basic Syntax Highlighting

```ts
const hello = "world";
```

Line Highlighting

```ts {2,3}
const a = 1;
const b = 2; // highlighted
const c = 3; // highlighted
```

Animated Line Highlighting

Use | to step through highlights on click:

```ts {2|3|4}
const a = 1;
const b = 2; // click 1
const c = 3; // click 2
const d = 4; // click 3
```

Magic Move (Animated Code Transitions)

Animate between code blocks:

````md magic-move
```ts
const count = 1
```
```ts
const count = ref(1)
```
````

See magic-move.md for full documentation.

Code Groups (Tabbed)

```bash [npm]
npm install slidev
```

```bash [yarn]
yarn add slidev
```

See code-groups.md for details.

Mermaid Diagrams

```mermaid
graph LR
    A[Start] --> B{Decision}
    B -->|Yes| C[Action]
    B -->|No| D[Other]
```

With configuration:

```mermaid {theme: 'neutral', scale: 0.8}
sequenceDiagram
    Alice->>Bob: Hello
    Bob-->>Alice: Hi
```

Supported types: graph, sequenceDiagram, classDiagram, stateDiagram-v2, erDiagram, gantt, pie, gitGraph

See mermaid.md and plantuml.md for more diagram options.

User Comments

Users may leave inline comments in slides for you to address later. The format is:

[comment content]::

Examples:

• •[fix this]:: - Generic fix needed
• •[needs screenshot]:: - Add an image here
• •[split into two slides]:: - Restructure this content

Workflow:

1. •When you encounter comments, extract ALL to a list first
2. •Address each comment systematically
3. •Remove the comment marker after addressing

Common Mistakes

CLI Commands

See cli.md for all commands and exporting.md for export options.

References

Setup & Philosophy

• •project-bootstrap.md - Project setup checklist (Node version, VS Code settings)
• •style-and-tone.md - Storytelling principles, tone, and presentation philosophy

Core Features

• •syntax-basics.md - Slide separators, headmatter, frontmatter, notes
• •layouts.md - All 19 built-in layouts
• •animations.md - v-click, v-motion, transitions
• •components.md - Arrow, Link, Toc, Transform, etc.

Code Features

• •code-highlighting.md - Syntax highlighting, Monaco, TwoSlash
• •magic-move.md - Animated code transitions
• •code-groups.md - Tabbed code blocks
• •monaco-diff.md - Side-by-side code comparison

Diagrams & Math

• •mermaid.md - Mermaid diagram types
• •plantuml.md - UML diagrams
• •latex.md - Mathematical notation

Layout & Positioning

• •slots.md - Named slots for layouts
• •transform.md - Scale/rotate content
• •zoom.md - Zoom content
• •draggable.md - Drag-to-position elements
• •global-layers.md - Persistent overlays
• •canvas-size.md - Aspect ratio control

Advanced Composition

• •importing-slides.md - Include slides from other files
• •frontmatter-merging.md - Frontmatter inheritance
• •mdc.md - MDC syntax for components

Styling & Export

• •styling.md - UnoCSS, scoped CSS, themes
• •exporting.md - PDF, PPTX, PNG export
• •cli.md - CLI commands, installation

External

• •Official docs: https://sli.dev
• •LLM-optimized docs: https://sli.dev/llms-full.txt