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#

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 }
}

Mermaid Diagrams#

Flowcharts render beautifully in slides:

Slide Layouts

Available Layouts#

This feature supports 9 different layout types:

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

What’s NOT Included (Yet)#

Future enhancements could include:

• Presenter notes (separate view)
• Export to PDF
• Speaker timer
• Touch/swipe gestures
• Dual-screen presenter view

Want these features? Open an issue!

Thank You!

Press Escape to exit or continue with arrow keys

Quick Reference#

File format trade-offs:

Press Escape to exit presentation mode!