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

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

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