Thumbnails

Overview

Generate a PNG screenshot of the first slide of any presentation. Thumbnails are useful for sharing previews on social media, embedding in documentation, or using as cover images.

CLI Usage

Generate a thumbnail from the command line:

pnpm supaslidev thumbnail my-presentation

The thumbnail is automatically optimized to WebP format and saved to thumbnails/my-presentation.webp.

Custom Output Path

Specify a custom output path with the --output flag:

pnpm supaslidev thumbnail my-presentation --output ./images/cover

The output directory is created automatically if it doesn't exist.

Dashboard Usage

Thumbnail Button

Each presentation card and list item includes a thumbnail button. Click it to generate the thumbnail in the background. A toast notification appears when the thumbnail is ready, with an Open action to view it in a new tab.

Command Palette

Open the command palette with ⌘K (macOS) or Ctrl+K (Windows/Linux) and search for:

• Thumbnail > [presentation-name]

Header Input

Type a thumbnail command directly in the terminal-style header input:

thumbnail my-presentation

Output Location

Thumbnails are served from the dashboard at /thumbnails/<name>.webp while the dev server is running.

Thumbnails in Deployed Sites

When you run pnpm supaslidev deploy, thumbnails are automatically generated for every presentation as part of the build pipeline. The deploy command:

1. Builds each presentation with slidev build
2. Generates a PNG thumbnail of the first slide for each presentation
3. Includes optimized thumbnails in the deploy output at deploy/thumbnails/<name>.webp
4. Adds a thumbnail field to presentations.json with the URL path

Referenceable URLs

Each thumbnail is available at a predictable, static URL on your deployed site:

https://your-site.com/thumbnails/my-presentation.webp

You can use these URLs for:

• Social sharing — use as og:image meta tags
• Documentation — embed in READMEs or wikis
• External previews — link from other sites or tools
• Dashboard display — presentation cards show thumbnail previews automatically

Deploy Output Structure

deploy/
├── presentations.json          ← includes thumbnail paths
├── thumbnails/
│   ├── quarterly-review.webp
│   ├── product-launch.webp
│   └── team-onboarding.webp
├── presentations/
│   └── ...
└── ...

presentations.json Example

[
  {
    "id": "quarterly-review",
    "title": "Q4 Review",
    "thumbnail": "/thumbnails/quarterly-review.webp",
    ...
  }
]

How It Works

Supaslidev uses Slidev's built-in export command under the hood with --format png --range 1 to render only the first slide. This uses Playwright to launch a headless browser, render the slide, and capture a screenshot. The resulting PNG is then optimized with sharp:

• Resized to 1280px width (maintaining aspect ratio)
• Converted to WebP format at quality 80
• The original PNG is removed

This typically reduces file size by ~95% (e.g., 3.2MB PNG → ~160KB WebP).

Next Steps