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:

code

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:

markdown

# 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:

markdown

<!--
## Key Points

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

> Quote to read aloud
-->

Multi-line Notes

markdown

<!--
First paragraph of notes.

Second paragraph with more details.

- Bullet point 1
- Bullet point 2
-->

Notes Best Practices

markdown

<!--
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:
code
```
http://localhost:3030
```
•
Open browser in Presenter mode on your screen:
code
```
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:
bash
```
slidev --remote
```
•
Note the displayed URL (or use local network IP)
•
Open URL on phone/tablet
•
Control presentation remotely

Password Protection

bash

slidev --remote=your_password

Then access with:

code

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

yaml

---
# Remote access settings
remote: true

# Presenter notes settings
presenter: true
---

Disable Presenter for Shared Links

When sharing:

bash

slidev build

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

Drawing Tools

Enabling Drawings

yaml

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

yaml

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

markdown

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

bash

# 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:

markdown

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