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