Slidev Presenter Mode

This skill covers using Slidev's presenter mode for professional presentations, including speaker notes, timers, slide overview, and remote control features.

When to Use This Skill

• Preparing for a live presentation

• Adding speaker notes

• Using dual-screen setup

• Remote control from phone

• Rehearsing with timer

Accessing Presenter Mode

Via Navigation

Click the presenter icon in the navigation bar (bottom-left).

Via URL

Navigate directly to:

http://localhost:3030/presenter

Keyboard Shortcut

Press p to toggle presenter mode (depends on configuration).

Presenter Interface

The presenter view shows:

• Current Slide - What audience sees

• Next Slide Preview - Upcoming slide

• Speaker Notes - Your notes

• Timer - Elapsed/remaining time

• Slide Navigator - Quick jump to any slide

• Click Counter - Current animation state

Speaker Notes

Adding Notes

Use HTML comments at the end of a slide:

My Slide

Content visible to audience.

<!-- Speaker notes here:

• Remember to mention X
• Demo the feature
• Ask for questions -->

Markdown in Notes

Notes support Markdown formatting:

<!--

Key Points

1. Important: Emphasize this
2. Note: Optional detail
3. Code reference: Show in demo

Quote to read aloud -->

Multi-line Notes

<!-- First paragraph of notes.

Second paragraph with more details.

• Bullet point 1
• Bullet point 2 -->

Notes Best Practices

<!-- TIMING: 2 minutes

KEY MESSAGE: Our solution reduces deployment time by 50%

REMEMBER TO:

• Show the demo
• Mention the case study
• Ask if there are questions

TRANSITION: "Now let's look at how this works in practice..." -->

Dual-Screen Setup

Recommended Setup

Open browser in Play mode on external display:

http://localhost:3030

Open browser in Presenter mode on your screen:

http://localhost:3030/presenter

Share/project the Play mode window to audience

Automatic Sync

Both windows automatically synchronize:

• Navigation stays in sync

• Click animations sync

• Drawings sync (if enabled)

Timer Features

Starting/Stopping

• Click the timer to start/pause

• Click again to resume

Timer Display

Shows:

• Elapsed time

• Can be configured for countdown

Timer Tips

• Start timer when beginning presentation

• Use for time management

• Visible only to presenter

Remote Control

From Another Device

Start server with remote access:

slidev --remote

Note the displayed URL (or use local network IP)

Open URL on phone/tablet

Control presentation remotely

Password Protection

slidev --remote=your_password

Then access with:

http://[ip]:3030/presenter?password=your_password

QR Code

Slidev can display a QR code for easy mobile access.

Overview Mode

Accessing Overview

• Press o key

• Or navigate to /overview

Features

• See all slides at once

• Click to jump to any slide

• Edit notes inline (in overview mode)

• Preview click animations

Navigation in Presenter Mode

Keyboard Shortcuts

Key Action

Space / →

Next animation/slide

←

Previous animation/slide

↑ / ↓

Previous/next slide (skip animations)

o

Overview mode

g

Go to slide number

Esc

Exit fullscreen/overview

Touch/Swipe

On touch devices:

• Swipe left: Next slide

• Swipe right: Previous slide

Click Areas

In presenter mode:

• Left side: Previous

• Right side: Next

Presenter Mode Configuration

In Frontmatter

Remote access settings

remote: true

Presenter notes settings

presenter: true

Disable Presenter for Shared Links

When sharing:

slidev build

The built version doesn't include presenter mode by default.

Drawing Tools

Enabling Drawings

drawings: enabled: true persist: false syncAll: true

Using Drawings

• Click pen icon in presenter mode

• Draw on current slide

• Drawings sync to audience view

Presenter-Only Drawings

drawings: presenterOnly: true

Only presenter can draw, visible to all.

Recording Features

Built-in Recording

• Click record button in presenter mode

• Select screen/window to record

• Optionally enable camera

• Start recording

Recording Options

• Screen only

• Screen + camera

• Camera picture-in-picture

Presentation Workflow

Before Presenting

• Test Setup: Verify dual-screen works

• Review Notes: Read through all speaker notes

• Practice: Run through with timer

• Check Animations: Verify all clicks work

• Test Remote: If using phone control

During Presentation

• Use Notes: Glance at key points

• Watch Timer: Stay on schedule

• Preview Next: Know what's coming

• Control Pace: Use click counter

Checklist

PRE-PRESENTATION:

• Laptop charged/plugged in
• Projector/display connected
• Correct resolution set
• Browser in fullscreen (F11)
• Notifications disabled
• Presenter window on laptop screen
• Play window on projector

DURING:

• Timer started
• Notes visible
• Water nearby

POST:

• Save any drawings
• Export if needed

Advanced Features

Custom Presenter Layout

You can customize the presenter view through themes.

Multiple Presenters

For co-presenting:

• Both access presenter mode

• Designate who controls navigation

• Others can view but not control

Rehearsal Mode

Practice without audience

slidev --open

Then use presenter mode locally to practice.

Troubleshooting

Windows Not Syncing

• Check both are on same URL base

• Refresh both windows

• Check network/firewall

Notes Not Showing

• Verify comment syntax: <!-- notes -->

• Notes must be at end of slide

• Check for syntax errors before notes

Timer Reset

Timer persists during session but resets on page reload.

Output Format

When preparing presenter content:

[Slide Title]

[Visible content for audience]

<!-- TIMING: [X minutes]

KEY POINTS:

• [Main message to convey]
• [Secondary point]

DEMO/ACTION:

• [What to show/do]

TRANSITION TO NEXT: "[Connecting phrase to next slide]" -->

PRESENTER SETUP:

• URL for audience: http://localhost:3030

• URL for presenter: http://localhost:3030/presenter

• Remote URL: http://[IP]:3030/?password=[pass]