slidev-export

name	slidev-export
description	Export Slidev presentations to PDF, PPTX, and PNG. Use this skill for sharing, printing, and archiving presentations.

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:

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

CLI Export

Requires playwright-chromium:

npm install -D playwright-chromium

Then:

npx slidev export

Export Formats

PDF Export

Browser Method:

1. Open /export
2. Select "PDF"
3. Configure options
4. Download

CLI Method:

npx slidev export

Output: ./slides-export.pdf

PPTX Export

Browser Method:

1. Open /export
2. Select "PPTX"
3. 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

Table of Contents

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

1. Use web fonts (Google Fonts)
2. Or embed fonts in styles

Code Not Highlighting

1. Ensure Shiki loads before export
2. Use --wait option

Images Missing

1. Use absolute URLs or
2. 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]/