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

slidev-presenter-mode