feat: handout export (slides + notes + cover/footer/ending)

[oripka]

Introduces a dedicated handout export that renders one A4 page per slide with:

• a scaled slide preview,
• speaker notes,
• and a customizable footer.

Optionally, a multi-page cover can be prepended.
Export is supported both in the CLI and the browser exporter, designed for reliable print output.

Handout rendering and routes

• New print routes for handout and cover, enabled whenever print or browser exporter features are active.

  • packages/client/setup/routes.ts
  • packages/client/pages/handout/print.vue
  • packages/client/pages/cover/print.vue

Page layout

• Each page: slide (top), notes (middle), footer (bottom).

• Uses fixed A4 dimensions in CSS pixels (96 DPI).

• Enforces print media styles for consistency.

  • packages/client/internals/PrintHandout.vue
  • packages/client/internals/PrintContainerHandout.vue

Virtual global components (user-overridable)

• Auto-discovers handout-cover.vue / HandoutCover.vue and handout-bottom.vue / HandoutBottom.vue.

• Falls back to no-op components if not present.

• Props like pageNumber are forwarded (supports camel/kebab case).

  • packages/slidev/node/virtual/handout-components.ts
  • packages/slidev/node/virtual/index.ts

CLI integration

• slidev export --handout → <output>-handout.pdf.

• --cover prepends cover pages if defined.

• --range limits exported slides.

• Uses fixed A4 viewport and print media for stability.

  • packages/slidev/node/commands/export.ts
  • packages/slidev/node/cli.ts
  • packages/types/src/cli.ts

Print safety

• Disables slide-sized @page rules for handout/cover routes so A4 applies cleanly.

  • packages/client/composables/usePrintStyles.ts

Navigation updates

• isPrintMode now includes handout and cover.

  • packages/client/composables/useNav.ts

Starter examples

• Demo components provided:

  • demo/starter/handout-cover.vue
  • demo/starter/handout-bottom.vue

Usage

CLI

# Regular slides export (unchanged)
slidev export --output slides.pdf

# Handout export
slidev export --handout --output slides.pdf

# Handout with cover
slidev export --handout --cover --output slides.pdf

# With range
slidev export --handout --range 1,3-5 --output slides.pdf

👉 Produces slides-handout.pdf.

Browser

• Run dev server.
• Open /handout?print, /handout?cover, or /handout?range=1,3-5.
• Print to PDF (set paper size = A4, enable background graphics).

Customization

• Cover: add handout-cover.vue for one or more cover pages. Use .break-after-page to force page breaks.
• Footer: add handout-bottom.vue to customize footer content (e.g. company name, year). Receives pageNumber prop.
• Footer layout reserves space; top rule is drawn by the container. Page numbering offsets correctly when cover pages exist.

Implementation Notes

• Fixed A4 viewport + print media reduce risk of black/blank pages during export.
• Uses preferCSSPageSize, zero margins, and light color scheme.
• Cover page offset computed by counting .break-after-page elements.

[netlify]

✅ Deploy Preview for slidev ready!

Name	Link
🔨 Latest commit	568e47a
🔍 Latest deploy log	https://app.netlify.com/projects/slidev/deploys/68d25309f437c70008a1738d
😎 Deploy Preview	https://deploy-preview-2278--slidev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[pkg-pr-new]

Open in StackBlitz

@slidev/client

npm i https://pkg.pr.new/slidevjs/slidev/@slidev/client@2278

create-slidev

npm i https://pkg.pr.new/slidevjs/slidev/create-slidev@2278

create-slidev-theme

npm i https://pkg.pr.new/slidevjs/slidev/create-slidev-theme@2278

@slidev/parser

npm i https://pkg.pr.new/slidevjs/slidev/@slidev/parser@2278

@slidev/cli

npm i https://pkg.pr.new/slidevjs/slidev/@slidev/cli@2278

@slidev/types

npm i https://pkg.pr.new/slidevjs/slidev/@slidev/types@2278

commit: 568e47a

[antfu]

I am not so sure about the cover part, as it doesn't really feel like to be part of Slidev, and I am concern if we do we would need to handle request of mutli-pages cover or the ending page etc. As people can always edit the PDF to prepend or append pages, I don't think it's a must-have right now. Can we leave it to be discussed the future?

[oripka]

For me, the cover page is an essential use case. One of the great things I love about Slidev—and the main reason I moved all my slides from PowerPoint—is that it allows me to keep consistent layouts while easily changing branding and slide styles, all without touching the content.

For example, I have training materials written in Slidev. When I deliver a training for Client A, the slides need different logos and branding than for Client B. Achieving this with PowerPoint and master slides is a pain and very difficult to keep in sync. With Slidev, it’s straightforward thanks to custom layouts and components.

Using Slidev for delivering courses is, I believe, a common use case. For students, it’s also standard to receive a handout with the speaker notes after the training (this is an industry standard and a core feature of competing software such as PowerPoint). To make these handouts look professional, a cover page is necessary—because the output then essentially becomes a book. That’s why I see this as a feature that aligns very well with Slidev.

I understand the hesitation to integrate a feature that, at first glance, might seem unrelated to presentation software. And yes, one could implement it externally. But doing so makes certain things very difficult, such as:
• having consistent page numbers on the cover pages, content pages and ending pages
• ensuring consistent layout across cover pages, ending pages, and content,
• applying a common footer.

An external solution would create repetition and friction. Since Slidev already has much of the necessary infrastructure and code in place, I believe this is a natural fit.

In my recent commits, I’ve added support for ending pages, additional output formats, and made some documentation enhancements and cleanups.