Presentation Mode

Turn your blog posts into beautiful slides with incremental reveals

Why Presentation Mode?#

The Problem: You write a great blog post, then need to present it at a meetup.

Old Solution: Recreate everything in PowerPoint or Google Slides.

New Solution: Just add presentation: true to your frontmatter!

---
title: "My Awesome Post"
presentation: true
---

Keyboard Shortcuts#

Drawing Annotations

Draw directly on slides with Excalidraw!

Try Drawing Mode#

Press D to toggle drawing mode. A toolbar will appear with these tools:

• ↖ Selection - Select and move drawings
• ✏️ Freedraw - Freehand drawing (press P)
• → Arrow - Draw arrows (press A)
• □ Rectangle - Draw rectangles (press R)
• ○ Ellipse - Draw circles (press O)
• T Text - Add text annotations (press T)
• 🧹 Eraser - Erase drawings (press E)

Drawing Features#

Colors: 6 preset colors - Red, Blue, Green, Yellow, White, Black

Stroke Widths: 3 sizes - Thin (1px), Medium (2px), Thick (4px)

Persistence: Drawings stay when you navigate between slides!

Shortcuts:

• C - Clear current slide
• Shift+C - Clear all slides
• Escape - Exit drawing mode

Use Cases#

Why draw on slides during presentations?

• Circle important code sections
• Draw arrows connecting concepts
• Add quick annotations for Q&A
• Highlight key points in diagrams
• Sketch ideas during discussions

V-Click Animations

Reveal content step-by-step with Slidev-style click animations

Sequential Reveals#

Press → to reveal each point:

Step 1: First, we define the problem clearly.

Step 2: Then, we explore possible solutions.

Step 3: Finally, we implement and test!

Building a List#

Benefits of incremental reveals:

• Keeps audience focused on the current point
• Creates natural pacing for your talk
• Prevents information overload
• Makes complex topics digestible

V-Click Syntax#

In MDX files, use components to control reveals:

<VClick />
Content appears on click

<VClicks>
- Each list item
- Gets its own click
</VClicks>

<VClick order={3} />
Explicit order (appears third)

<VClick hide />
This disappears on click

Custom Components

Interactive React components work in slides!

Context Window Visualizer#

This is a custom React component rendered inside a slide:

Try typing messages to see the context fill up!

Code Blocks Work Perfectly#

Here’s a Vue composable example with full syntax highlighting:

import { ref, computed } from 'vue'

export function useCounter(initial = 0) {
  const count = ref(initial)

  const double = computed(() => count.value * 2)

  function increment() {
    count.value++
  }

  return { count, double, increment }
}

Magic Move: Code Evolution#

Watch code transform with smooth animations (press → to advance):

const x = 1

Each arrow press animates the code to its next state!

Mermaid Diagrams#

Flowcharts render beautifully in slides:

Animated Diagrams#

Interactive diagrams with self-contained animations:

Click Start to see the Explore subagent flow animation!

Slide Layouts

Available Layouts#

This feature supports 9 different layout types:

Iframe Layout#

Embed live demos, CodePen, StackBlitz, or videos directly in slides:

This is a live StackBlitz embed - fully interactive!

Layout Syntax#

In .md files, use HTML comments. In .mdx files, use components:

{/* MDX format */}
<Slide layout="cover" />
# My Title

---

{/* .md format */}
<!--slide:{"layout":"cover"}-->
# My Title

Layout Properties#

All layouts accept these properties:

Layout Animations#

Each layout type has its own animation:

Technical Details

Architecture Overview#

Tips for Great Slides#

Content Length#

• Short slides work best
• If content overflows, it scrolls within the slide
• But try to keep each slide digestible
• Use v-clicks to break up longer content

Accessibility Features#

• Focus trap - Tab stays within the modal
• ARIA live region - Announces “Slide X of Y, Step N of M”
• Escape to exit - Standard modal behavior
• Keyboard navigation - No mouse required
• Theme aware - Respects light/dark mode
• Reduced motion - V-click respects prefers-reduced-motion

Speaker Notes & Presenter View#

Press N to open the presenter view popup!

The presenter view shows:

• Current and next slide previews
• Speaker notes with click-step highlighting
• A timer you can start/pause/reset
• Navigation controls

Notes with Click Markers#

Notes can reveal progressively with your click steps:

Step 1: Define the problem

Step 2: Explore solutions

Step 3: Implement and ship!

Thank You!

Press Escape to exit or continue with arrow keys

Quick Reference#

File format trade-offs:

Press Escape to exit presentation mode!