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

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

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