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

oripka · 2025-09-16T14:29:26Z

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 · 2025-09-16T14:29:32Z

✅ 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 · 2025-09-16T14:30:29Z

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 · 2025-09-19T18:04:58Z

packages/types/src/cli.ts

 export interface ExportArgs extends CommonArgs {
  'output'?: string
+  'handout'?: boolean
+  'cover'?: boolean


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?

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.

antfu

Thanks for your work! I'd love to have it, let's move it forward.

A few suggestions:

antfu · 2025-10-20T02:19:43Z

demo/starter/handout-cover.vue

+        </h1>
+        <p class="mt-6 max-w-xl text-lg leading-relaxed text-slate-700">
+          A companion handout for the demo deck that showcases Slidev's text-first authoring, navigation helpers, and Vue-driven
+          enhancements. Explore the pages ahead to follow along without missing any of the live interactions.


As this is the starter, I wanted to keep it simple. Could you reduce the content of handing-cover and handout-ending to only keep the minimal content for demonstration.

antfu · 2025-10-20T02:20:52Z

docs/builtin/cli.md

+- `--cover` (`boolean`, default: `false`): prepend global cover pages from `handout-cover.vue` when handouts are exported.
+- `--ending` (`boolean`, default: `false`): append closing pages from `handout-ending.vue` when handouts are exported.


Let's remove these two flags; we could auto-apply when the pages exist. I believe it's not a common need to toggle them through the cli flag.

antfu · 2025-10-20T02:22:06Z

packages/client/internals/PrintHandout.vue

+  </div>
+</template>
+
+<style scoped>


Let's avoid using scoped style, but use a .slidev- prefixed CSS in the style.css, which would allow user to override

antfu · 2025-10-20T02:23:04Z

packages/client/pages/cover/print.vue

+</template>
+
+<style>
+html.print,


It seems we are duplicating the styles and logics here?

antfu · 2025-10-20T02:23:40Z

packages/client/setup/routes.ts

+      },
+      {
+        name: 'cover',
+        path: '/cover',


Let's do /handout/cover or /handout-cover?

antfu · 2025-10-20T02:25:16Z

packages/slidev/node/cli.ts

+  'handout-bottom.vue',
+  'handout-cover.vue',
+  'handout-ending.vue',
+  'HandoutBottom.vue',
+  'HandoutCover.vue',
+  'HandoutEnding.vue',


Suggested change

'handout-bottom.vue',

'handout-cover.vue',

'handout-ending.vue',

'HandoutBottom.vue',

'HandoutCover.vue',

'HandoutEnding.vue',

'handout-bottom.vue',

'handout-cover.vue',

'handout-ending.vue',

Let's keep it simple and consistent

antfu · 2025-10-20T02:25:31Z

packages/slidev/node/cli.ts

+    .option('handout', {
+      type: 'boolean',
+      describe: 'export handout PDF (configurable page size, one page per slide with notes and header/footer) to a separate file',
+    })
+    .option('cover', {
+      type: 'boolean',
+      describe: 'prepend handout cover page(s) if available (requires handout-cover.vue)',
+    })
+    .option('ending', {
+      type: 'boolean',
+      describe: 'append handout ending page(s) if available (requires handout-ending.vue)',
+    })


Suggested change

.option('handout', {

type: 'boolean',

describe: 'export handout PDF (configurable page size, one page per slide with notes and header/footer) to a separate file',

})

.option('cover', {

type: 'boolean',

describe: 'prepend handout cover page(s) if available (requires handout-cover.vue)',

})

.option('ending', {

type: 'boolean',

describe: 'append handout ending page(s) if available (requires handout-ending.vue)',

})

.option('handout', {

type: 'boolean',

describe: 'export handout PDF (configurable page size, one page per slide with notes and header/footer) to a separate file',

})

antfu reviewed Sep 19, 2025

View reviewed changes

feat: handout

1863494

oripka force-pushed the feat-handout branch from 7789684 to 1863494 Compare September 22, 2025 18:57

oripka and others added 2 commits September 23, 2025 09:56

feat: add ending page, support other formats than a4, cleanup, add docs

ded6031

[autofix.ci] apply automated fixes

568e47a

oripka changed the title ~~feat: A4 handout export (slides + notes + cover/footer)~~ feat: handout export (slides + notes + cover/footer/ending) Sep 23, 2025

antfu requested changes Oct 20, 2025

View reviewed changes

		- `--cover` (`boolean`, default: `false`): prepend global cover pages from `handout-cover.vue` when handouts are exported.
		- `--ending` (`boolean`, default: `false`): append closing pages from `handout-ending.vue` when handouts are exported.

Uh oh!

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

Are you sure you want to change the base?

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

Uh oh!

Conversation

oripka commented Sep 16, 2025

Handout rendering and routes

Page layout

Virtual global components (user-overridable)

CLI integration

Print safety

Navigation updates

Starter examples

Usage

CLI

Browser

Customization

Implementation Notes

Uh oh!

netlify bot commented Sep 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for slidev ready!

Uh oh!

pkg-pr-new bot commented Sep 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

oripka Sep 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

antfu left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

netlify bot commented Sep 16, 2025 •

edited

Loading

pkg-pr-new bot commented Sep 16, 2025 •

edited

Loading

oripka Sep 23, 2025 •

edited

Loading