Slidev Presentation Creation

Create presentations as markdown files that Slidev renders into interactive slide decks.

Quick Start

Initialize a new presentation:

pnpm create slidev
# or: npm init slidev@latest

Run development server:

pnpm slidev

Export to PDF:

pnpm slidev export

Basic Structure

A Slidev presentation is a single slides.md file:

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

# Slide 1 Title

Content here

---

# Slide 2 Title

More content

---
layout: center
---

# Centered Slide

• --- separates slides (must have blank lines around it)
• First --- block is headmatter (configures entire presentation)
• Subsequent --- blocks configure individual slides

Headmatter Options

---
theme: default          # Theme name (seriph, apple-basic, etc.)
title: Presentation     # Browser tab title
info: |                 # Presentation metadata
  ## About
  Description here
transition: slide-left  # Default slide transition
---

Slide Frontmatter

Configure individual slides:

---
layout: center          # Layout type
background: /image.png  # Background image
class: text-white       # CSS classes
transition: fade        # Override transition
---

Layouts

Two-column example:

---
layout: two-cols
---

# Left Column

Content here

::right::

# Right Column

Content here

Code Blocks

Basic syntax highlighting:

```ts
const greeting = 'Hello World'
console.log(greeting)
```

Line Highlighting

Highlight specific lines with {lines}:

```ts {2,3}
function add(a: number, b: number) {
  const sum = a + b  // highlighted
  return sum         // highlighted
}
```

Click-Based Highlighting

Use | to animate highlights on click:

```ts {1|2-3|all}
function greet(name: string) {
  const message = `Hello, ${name}`
  console.log(message)
}
```

Line Numbers

Add line numbers with {lines: true}:

```ts {lines: true}
const a = 1
const b = 2
```

Click Animations

v-click

Show elements on click:

<v-click>

This appears after one click

</v-click>

Or as directive:

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

v-clicks

Apply to all children (great for lists):

<v-clicks>

- First item
- Second item
- Third item

</v-clicks>

Click Ordering

Control animation sequence:

<div v-click="3">Third</div>
<div v-click="1">First</div>
<div v-click="2">Second</div>

Hide on Click

<div v-click.hide>Disappears on click</div>

Speaker Notes

Add notes as HTML comments at slide end:

# My Slide

Content here

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

Diagrams

Mermaid

```mermaid
graph TD
  A[Start] --> B{Decision}
  B -->|Yes| C[Action 1]
  B -->|No| D[Action 2]
```

With options:

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

Advanced Features

Shiki Magic Move

Animate code changes between states using four backticks:

````md magic-move
```js
const count = 1
```
```js
const count = 1
const doubled = count * 2
```
```js
const count = 1
const doubled = count * 2
console.log(doubled)
```
````

Motion Animations

<div
  v-motion
  :initial="{ x: -80, opacity: 0 }"
  :enter="{ x: 0, opacity: 1 }"
>
  Slides in from left
</div>

Slide Transitions

Built-in transitions: fade, slide-left, slide-right, slide-up, slide-down

---
transition: slide-left
---

Different forward/backward:

---
transition: slide-left | slide-right
---

References

• Layouts reference: Complete layout documentation with examples
• Animations reference: Detailed animation and transition guide
• Code features reference: Advanced code block features

Presentation Tips for Technical Talks

1. One idea per slide – Keep slides focused
2. Use code sparingly – Show only relevant lines, highlight what matters