slidev-presenter-mode

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:

1. Current Slide - What audience sees
2. Next Slide Preview - Upcoming slide
3. Speaker Notes - Your notes
4. Timer - Elapsed/remaining time
5. Slide Navigator - Quick jump to any slide
6. 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

1. Open browser in Play mode on external display:

   http://localhost:3030
   

2. Open browser in Presenter mode on your screen:

   http://localhost:3030/presenter
   

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

1. Start server with remote access:

   slidev --remote
   

2. Note the displayed URL (or use local network IP)

3. Open URL on phone/tablet

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

1. Click record button in presenter mode
2. Select screen/window to record
3. Optionally enable camera
4. Start recording

Recording Options

• Screen only
• Screen + camera
• Camera picture-in-picture

Presentation Workflow

Before Presenting

1. Test Setup: Verify dual-screen works
2. Review Notes: Read through all speaker notes
3. Practice: Run through with timer
4. Check Animations: Verify all clicks work
5. Test Remote: If using phone control

During Presentation

1. Use Notes: Glance at key points
2. Watch Timer: Stay on schedule
3. Preview Next: Know what's coming
4. 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:

1. Both access presenter mode
2. Designate who controls navigation
3. Others can view but not control

Rehearsal Mode

# Practice without audience
slidev --open

Then use presenter mode locally to practice.

Troubleshooting

Windows Not Syncing

1. Check both are on same URL base
2. Refresh both windows
3. Check network/firewall

Notes Not Showing

1. Verify comment syntax: <!-- notes -->
2. Notes must be at end of slide
3. 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:

1. URL for audience: http://localhost:3030
2. URL for presenter: http://localhost:3030/presenter
3. Remote URL: http://[IP]:3030/?password=[pass]