Exporting Slidev Presentations Skill

Exporting Slidev Presentations

This skill covers all export options in Slidev, including PDF, PPTX, PNG, and Markdown exports with various configuration options.

When to Use This Skill

Sharing presentations without running Slidev
Creating PDF handouts
Archiving presentations
Printing slides
Converting to PowerPoint

Export Methods

Browser Exporter (Recommended)

Since v0.50.0, use the built-in browser exporter:

Run your presentation: npm run dev
Open the Export panel from navigation bar
Or navigate to: http://localhost:3030/export
Choose format and options
Click Export

CLI Export

Requires playwright-chromium:

npm install -D playwright-chromium

Then:

npx slidev export

Export Formats

PDF Export

Browser Method:

Open /export
Select "PDF"
Configure options
Download

CLI Method:

npx slidev export

Output: ./slides-export.pdf

PPTX Export

Browser Method:

Open /export
Select "PPTX"
Download

CLI Method:

npx slidev export --format pptx

Output: ./slides-export.pptx

Note: Slides exported as images, presenter notes included.

PNG Export

CLI Method:

npx slidev export --format png

Output: Individual PNG files in ./slides-export/ directory.

Markdown Export

npx slidev export --format md

Compiles Markdown with embedded PNG images.

CLI Options

Basic Options

| Option | Description | |--------|-------------| | --format | Export format: pdf, pptx, png, md | | --output | Output file/directory name | | --dark | Export in dark mode | | --with-clicks | Export each click as separate page | | --range | Export specific slides |

Examples

Custom output name:

npx slidev export --output my-presentation

Dark mode export:

npx slidev export --dark

Export with clicks:

npx slidev export --with-clicks

Creates separate pages for each animation step.

Specific slides:

npx slidev export --range 1,4-5,8

Exports slides 1, 4, 5, and 8.

Advanced Options

Timeout Settings

For complex slides with animations:

npx slidev export --timeout 60000

Increases timeout to 60 seconds.

Wait for Content

npx slidev export --wait 10000

Waits 10 seconds before starting export.

Page Loading Strategy

npx slidev export --wait-until networkidle

Options: none, load, domcontentloaded, networkidle

npx slidev export --with-toc

Generates PDF outline with slide titles.

Transparent Background (PNG)

npx slidev export --format png --omit-background

Removes default white background.

Configuration in Frontmatter

Export Filename

---
exportFilename: my-awesome-presentation
---

Download Button

---
download: true
---

Shows download button in presentation.

Export with Source

---
download: 'https://example.com/slides.pdf'
---

Links to pre-generated PDF.

Handling Click Animations

Without --with-clicks

Only final state of each slide exported.

With --with-clicks

Each click step becomes a separate page:

Slide 1, Click 0 → Page 1
Slide 1, Click 1 → Page 2
Slide 1, Click 2 → Page 3
Slide 2, Click 0 → Page 4
etc.

Recommended for Handouts

Use --with-clicks for handouts so readers see progression.

Export Quality

PDF Resolution

npx slidev export --scale 2

Higher scale = higher quality (and larger file).

PNG Resolution

npx slidev export --format png --scale 2

Package.json Scripts

Add convenient scripts:

{
  "scripts": {
    "dev": "slidev --open",
    "build": "slidev build",
    "export": "slidev export",
    "export:pdf": "slidev export --format pdf",
    "export:pptx": "slidev export --format pptx",
    "export:png": "slidev export --format png",
    "export:dark": "slidev export --dark"
  }
}

Handling Export Issues

Fonts Not Rendering

Use web fonts (Google Fonts)
Or embed fonts in styles

Code Not Highlighting

Ensure Shiki loads before export
Use --wait option

Images Missing

Use absolute URLs or
Place in public/ directory

Animations Broken

Export doesn't include animations. Use --with-clicks to capture states.

Timeout Errors

npx slidev export --timeout 120000 --wait 5000

Memory Issues

For large presentations:

NODE_OPTIONS="--max-old-space-size=4096" npx slidev export

Export vs Build

| | Export | Build | |---|--------|-------| | Output | PDF/PPTX/PNG | Static website | | Interactive | No | Yes | | Animations | Static captures | Working | | Size | Smaller | Larger | | Sharing | Email/Drive | Web hosting |

Best Practices

1. Test Export Early

Don't wait until presentation day:

npm run export

2. Review PDF Thoroughly

Check:

All slides included
Code readable
Images appear
Colors correct

3. Use Consistent Aspect Ratio

Standard is 16:9. Don't change mid-presentation.

4. Simplify for Export

Some features don't export well:

Videos → Use screenshots
iframes → Use screenshots
Complex animations → Simplify

5. Include Speaker Notes in PPTX

PPTX export includes notes automatically.

6. Version Your Exports

npx slidev export --output presentation-v1.2

Export Workflow

For Conference Submission

# High-quality PDF
npx slidev export --with-toc --scale 2

For Handouts

# Include all click states
npx slidev export --with-clicks

For Social Media

# Individual images
npx slidev export --format png

For Archiving

# Multiple formats
npm run export:pdf
npm run export:pptx
npm run export:png

Output Format

When exporting:

# EXPORT COMMAND:
npx slidev export [options]

# OPTIONS USED:
--format [pdf|pptx|png|md]
--output [filename]
--with-clicks (if needed)
--dark (if needed)
--range [slide numbers]
--timeout [ms]
--wait [ms]

CHECKLIST BEFORE EXPORT:

[ ] All slides render correctly
[ ] Code blocks are readable
[ ] Images load properly
[ ] Fonts are correct
[ ] Test export command works

OUTPUT FILES:

PDF: ./[name].pdf
PPTX: ./[name].pptx
PNG: ./[name]/

Agent Skills: Exporting Slidev Presentations

Install this agent skill to your local

Skill Files