From 0079b79ae04a6ecf17a4a3b250577e1b463cc754 Mon Sep 17 00:00:00 2001
From: _Kerman <kermanx@qq.com>
Date: Tue, 17 Dec 2024 14:35:46 +0800
Subject: [PATCH] feat: browser exporter (#1972)

---
 docs/custom/index.md                          |   2 +
 docs/guide/exporting.md                       |  14 +-
 docs/guide/ui.md                              |   8 +-
 packages/client/composables/useClicks.ts      |  11 +-
 .../client/composables/useDragElements.ts     |   8 +-
 packages/client/composables/useNav.ts         |  32 +-
 packages/client/composables/usePrintStyles.ts |  28 ++
 packages/client/constants.ts                  |   1 +
 packages/client/internals/ExportPdfTip.vue    |  90 +++++
 packages/client/internals/FormCheckbox.vue    |  16 +
 packages/client/internals/FormItem.vue        |  42 ++
 packages/client/internals/IconButton.vue      |   9 +-
 packages/client/internals/NavControls.vue     |  10 +-
 packages/client/internals/PrintContainer.vue  |  23 +-
 packages/client/internals/PrintSlide.vue      |   7 +-
 packages/client/internals/PrintSlideClick.vue |  14 +-
 packages/client/internals/PrintStyle.vue      |  16 -
 packages/client/internals/Settings.vue        |   7 +-
 packages/client/internals/SlidesShow.vue      |  10 +-
 packages/client/logic/screenshot.ts           |  61 +++
 packages/client/logic/shortcuts.ts            |  71 ++--
 packages/client/logic/slides.ts               |   3 +-
 packages/client/modules/v-mark.ts             |   6 +
 packages/client/package.json                  |   2 +
 packages/client/pages/export.vue              | 369 ++++++++++++++++++
 packages/client/pages/play.vue                |   5 +-
 packages/client/pages/print.vue               |   2 -
 packages/client/setup/root.ts                 |   8 +-
 packages/client/setup/routes.ts               |  35 +-
 packages/client/state/index.ts                |   1 +
 packages/client/styles/index.css              |   7 +-
 packages/parser/src/config.ts                 |   2 +
 packages/parser/src/utils.ts                  |   8 +-
 packages/slidev/node/cli.ts                   |  18 +-
 packages/slidev/node/options.ts               |  33 +-
 packages/types/src/frontmatter.ts             |  10 +
 packages/vscode/schema/headmatter.json        |  23 ++
 pnpm-lock.yaml                                |  33 +-
 pnpm-workspace.yaml                           |   1 +
 shim.d.ts                                     |   2 +
 40 files changed, 877 insertions(+), 171 deletions(-)
 create mode 100644 packages/client/composables/usePrintStyles.ts
 create mode 100644 packages/client/internals/ExportPdfTip.vue
 create mode 100644 packages/client/internals/FormCheckbox.vue
 create mode 100644 packages/client/internals/FormItem.vue
 delete mode 100644 packages/client/internals/PrintStyle.vue
 create mode 100644 packages/client/logic/screenshot.ts
 create mode 100644 packages/client/pages/export.vue

diff --git a/docs/custom/index.md b/docs/custom/index.md
index 654f2e35f4..2e106509ed 100644
--- a/docs/custom/index.md
+++ b/docs/custom/index.md
@@ -27,6 +27,8 @@ keywords: keyword1,keyword2
 
 # enable presenter mode, can be boolean, 'dev' or 'build'
 presenter: true
+# enable browser exporter, can be boolean, 'dev' or 'build'
+browserExporter: dev
 # enabled pdf downloading in SPA build, can also be a custom url
 download: false
 # filename of the export file
diff --git a/docs/guide/exporting.md b/docs/guide/exporting.md
index 56c8de96ab..fd7bebc9fd 100644
--- a/docs/guide/exporting.md
+++ b/docs/guide/exporting.md
@@ -8,7 +8,19 @@ Usually the slides are displayed in a web browser, but you can also export them
 
 However, interactive features in your slides may not be available in the exported files. You can build and host your slides as a web application to keep the interactivity. See [Building and Hosting](./hosting) for more information.
 
-## Preparation
+## The Exporting UI <Badge> Recommended </Badge> {#ui}
+
+> Available since v0.50.0-beta.11
+
+Slidev provides a UI for exporting your slides. You can access it by clicking the "Export" button in "More options" menu in the [navigation bar](./ui#navigation-bar), or go to `http://localhost:<port>/export` directly.
+
+In the UI, you can export the slides as PDF, or capture the slides as images and download them as a PPTX or zip file.
+
+Note that browsers other than **modern Chromium-based browsers** may not work well with the exporting UI. If you encounter any issues, please try use the CLI instead.
+
+> The following content of this page is for the CLI only.
+
+## The CLI {#cli}
 
 Exporting to PDF, PPTX, or PNG relies on [Playwright](https://playwright.dev) for rendering the slides. Therefore [`playwright-chromium`](https://npmjs.com/package/playwright-chromium) is required to be installed in your project:
 
diff --git a/docs/guide/ui.md b/docs/guide/ui.md
index b48838407b..ac81dcbb09 100644
--- a/docs/guide/ui.md
+++ b/docs/guide/ui.md
@@ -28,7 +28,7 @@ In Play mode, move your mouse to the bottom left corner of the page, you can see
 | -                                   | <carbon-edit class="inline-icon-btn"/>                                                | Toggle <LinkInline link="features/side-editor" />               |
 | -                                   | <carbon-download class="inline-icon-btn"/>                                            | Download PDF. See <LinkInline link="features/build-with-pdf" /> |
 | -                                   | <carbon-information class="inline-icon-btn"/>                                         | Show information about the slides                               |
-| -                                   | <carbon-settings-adjust class="inline-icon-btn"/>                                     | Show settings menu                                              |
+| -                                   | <carbon-settings-adjust class="inline-icon-btn"/>                                     | More options                                                    |
 | <kbd>g</kbd>                        | -                                                                                     | Show goto...                                                    |
 
 > You can [configure the shortcuts](../custom/config-shortcuts).
@@ -72,6 +72,12 @@ See:
 
 <LinkCard link="features/recording"/>
 
+## Exporting UI {#exporting}
+
+See:
+
+<LinkCard link="guide/exporting#ui"/>
+
 ## Global Layers {#global-layers}
 
 You can add any custom UI below or above your slides for the whole presentation or per-slide:
diff --git a/packages/client/composables/useClicks.ts b/packages/client/composables/useClicks.ts
index d643558e1a..3636ec64ad 100644
--- a/packages/client/composables/useClicks.ts
+++ b/packages/client/composables/useClicks.ts
@@ -1,7 +1,7 @@
 import type { ClicksContext, NormalizedRangeClickValue, NormalizedSingleClickValue, RawAtValue, RawSingleAtValue, SlideRoute } from '@slidev/types'
-import type { Ref } from 'vue'
+import type { MaybeRefOrGetter, Ref } from 'vue'
 import { clamp, sum } from '@antfu/utils'
-import { computed, onMounted, onUnmounted, ref, shallowReactive } from 'vue'
+import { computed, isReadonly, onMounted, onUnmounted, ref, shallowReactive, toValue } from 'vue'
 
 export function normalizeSingleAtValue(at: RawSingleAtValue): NormalizedSingleClickValue {
   if (at === false || at === 'false')
@@ -59,7 +59,8 @@ export function createClicksContextBase(
         // Convert maxMap to reactive
         maxMap = shallowReactive(maxMap)
         // Make sure the query is not greater than the total
-        context.current = current.value
+        if (!isReadonly(current))
+          context.current = current.value
       })
       onUnmounted(() => {
         isMounted.value = false
@@ -160,11 +161,11 @@ export function createClicksContextBase(
 
 export function createFixedClicks(
   route?: SlideRoute | undefined,
-  currentInit = 0,
+  currentInit: MaybeRefOrGetter<number> = 0,
 ): ClicksContext {
   const clicksStart = route?.meta.slide?.frontmatter.clicksStart ?? 0
   return createClicksContextBase(
-    ref(Math.max(currentInit, clicksStart)),
+    computed(() => Math.max(toValue(currentInit), clicksStart)),
     clicksStart,
     route?.meta?.clicks,
   )
diff --git a/packages/client/composables/useDragElements.ts b/packages/client/composables/useDragElements.ts
index d060f2dd90..ae5dae190f 100644
--- a/packages/client/composables/useDragElements.ts
+++ b/packages/client/composables/useDragElements.ts
@@ -7,6 +7,7 @@ import { injectionCurrentPage, injectionFrontmatter, injectionRenderContext, inj
 import { makeId } from '../logic/utils'
 import { activeDragElement } from '../state'
 import { directiveInject } from '../utils'
+import { useNav } from './useNav'
 import { useSlideBounds } from './useSlideBounds'
 import { useDynamicSlideInfo } from './useSlideInfo'
 
@@ -127,7 +128,8 @@ export function useDragElement(directive: DirectiveBinding | null, posRaw?: stri
   const scale = inject(injectionSlideScale) ?? ref(1)
   const zoom = inject(injectionSlideZoom) ?? ref(1)
   const { left: slideLeft, top: slideTop, stop: stopWatchBounds } = useSlideBounds(inject(injectionSlideElement) ?? ref())
-  const enabled = ['slide', 'presenter'].includes(renderContext.value)
+  const { isPrintMode } = useNav()
+  const enabled = ['slide', 'presenter'].includes(renderContext.value) && !isPrintMode.value
 
   let dataSource: DragElementDataSource = directive ? 'directive' : 'prop'
   let dragId: string = makeId()
@@ -266,10 +268,14 @@ export function useDragElement(directive: DirectiveBinding | null, posRaw?: stri
       state.stopDragging()
     },
     startDragging(): void {
+      if (!enabled)
+        return
       updateBounds()
       activeDragElement.value = state
     },
     stopDragging(): void {
+      if (!enabled)
+        return
       if (activeDragElement.value === state)
         activeDragElement.value = null
     },
diff --git a/packages/client/composables/useNav.ts b/packages/client/composables/useNav.ts
index 4da9059f8d..de141d554d 100644
--- a/packages/client/composables/useNav.ts
+++ b/packages/client/composables/useNav.ts
@@ -3,10 +3,10 @@ import type { ComputedRef, Ref, TransitionGroupProps, WritableComputedRef } from
 import type { RouteLocationNormalized, Router } from 'vue-router'
 import { slides } from '#slidev/slides'
 import { clamp } from '@antfu/utils'
+import { parseRangeString } from '@slidev/parser/utils'
 import { createSharedComposable } from '@vueuse/core'
-import { logicOr } from '@vueuse/math'
 import { computed, ref, watch } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { CLICKS_MAX } from '../constants'
 import { configs } from '../env'
 import { skipTransition } from '../logic/hmr'
@@ -71,7 +71,7 @@ export interface SlidevContextNavState {
   router: Router
   currentRoute: ComputedRef<RouteLocationNormalized>
   isPrintMode: ComputedRef<boolean>
-  isPrintWithClicks: ComputedRef<boolean>
+  isPrintWithClicks: Ref<boolean>
   isEmbedded: ComputedRef<boolean>
   isPlaying: ComputedRef<boolean>
   isPresenter: ComputedRef<boolean>
@@ -83,6 +83,7 @@ export interface SlidevContextNavState {
   clicksContext: ComputedRef<ClicksContext>
   queryClicksRaw: Ref<string>
   queryClicks: WritableComputedRef<number>
+  printRange: Ref<number[]>
   getPrimaryClicks: (route: SlideRoute) => ClicksContext
 }
 
@@ -113,7 +114,7 @@ export function useNavBase(
   const hasNext = computed(() => currentSlideNo.value < slides.value.length || clicks.value < clicksTotal.value)
   const hasPrev = computed(() => currentSlideNo.value > 1 || clicks.value > 0)
 
-  const currentTransition = computed(() => getCurrentTransition(navDirection.value, currentSlideRoute.value, prevRoute.value))
+  const currentTransition = computed(() => isPrint.value ? undefined : getCurrentTransition(navDirection.value, currentSlideRoute.value, prevRoute.value))
 
   watch(currentSlideRoute, (next, prev) => {
     navDirection.value = next.no - prev.no
@@ -191,7 +192,7 @@ export function useNavBase(
     clicks = clamp(clicks, clicksStart, meta?.__clicksContext?.total ?? CLICKS_MAX)
     if (force || pageChanged || clicksChanged) {
       await router?.push({
-        path: getSlidePath(no, isPresenter.value),
+        path: getSlidePath(no, isPresenter.value, router.currentRoute.value.name === 'export'),
         query: {
           ...router.currentRoute.value.query,
           clicks: clicks === 0 ? undefined : clicks.toString(),
@@ -272,24 +273,24 @@ export function useFixedNav(
 
 const useNavState = createSharedComposable((): SlidevContextNavState => {
   const router = useRouter()
+  const currentRoute = useRoute()
 
-  const currentRoute = computed(() => router.currentRoute.value)
   const query = computed(() => {
     // eslint-disable-next-line ts/no-unused-expressions
     router.currentRoute.value.query
     return new URLSearchParams(location.search)
   })
-  const isPrintMode = computed(() => query.value.has('print'))
-  const isPrintWithClicks = computed(() => query.value.get('print') === 'clicks')
+  const isPrintMode = computed(() => query.value.has('print') || currentRoute.name === 'export')
+  const isPrintWithClicks = ref(query.value.get('print') === 'clicks')
   const isEmbedded = computed(() => query.value.has('embedded'))
-  const isPlaying = computed(() => currentRoute.value.name === 'play')
-  const isPresenter = computed(() => currentRoute.value.name === 'presenter')
-  const isNotesViewer = computed(() => currentRoute.value.name === 'notes')
+  const isPlaying = computed(() => currentRoute.name === 'play')
+  const isPresenter = computed(() => currentRoute.name === 'presenter')
+  const isNotesViewer = computed(() => currentRoute.name === 'notes')
   const isPresenterAvailable = computed(() => !isPresenter.value && (!configs.remote || query.value.get('password') === configs.remote))
-  const hasPrimarySlide = logicOr(isPlaying, isPresenter)
-
-  const currentSlideNo = computed(() => hasPrimarySlide.value ? getSlide(currentRoute.value.params.no as string)?.no ?? 1 : 1)
+  const hasPrimarySlide = computed(() => !!currentRoute.params.no)
+  const currentSlideNo = computed(() => hasPrimarySlide.value ? getSlide(currentRoute.params.no as string)?.no ?? 1 : 1)
   const currentSlideRoute = computed(() => slides.value[currentSlideNo.value - 1])
+  const printRange = ref(parseRangeString(slides.value.length, currentRoute.query.range as string | undefined))
 
   const queryClicksRaw = useRouteQuery<string>('clicks', '0')
 
@@ -342,7 +343,7 @@ const useNavState = createSharedComposable((): SlidevContextNavState => {
 
   return {
     router,
-    currentRoute,
+    currentRoute: computed(() => currentRoute),
     isPrintMode,
     isPrintWithClicks,
     isEmbedded,
@@ -356,6 +357,7 @@ const useNavState = createSharedComposable((): SlidevContextNavState => {
     clicksContext,
     queryClicksRaw,
     queryClicks,
+    printRange,
     getPrimaryClicks,
   }
 })
diff --git a/packages/client/composables/usePrintStyles.ts b/packages/client/composables/usePrintStyles.ts
new file mode 100644
index 0000000000..eb05058801
--- /dev/null
+++ b/packages/client/composables/usePrintStyles.ts
@@ -0,0 +1,28 @@
+import { useStyleTag } from '@vueuse/core'
+import { computed } from 'vue'
+import { slideHeight, slideWidth } from '../env'
+import { useNav } from './useNav'
+
+export function usePrintStyles() {
+  const { isPrintMode } = useNav()
+
+  useStyleTag(computed(() => isPrintMode.value
+    ? `
+@page {
+  size: ${slideWidth.value}px ${slideHeight.value}px;
+  margin: 0px;
+}
+
+* {
+  transition: none !important;
+  transition-duration: 0s !important;
+}`
+    : ''))
+}
+
+// Monaco uses `<style media="screen" class="monaco-colors">` to apply colors, which will be ignored in print mode.
+export function patchMonacoColors() {
+  document.querySelectorAll<HTMLStyleElement>('style.monaco-colors').forEach((el) => {
+    el.media = ''
+  })
+}
diff --git a/packages/client/constants.ts b/packages/client/constants.ts
index 64c6cae14a..e21ba35cc2 100644
--- a/packages/client/constants.ts
+++ b/packages/client/constants.ts
@@ -56,6 +56,7 @@ export const HEADMATTER_FIELDS = [
   'author',
   'keywords',
   'presenter',
+  'browserExporter',
   'download',
   'exportFilename',
   'export',
diff --git a/packages/client/internals/ExportPdfTip.vue b/packages/client/internals/ExportPdfTip.vue
new file mode 100644
index 0000000000..1805e4ba4a
--- /dev/null
+++ b/packages/client/internals/ExportPdfTip.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import { skipExportPdfTip } from '../state'
+import Modal from './Modal.vue'
+
+const props = defineProps({
+  modelValue: {
+    default: false,
+  },
+})
+
+const emit = defineEmits(['update:modelValue', 'print'])
+const value = useVModel(props, 'modelValue', emit)
+
+function print() {
+  value.value = false
+  emit('print')
+}
+</script>
+
+<template>
+  <Modal v-model="value" class="px-6 py-4 flex flex-col gap-2">
+    <div class="flex gap-2 text-xl">
+      <div class="i-carbon:information my-auto" /> Tips
+    </div>
+    <div>
+      Slidev will open your browser's built-in print dialog to export the slides as PDF. <br>
+      In the print dialog, please:
+      <ul class="list-disc my-4 pl-4">
+        <li>
+          Choose "Save as PDF" as the Destination.
+          <span class="op-70 text-xs"> (Not "Microsoft Print to PDF") </span>
+        </li>
+        <li> Choose "Default" as the Margin. </li>
+        <li> Toggle on "Print backgrounds". </li>
+      </ul>
+      <div class="mb-2 op-70 text-sm">
+        If you're encountering problems, please try
+        <a href="https://sli.dev/builtin/cli#export"> the CLI </a>
+        or
+        <a href="https://github.com/slidevjs/slidev/issues/new"> open an issue</a>.
+      </div>
+      <div class="form-check op-70">
+        <input
+          v-model="skipExportPdfTip"
+          name="record-camera"
+          type="checkbox"
+        >
+        <label for="record-camera" @click="skipExportPdfTip = !skipExportPdfTip">Don't show this dialog next time.</label>
+      </div>
+    </div>
+    <div class="flex my-1">
+      <button class="cancel" @click="value = false">
+        Cancel
+      </button>
+      <div class="flex-auto" />
+      <button @click="print">
+        Start
+      </button>
+    </div>
+  </Modal>
+</template>
+
+<style scoped>
+button {
+  @apply bg-blue-400 text-white px-4 py-1 rounded border-b-2 border-blue-600;
+  @apply hover:(bg-blue-500 border-blue-700);
+}
+
+button.cancel {
+  @apply bg-gray-400 bg-opacity-50 text-white px-4 py-1 rounded border-b-2 border-main;
+  @apply hover:(bg-opacity-75 border-opacity-75);
+}
+
+a {
+  @apply border-current border-b border-dashed hover:text-primary hover:border-solid;
+}
+
+.form-check {
+  @apply leading-5;
+
+  * {
+    @apply my-auto align-middle;
+  }
+
+  label {
+    @apply ml-1 text-sm select-none;
+  }
+}
+</style>
diff --git a/packages/client/internals/FormCheckbox.vue b/packages/client/internals/FormCheckbox.vue
new file mode 100644
index 0000000000..5070b7e20e
--- /dev/null
+++ b/packages/client/internals/FormCheckbox.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+defineProps<{
+  disabled?: boolean
+}>()
+
+const value = defineModel<boolean>('modelValue', {
+  type: Boolean,
+})
+</script>
+
+<template>
+  <div border="~ main rounded" flex="~ gap-2 items-center" relative h-5 w-5 p0.5 hover:bg-active p1>
+    <div i-ri-check-line :class="value ? '' : 'op0'" />
+    <input v-model="value" type="checkbox" absolute inset-0 z-10 opacity-0.1 :disabled="disabled">
+  </div>
+</template>
diff --git a/packages/client/internals/FormItem.vue b/packages/client/internals/FormItem.vue
new file mode 100644
index 0000000000..053205264e
--- /dev/null
+++ b/packages/client/internals/FormItem.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { Tooltip } from 'floating-vue'
+import { defineEmits, defineProps } from 'vue'
+
+defineProps<{
+  title: string
+  nested?: boolean | number
+  div?: boolean
+  description?: string
+}>()
+
+const emit = defineEmits<{
+  (event: 'reset'): void
+}>()
+
+function reset() {
+  emit('reset')
+}
+</script>
+
+<template>
+  <component :is="div ? 'div' : 'label'" flex="~ row gap-2 items-center" select-none>
+    <div w-30 h-10 flex="~ gap-1 items-center">
+      <div
+        v-if="nested" i-ri-corner-down-right-line op40
+        :style="typeof nested === 'number' ? { marginLeft: `${nested * 0.5 + 0.5}rem` } : { marginLeft: '0.25rem' }"
+      />
+      <div v-if="!description" op75 @dblclick="reset">
+        {{ title }}
+      </div>
+      <Tooltip v-else distance="10">
+        <div op75 text-right @dblclick="reset">
+          {{ title }}
+        </div>
+        <template #popper>
+          <div text-sm min-w-90 v-html="description" />
+        </template>
+      </Tooltip>
+    </div>
+    <slot />
+  </component>
+</template>
diff --git a/packages/client/internals/IconButton.vue b/packages/client/internals/IconButton.vue
index bbc7c52ef7..abc395829c 100644
--- a/packages/client/internals/IconButton.vue
+++ b/packages/client/internals/IconButton.vue
@@ -1,13 +1,18 @@
 <script setup lang="ts">
-defineProps<{
+import { computed } from 'vue'
+
+const props = defineProps<{
   title: string
   icon?: string
   as?: string
+  to?: string
 }>()
+
+const type = computed(() => props.as || (props.to ? 'router-link' : 'button'))
 </script>
 
 <template>
-  <component :is="as || 'button'" class="slidev-icon-btn" :title="title">
+  <component :is="type" class="slidev-icon-btn" :title="title" :to="to">
     <span class="sr-only">{{ title }}</span>
     <slot>
       <div :class="icon" />
diff --git a/packages/client/internals/NavControls.vue b/packages/client/internals/NavControls.vue
index 383f0a54d9..1f05f65506 100644
--- a/packages/client/internals/NavControls.vue
+++ b/packages/client/internals/NavControls.vue
@@ -58,7 +58,7 @@ if (__SLIDEV_FEATURE_RECORD__)
 <template>
   <nav ref="root" class="flex flex-col">
     <div
-      class="flex flex-wrap-reverse text-xl gap-0.5 p-1 lg:gap-1 lg:p-2"
+      class="flex flex-wrap-reverse text-xl gap-0.5 p-1 lg:p-2"
       :class="barStyle"
       @mouseleave="onMouseLeave"
     >
@@ -142,6 +142,12 @@ if (__SLIDEV_FEATURE_RECORD__)
         </IconButton>
       </template>
 
+      <template v-if="__SLIDEV_FEATURE_BROWSER_EXPORTER__">
+        <IconButton title="Browser Explorer" to="/export">
+          <div class="i-carbon:document-pdf" />
+        </IconButton>
+      </template>
+
       <IconButton
         v-if="!isPresenter && configs.info && !isEmbedded"
         title="Show info"
@@ -153,7 +159,7 @@ if (__SLIDEV_FEATURE_RECORD__)
       <template v-if="!isPresenter && !isEmbedded">
         <MenuButton>
           <template #button>
-            <IconButton title="Adjust settings">
+            <IconButton title="More Options">
               <div class="i-carbon:settings-adjust" />
             </IconButton>
           </template>
diff --git a/packages/client/internals/PrintContainer.vue b/packages/client/internals/PrintContainer.vue
index ef0573d670..98ce456faa 100644
--- a/packages/client/internals/PrintContainer.vue
+++ b/packages/client/internals/PrintContainer.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { parseRangeString } from '@slidev/parser/utils'
 import { provideLocal } from '@vueuse/core'
 import { computed } from 'vue'
 import { useNav } from '../composables/useNav'
@@ -11,7 +10,7 @@ const props = defineProps<{
   width: number
 }>()
 
-const { slides, currentRoute } = useNav()
+const { slides, printRange } = useNav()
 
 const width = computed(() => props.width)
 const height = computed(() => props.width / slideAspect.value)
@@ -24,13 +23,6 @@ const scale = computed(() => {
   return (height.value * slideAspect.value) / slideWidth.value
 })
 
-// In print mode, the routes will never change. So we don't need reactivity here.
-let routes = slides.value
-if (currentRoute.value.query.range) {
-  const r = parseRangeString(routes.length, currentRoute.value.query.range as string)
-  routes = r.map(i => routes[i - 1])
-}
-
 const className = computed(() => ({
   'select-none': !configs.selectable,
 }))
@@ -41,18 +33,7 @@ provideLocal(injectionSlideScale, scale)
 <template>
   <div id="print-container" :class="className">
     <div id="print-content">
-      <PrintSlide v-for="route of routes" :key="route.no" :route="route" />
+      <PrintSlide v-for="no of printRange" :key="no" :route="slides[no - 1]" />
     </div>
-    <slot name="controls" />
   </div>
 </template>
-
-<style lang="postcss">
-#print-content {
-  @apply bg-main;
-}
-
-.print-slide-container {
-  @apply relative overflow-hidden break-after-page translate-0;
-}
-</style>
diff --git a/packages/client/internals/PrintSlide.vue b/packages/client/internals/PrintSlide.vue
index c4e7fcbf45..1aa659496a 100644
--- a/packages/client/internals/PrintSlide.vue
+++ b/packages/client/internals/PrintSlide.vue
@@ -5,14 +5,14 @@ import { useFixedNav, useNav } from '../composables/useNav'
 import { CLICKS_MAX } from '../constants'
 import PrintSlideClick from './PrintSlideClick.vue'
 
-const { route } = defineProps<{ route: SlideRoute }>()
+const { route } = defineProps<{ hidden?: boolean, route: SlideRoute }>()
 const { isPrintWithClicks } = useNav()
-const clicks0 = createFixedClicks(route, isPrintWithClicks.value ? 0 : CLICKS_MAX)
+const clicks0 = createFixedClicks(route, () => isPrintWithClicks.value ? 0 : CLICKS_MAX)
 </script>
 
 <template>
   <PrintSlideClick
-    :clicks-context="clicks0"
+    v-show="!hidden"
     :nav="useFixedNav(route, clicks0)"
   />
   <template v-if="isPrintWithClicks">
@@ -22,6 +22,7 @@ const clicks0 = createFixedClicks(route, isPrintWithClicks.value ? 0 : CLICKS_MA
     -->
     <PrintSlideClick
       v-for="i in Math.max(0, clicks0.total - clicks0.clicksStart)"
+      v-show="!hidden"
       :key="i"
       :nav="useFixedNav(route, createFixedClicks(route, i + clicks0.clicksStart))"
     />
diff --git a/packages/client/internals/PrintSlideClick.vue b/packages/client/internals/PrintSlideClick.vue
index 2f7c13736e..fad4877e48 100644
--- a/packages/client/internals/PrintSlideClick.vue
+++ b/packages/client/internals/PrintSlideClick.vue
@@ -2,8 +2,8 @@
 import type { SlidevContextNav } from '../composables/useNav'
 import { GlobalBottom, GlobalTop } from '#slidev/global-layers'
 import { provideLocal } from '@vueuse/core'
-import { computed, reactive, shallowRef } from 'vue'
-import { injectionSlidevContext } from '../constants'
+import { computed, reactive, shallowRef, useTemplateRef } from 'vue'
+import { injectionSlideElement, injectionSlidevContext } from '../constants'
 import { configs, slideHeight, slideWidth } from '../env'
 import { getSlideClass } from '../utils'
 import SlideWrapper from './SlideWrapper.vue'
@@ -32,10 +32,12 @@ provideLocal(injectionSlidevContext, reactive({
   configs,
   themeConfigs: computed(() => configs.themeConfig),
 }))
+
+provideLocal(injectionSlideElement, useTemplateRef('slide-element'))
 </script>
 
 <template>
-  <div :id="id" class="print-slide-container" :style="style">
+  <div :id="id" ref="slide-element" class="print-slide-container" :style="style">
     <GlobalBottom />
 
     <SlideWrapper
@@ -56,3 +58,9 @@ provideLocal(injectionSlidevContext, reactive({
     <GlobalTop />
   </div>
 </template>
+
+<style scoped lang="postcss">
+.print-slide-container {
+  @apply relative overflow-hidden break-after-page translate-0 bg-main;
+}
+</style>
diff --git a/packages/client/internals/PrintStyle.vue b/packages/client/internals/PrintStyle.vue
deleted file mode 100644
index 9331ac19c6..0000000000
--- a/packages/client/internals/PrintStyle.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script setup lang="ts">
-import type { Slots } from 'vue'
-import { h } from 'vue'
-import { slideHeight, slideWidth } from '../env'
-
-function vStyle<Props>(props: Props, { slots }: { slots: Slots }) {
-  if (slots.default)
-    return h('style', slots.default())
-}
-</script>
-
-<template>
-  <vStyle>
-    @page { size: {{ slideWidth }}px {{ slideHeight }}px; margin: 0px; }
-  </vStyle>
-</template>
diff --git a/packages/client/internals/Settings.vue b/packages/client/internals/Settings.vue
index 04e8d42f1c..9507e15940 100644
--- a/packages/client/internals/Settings.vue
+++ b/packages/client/internals/Settings.vue
@@ -30,8 +30,11 @@ const wakeLockItems: SelectionItem<boolean>[] = [
 </script>
 
 <template>
-  <div class="text-sm select-none">
+  <div class="text-sm select-none mb-2">
     <SelectList v-model="slideScale" title="Scale" :items="scaleItems" />
-    <SelectList v-if="__SLIDEV_FEATURE_WAKE_LOCK__ && isSupported" v-model="wakeLockEnabled" title="Wake lock" :items="wakeLockItems" />
+    <SelectList
+      v-if="__SLIDEV_FEATURE_WAKE_LOCK__ && isSupported"
+      v-model="wakeLockEnabled" title="Wake lock" :items="wakeLockItems"
+    />
   </div>
 </template>
diff --git a/packages/client/internals/SlidesShow.vue b/packages/client/internals/SlidesShow.vue
index 4c8e6d5f9c..6883945fb2 100644
--- a/packages/client/internals/SlidesShow.vue
+++ b/packages/client/internals/SlidesShow.vue
@@ -26,6 +26,7 @@ const {
   isPrintMode,
   isPrintWithClicks,
   clicksDirection,
+  printRange,
 } = useNav()
 
 function preloadRoute(route: SlideRoute) {
@@ -55,7 +56,10 @@ const DrawingLayer = shallowRef<any>()
 if (__SLIDEV_FEATURE_DRAWINGS__ || __SLIDEV_FEATURE_DRAWINGS_PERSIST__)
   import('./DrawingLayer.vue').then(v => DrawingLayer.value = v.default)
 
-const loadedRoutes = computed(() => slides.value.filter(r => r.meta?.__preloaded || r === currentSlideRoute.value))
+const loadedRoutes = computed(() => isPrintMode.value
+  ? printRange.value.map(no => slides.value[no - 1])
+  : slides.value.filter(r => r.meta?.__preloaded || r === currentSlideRoute.value),
+)
 
 function onAfterLeave() {
   // After transition, we disable it so HMR won't trigger it again
@@ -72,8 +76,8 @@ function onAfterLeave() {
 
   <!-- Slides -->
   <component
-    :is="hasViewTransition ? 'div' : TransitionGroup"
-    v-bind="skipTransition ? {} : currentTransition"
+    :is="hasViewTransition && !isPrintMode ? 'div' : TransitionGroup"
+    v-bind="skipTransition || isPrintMode ? {} : currentTransition"
     id="slideshow"
     tag="div"
     :class="{
diff --git a/packages/client/logic/screenshot.ts b/packages/client/logic/screenshot.ts
new file mode 100644
index 0000000000..709f4c8a9b
--- /dev/null
+++ b/packages/client/logic/screenshot.ts
@@ -0,0 +1,61 @@
+import { computed, ref } from 'vue'
+
+export async function startScreenshotSession(width: number, height: number) {
+  const canvas = document.createElement('canvas')
+  canvas.width = width
+  canvas.height = height
+  const context = canvas.getContext('2d')!
+  const video = document.createElement('video')
+  video.width = width
+  video.height = height
+
+  const captureStream = ref<MediaStream | null>(await navigator.mediaDevices.getDisplayMedia({
+    video: {
+      // Use a rather small frame rate
+      frameRate: 10,
+      // @ts-expect-error missing types
+      cursor: 'never',
+    },
+    selfBrowserSurface: 'include',
+    preferCurrentTab: true,
+  }))
+  captureStream.value!.addEventListener('inactive', dispose)
+
+  video.srcObject = captureStream.value!
+  video.play()
+
+  function screenshot(element: HTMLElement) {
+    if (!captureStream.value)
+      throw new Error('captureStream inactive')
+    context.clearRect(0, 0, width, height)
+    const { left, top, width: elWidth } = element.getBoundingClientRect()
+    context.drawImage(
+      video,
+      left * window.devicePixelRatio,
+      top * window.devicePixelRatio,
+      elWidth * window.devicePixelRatio,
+      elWidth / width * height * window.devicePixelRatio,
+      0,
+      0,
+      width,
+      height,
+    )
+    return canvas.toDataURL('image/png')
+  }
+
+  function dispose() {
+    captureStream.value?.getTracks().forEach(track => track.stop())
+    captureStream.value = null
+  }
+
+  return {
+    isActive: computed(() => !!captureStream.value),
+    screenshot,
+    dispose,
+  }
+}
+
+export type ScreenshotSession = Awaited<ReturnType<typeof startScreenshotSession>>
+
+const chromeVersion = window.navigator.userAgent.match(/Chrome\/(\d+)/)?.[1]
+export const isScreenshotSupported = chromeVersion ? Number(chromeVersion) >= 94 : false
diff --git a/packages/client/logic/shortcuts.ts b/packages/client/logic/shortcuts.ts
index dbaa0c01df..65e7ea016a 100644
--- a/packages/client/logic/shortcuts.ts
+++ b/packages/client/logic/shortcuts.ts
@@ -4,46 +4,15 @@ import type { Ref } from 'vue'
 import { onKeyStroke } from '@vueuse/core'
 import { and, not } from '@vueuse/math'
 import { watch } from 'vue'
+import { useNav } from '../composables/useNav'
 import setupShortcuts from '../setup/shortcuts'
 import { fullscreen, isInputting, isOnFocus, magicKeys, shortcutsEnabled } from '../state'
 
-const _shortcut = and(not(isInputting), not(isOnFocus), shortcutsEnabled)
-
-export function shortcut(key: string | Ref<boolean>, fn: Fn, autoRepeat = false) {
-  if (typeof key === 'string')
-    key = magicKeys[key]
-
-  const source = and(key, _shortcut)
-  let count = 0
-  let timer: any
-  const trigger = () => {
-    clearTimeout(timer)
-    if (!source.value) {
-      count = 0
-      return
-    }
-    if (autoRepeat) {
-      timer = setTimeout(trigger, Math.max(1000 - count * 250, 150))
-      count++
-    }
-    fn()
-  }
-
-  return watch(source, trigger, { flush: 'sync' })
-}
-
-export function strokeShortcut(key: KeyFilter, fn: Fn) {
-  return onKeyStroke(key, (ev) => {
-    if (!_shortcut.value)
-      return
-    if (!ev.repeat)
-      fn()
-  })
-}
-
 export function registerShortcuts() {
-  const allShortcuts = setupShortcuts()
+  const { isPrintMode } = useNav()
+  const enabled = and(not(isInputting), not(isOnFocus), not(isPrintMode), shortcutsEnabled)
 
+  const allShortcuts = setupShortcuts()
   const shortcuts = new Map<string | Ref<boolean>, ShortcutOptions>(
     allShortcuts.map((options: ShortcutOptions) => [options.key, options]),
   )
@@ -54,4 +23,36 @@ export function registerShortcuts() {
   })
 
   strokeShortcut('f', () => fullscreen.toggle())
+
+  function shortcut(key: string | Ref<boolean>, fn: Fn, autoRepeat = false) {
+    if (typeof key === 'string')
+      key = magicKeys[key]
+
+    const source = and(key, enabled)
+    let count = 0
+    let timer: any
+    const trigger = () => {
+      clearTimeout(timer)
+      if (!source.value) {
+        count = 0
+        return
+      }
+      if (autoRepeat) {
+        timer = setTimeout(trigger, Math.max(1000 - count * 250, 150))
+        count++
+      }
+      fn()
+    }
+
+    return watch(source, trigger, { flush: 'sync' })
+  }
+
+  function strokeShortcut(key: KeyFilter, fn: Fn) {
+    return onKeyStroke(key, (ev) => {
+      if (!enabled.value)
+        return
+      if (!ev.repeat)
+        fn()
+    })
+  }
 }
diff --git a/packages/client/logic/slides.ts b/packages/client/logic/slides.ts
index adde30eb59..6891cc468f 100644
--- a/packages/client/logic/slides.ts
+++ b/packages/client/logic/slides.ts
@@ -15,11 +15,12 @@ export function getSlide(no: number | string) {
 export function getSlidePath(
   route: SlideRoute | number | string,
   presenter: boolean,
+  exporting: boolean = false,
 ) {
   if (typeof route === 'number' || typeof route === 'string')
     route = getSlide(route)!
   const no = route.meta.slide?.frontmatter.routeAlias ?? route.no
-  return presenter ? `/presenter/${no}` : `/${no}`
+  return exporting ? `/export/${no}` : presenter ? `/presenter/${no}` : `/${no}`
 }
 
 export function useIsSlideActive() {
diff --git a/packages/client/modules/v-mark.ts b/packages/client/modules/v-mark.ts
index e6ee4a90ff..9fa0d35b2d 100644
--- a/packages/client/modules/v-mark.ts
+++ b/packages/client/modules/v-mark.ts
@@ -3,6 +3,7 @@ import type { RawAtValue } from '@slidev/types'
 import type { App } from 'vue'
 import { annotate } from '@slidev/rough-notation'
 import { computed, watchEffect } from 'vue'
+import { useNav } from '../composables/useNav'
 import { resolveClick } from './v-click'
 
 export interface RoughDirectiveOptions extends Partial<RoughAnnotationConfig> {
@@ -78,6 +79,8 @@ export function createVMarkDirective() {
         name: 'v-mark',
 
         mounted: (el, binding) => {
+          const { isPrintMode } = useNav()
+
           const options = computed(() => {
             const bindingOptions = (typeof binding.value === 'object' && !Array.isArray(binding.value))
               ? { ...binding.value }
@@ -109,6 +112,9 @@ export function createVMarkDirective() {
             }
             options.type ||= 'underline'
 
+            if (isPrintMode.value)
+              options.animationDuration = 1 /* millisecond */
+
             return options
           })
 
diff --git a/packages/client/package.json b/packages/client/package.json
index 6b81caddf4..c954d5bf79 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -52,6 +52,8 @@
     "lz-string": "catalog:",
     "mermaid": "catalog:",
     "monaco-editor": "catalog:",
+    "nanotar": "catalog:",
+    "pptxgenjs": "catalog:",
     "prettier": "catalog:",
     "recordrtc": "catalog:",
     "shiki": "catalog:",
diff --git a/packages/client/pages/export.vue b/packages/client/pages/export.vue
new file mode 100644
index 0000000000..67a3fd0690
--- /dev/null
+++ b/packages/client/pages/export.vue
@@ -0,0 +1,369 @@
+<script setup lang="ts">
+import type { ScreenshotSession } from '../logic/screenshot'
+import { sleep } from '@antfu/utils'
+import { parseRangeString } from '@slidev/parser/utils'
+import { useHead } from '@unhead/vue'
+import { provideLocal, useElementSize, useLocalStorage, useStyleTag, watchDebounced } from '@vueuse/core'
+
+import { computed, ref, useTemplateRef, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { useDarkMode } from '../composables/useDarkMode'
+import { useNav } from '../composables/useNav'
+import { patchMonacoColors } from '../composables/usePrintStyles'
+import { injectionSlideScale } from '../constants'
+import { configs, slideHeight, slidesTitle, slideWidth } from '../env'
+import ExportPdfTip from '../internals/ExportPdfTip.vue'
+import FormCheckbox from '../internals/FormCheckbox.vue'
+import FormItem from '../internals/FormItem.vue'
+import PrintSlide from '../internals/PrintSlide.vue'
+import { isScreenshotSupported, startScreenshotSession } from '../logic/screenshot'
+import { skipExportPdfTip } from '../state'
+import Play from './play.vue'
+
+const { slides, isPrintWithClicks, hasNext, go, next, currentSlideNo, clicks, printRange } = useNav()
+const router = useRouter()
+const { isColorSchemaConfigured, isDark } = useDarkMode()
+const { width: containerWidth } = useElementSize(useTemplateRef('export-container'))
+const { height: contentHeight } = useElementSize(useTemplateRef('export-content'))
+const scale = computed(() => containerWidth.value / slideWidth.value)
+const contentMarginBottom = computed(() => `${contentHeight.value * (scale.value - 1)}px`)
+const rangesRaw = ref('')
+const initialWait = ref(1000)
+const delay = useLocalStorage('slidev-export-capture-delay', 400, { listenToStorageChanges: false })
+type ScreenshotResult = { slideIndex: number, clickIndex: number, dataUrl: string }[]
+const screenshotSession = ref<ScreenshotSession | null>(null)
+const capturedImages = ref<ScreenshotResult | null>(null)
+const title = ref(configs.exportFilename || slidesTitle)
+
+useHead({
+  title,
+})
+
+provideLocal(injectionSlideScale, scale)
+
+const showExportPdfTip = ref(false)
+function pdf() {
+  if (skipExportPdfTip.value) {
+    doPrint()
+  }
+  else {
+    showExportPdfTip.value = true
+  }
+}
+
+function doPrint() {
+  patchMonacoColors()
+  setTimeout(window.print, 100)
+}
+
+async function capturePngs() {
+  if (screenshotSession.value) {
+    screenshotSession.value.dispose()
+    screenshotSession.value = null
+  }
+  if (capturedImages.value)
+    return capturedImages.value
+  try {
+    const scale = 2
+    screenshotSession.value = await startScreenshotSession(slideWidth.value * scale, slideHeight.value * scale)
+    const result: ScreenshotResult = []
+
+    go(1, 0, true)
+
+    await sleep(initialWait.value + delay.value)
+    while (true) {
+      if (!screenshotSession.value) {
+        break
+      }
+      result.push({
+        slideIndex: currentSlideNo.value - 1,
+        clickIndex: clicks.value,
+        dataUrl: screenshotSession.value.screenshot(document.getElementById('slide-content')!),
+      })
+      if (hasNext.value) {
+        await sleep(delay.value)
+        next()
+        await sleep(delay.value)
+      }
+      else {
+        break
+      }
+    }
+
+    if (screenshotSession.value) {
+      screenshotSession.value.dispose()
+      capturedImages.value = result
+      screenshotSession.value = null
+    }
+  }
+  catch (e) {
+    console.error(e)
+    capturedImages.value = null
+  }
+  finally {
+    router.push('/export')
+  }
+  return capturedImages.value
+}
+
+async function pptx() {
+  const pngs = await capturePngs()
+  if (!pngs)
+    return
+  const pptx = await import('pptxgenjs')
+    .then(r => r.default)
+    .then(PptxGen => new PptxGen())
+
+  const layoutName = `${slideWidth.value}x${slideHeight.value}`
+  pptx.defineLayout({
+    name: layoutName,
+    width: slideWidth.value / 96,
+    height: slideHeight.value / 96,
+  })
+  pptx.layout = layoutName
+  if (configs.author)
+    pptx.author = configs.author
+  pptx.company = 'Created using Slidev'
+  pptx.title = title.value
+  if (typeof configs.info === 'string')
+    pptx.subject = configs.info
+
+  pngs.forEach(({ slideIndex, dataUrl }) => {
+    const slide = pptx.addSlide()
+    slide.background = {
+      data: dataUrl,
+    }
+
+    const note = slides.value[slideIndex].meta.slide.note
+    if (note)
+      slide.addNotes(note)
+  })
+
+  const blob = await pptx.write({
+    outputType: 'blob',
+    compression: true,
+  }) as Blob
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = `${title.value}.pptx`
+  a.click()
+}
+
+async function pngsGz() {
+  const pngs = await capturePngs()
+  if (!pngs)
+    return
+  const { createTarGzip } = await import('nanotar')
+  const data = await createTarGzip(
+    pngs.map(({ slideIndex, dataUrl }) => ({
+      name: `${slideIndex}.png`,
+      data: new Uint8Array(atob(dataUrl.split(',')[1]).split('').map(char => char.charCodeAt(0))),
+    })),
+  )
+  const a = document.createElement('a')
+  const blob = new Blob([data], { type: 'application/gzip' })
+  a.href = URL.createObjectURL(blob)
+  a.download = `${title.value}.tar.gz`
+  a.click()
+}
+
+useStyleTag(computed(() => screenshotSession.value?.isActive
+  ? `
+html {
+  cursor: none;
+  margin-bottom: 20px;
+}
+body {
+  pointer-events: none;
+}`
+  : `
+:root {
+  --slidev-slide-scale: ${scale.value};
+}
+`))
+
+// clear captured images when settings changed
+watch(
+  [
+    isDark,
+    printRange,
+    isPrintWithClicks,
+  ],
+  () => capturedImages.value = null,
+)
+
+watchDebounced(
+  [slides, rangesRaw],
+  () => printRange.value = parseRangeString(slides.value.length, rangesRaw.value),
+  { debounce: 300 },
+)
+
+// clear captured images when HMR
+if (import.meta.hot) {
+  import.meta.hot.on('vite:beforeUpdate', () => {
+    capturedImages.value = null
+  })
+}
+</script>
+
+<template>
+  <Play v-if="screenshotSession?.isActive" />
+  <div
+    v-else
+    class="fixed inset-0 flex flex-col md:flex-row md:gap-8 print:position-unset print:inset-0 print:block print:min-h-max justify-center of-hidden bg-main"
+  >
+    <div class="print:hidden min-w-fit flex flex-wrap md:flex-nowrap md:of-y-auto md:flex-col gap-2 p-6 max-w-100">
+      <h1 class="text-3xl md:my-4 flex items-center gap-2 w-full">
+        <RouterLink to="/" class="i-carbon:previous-outline op-70 hover:op-100" />
+        Browser Exporter
+        <sup op50 italic text-sm>Experimental</sup>
+      </h1>
+      <div flex="~ col gap-2">
+        <h2>Options</h2>
+        <FormItem title="Title">
+          <input v-model="title" type="text">
+        </FormItem>
+        <FormItem title="Range">
+          <input v-model="rangesRaw" type="text" :placeholder="`1-${slides.length}`">
+        </FormItem>
+        <FormItem title="Dark mode">
+          <FormCheckbox v-model="isDark" :disabled="isColorSchemaConfigured" />
+        </FormItem>
+        <FormItem title="With clicks">
+          <FormCheckbox v-model="isPrintWithClicks" />
+        </FormItem>
+      </div>
+      <div class="flex-grow" />
+      <div class="min-w-fit" flex="~ col gap-3">
+        <div border="~ main rounded-lg" p3 flex="~ col gap-2">
+          <h2>Export as Vector File</h2>
+          <div class="flex flex-col gap-2 items-start min-w-max">
+            <button @click="pdf">
+              PDF
+            </button>
+          </div>
+        </div>
+
+        <div border="~ main rounded-lg" p3 flex="~ col gap-2" :class="isScreenshotSupported ? '' : 'border-orange'">
+          <h2>Export as Images</h2>
+          <div v-if="!isScreenshotSupported" class="min-w-full w-0 text-orange/100 p-1 mb--4 bg-orange/10 rounded">
+            <span class="i-carbon:warning-alt inline-block mb--.5" />
+            Your browser may not support image capturing.
+            If you encounter issues, please use a modern Chromium-based browser,
+            or export via the CLI.
+          </div>
+          <div class="flex flex-col gap-2 items-start min-w-max">
+            <button @click="pptx">
+              PPTX
+            </button>
+            <button @click="pngsGz">
+              PNGs.gz
+            </button>
+          </div>
+          <div w-full h-1px border="t main" my2 />
+          <div class="relative flex flex-col gap-2 flex-nowrap">
+            <div class="flex flex-col gap-2 items-start min-w-max">
+              <button v-if="capturedImages" class="flex justify-center items-center gap-2" @click="capturedImages = null">
+                <span class="i-carbon:trash-can inline-block text-xl" />
+                Clear Captured Images
+              </button>
+              <button v-else class="flex justify-center items-center gap-2" @click="capturePngs">
+                <div class="i-carbon:camera-action inline-block text-xl" />
+                Pre-capture Slides as Images
+              </button>
+              <FormItem title="Delay" description="Delay between capturing each slide in milliseconds.<br>Increase this value if slides are captured incompletely. <br>(Not related to PDF export)">
+                <input v-model="delay" type="number" step="50" min="50">
+              </FormItem>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div id="export-container" ref="export-container" relative>
+      <div print:hidden fixed right-5 bottom-5 bg-main px2 py0 shadow z-1000 border="~ main rounded">
+        <span op75>Rendering as {{ capturedImages ? 'Captured Images' : 'DOM' }} </span>
+      </div>
+      <div v-show="!capturedImages" id="export-content" ref="export-content">
+        <PrintSlide v-for="route, index in slides" :key="index" :hidden="!printRange.includes(index + 1)" :route />
+      </div>
+      <div v-if="capturedImages" id="export-content-images" class="print:hidden grid">
+        <div v-for="png, i of capturedImages" :key="i" class="print-slide-container">
+          <img :src="png.dataUrl">
+        </div>
+      </div>
+    </div>
+    <div id="twoslash-container" />
+    <ExportPdfTip v-model="showExportPdfTip" @print="doPrint" />
+  </div>
+</template>
+
+<style scoped>
+@media not print {
+  #export-container {
+    scrollbar-width: thin;
+    scroll-behavior: smooth;
+    --uno: w-full overflow-x-hidden overflow-y-auto max-h-full max-w-300 p-6;
+  }
+
+  #export-content {
+    transform: v-bind('`scale(${scale})`');
+    margin-bottom: v-bind('contentMarginBottom');
+    --uno: origin-tl;
+  }
+
+  #export-content,
+  #export-content-images {
+    --uno: flex flex-col gap-2;
+  }
+}
+
+@media print {
+  #export-content {
+    transform: scale(1);
+    display: block !important;
+  }
+}
+
+button {
+  --uno: 'w-full rounded bg-gray:10 px-4 py-2 hover:bg-gray/20';
+}
+
+label {
+  --uno: text-xl flex gap-2 items-center select-none;
+
+  span {
+    --uno: flex-grow;
+  }
+
+  input[type='text'],
+  input[type='number'] {
+    --uno: border border-main rounded px-2 py-1;
+  }
+}
+
+h2 {
+  --uno: font-500 op-70;
+}
+
+#export-content {
+  --uno: pointer-events-none;
+}
+</style>
+
+<style>
+@media print {
+  html,
+  body,
+  #app {
+    overflow: unset !important;
+  }
+}
+
+@media not print {
+  #export-content-images .print-slide-container,
+  #export-content .print-slide-container {
+    --uno: border border-main rounded-md shadow of-hidden;
+  }
+}
+</style>
diff --git a/packages/client/pages/play.vue b/packages/client/pages/play.vue
index 1ac216bd9d..71ad63098e 100644
--- a/packages/client/pages/play.vue
+++ b/packages/client/pages/play.vue
@@ -8,12 +8,11 @@ import { useWakeLock } from '../composables/useWakeLock'
 import Controls from '../internals/Controls.vue'
 import NavControls from '../internals/NavControls.vue'
 import PresenterMouse from '../internals/PresenterMouse.vue'
-import PrintStyle from '../internals/PrintStyle.vue'
 import SlideContainer from '../internals/SlideContainer.vue'
 import SlidesShow from '../internals/SlidesShow.vue'
 import { onContextMenu } from '../logic/contextMenu'
 import { registerShortcuts } from '../logic/shortcuts'
-import { editorHeight, editorWidth, isEditorVertical, isScreenVertical, showEditor, windowSize } from '../state'
+import { editorHeight, editorWidth, isEditorVertical, isScreenVertical, showEditor } from '../state'
 
 const { next, prev, isPrintMode } = useNav()
 const { isDrawing } = useDrawings()
@@ -63,14 +62,12 @@ if (__DEV__ && __SLIDEV_FEATURE_EDITOR__)
 </script>
 
 <template>
-  <PrintStyle v-if="isPrintMode" />
   <div
     id="page-root" ref="root" class="grid"
     :class="isEditorVertical ? 'grid-rows-[1fr_max-content]' : 'grid-cols-[1fr_max-content]'"
   >
     <SlideContainer
       :style="{ background: 'var(--slidev-slide-container-background, black)' }"
-      :width="isPrintMode ? windowSize.width.value : undefined"
       is-main
       @pointerdown="onClick"
       @contextmenu="onContextMenu"
diff --git a/packages/client/pages/print.vue b/packages/client/pages/print.vue
index 36ef7062b6..280b769235 100644
--- a/packages/client/pages/print.vue
+++ b/packages/client/pages/print.vue
@@ -3,7 +3,6 @@ import { recomputeAllPoppers } from 'floating-vue'
 import { onMounted, watchEffect } from 'vue'
 import { useNav } from '../composables/useNav'
 import PrintContainer from '../internals/PrintContainer.vue'
-import PrintStyle from '../internals/PrintStyle.vue'
 import { windowSize } from '../state'
 
 const { isPrintMode } = useNav()
@@ -21,7 +20,6 @@ onMounted(() => {
 </script>
 
 <template>
-  <PrintStyle v-if="isPrintMode" />
   <div id="page-root" class="grid grid-cols-[1fr_max-content]">
     <PrintContainer
       class="w-full h-full"
diff --git a/packages/client/setup/root.ts b/packages/client/setup/root.ts
index 26f35c4178..7d915a54e4 100644
--- a/packages/client/setup/root.ts
+++ b/packages/client/setup/root.ts
@@ -5,6 +5,7 @@ import { useRouter } from 'vue-router'
 import { createFixedClicks } from '../composables/useClicks'
 import { useEmbeddedControl } from '../composables/useEmbeddedCtrl'
 import { useNav } from '../composables/useNav'
+import { usePrintStyles } from '../composables/usePrintStyles'
 import { injectionClicksContext, injectionCurrentPage, injectionRenderContext, injectionSlidevContext, TRUST_ORIGINS } from '../constants'
 import { configs, slidesTitle } from '../env'
 import { skipTransition } from '../logic/hmr'
@@ -43,6 +44,7 @@ export default function setupRoot() {
     hasPrimarySlide,
     isNotesViewer,
     isPresenter,
+    isPrintMode,
   } = useNav()
 
   useHead({
@@ -50,6 +52,8 @@ export default function setupRoot() {
     htmlAttrs: configs.htmlAttrs,
   })
 
+  usePrintStyles()
+
   initSharedState(`${slidesTitle} - shared`)
   initDrawingState(`${slidesTitle} - drawings`)
 
@@ -57,7 +61,7 @@ export default function setupRoot() {
 
   // update shared state
   function updateSharedState() {
-    if (isNotesViewer.value)
+    if (isNotesViewer.value || isPrintMode.value)
       return
 
     // we allow Presenter mode, or Viewer mode from trusted origins to update the shared state
@@ -86,7 +90,7 @@ export default function setupRoot() {
   watch(clicksContext, updateSharedState)
 
   onPatch((state) => {
-    if (!hasPrimarySlide.value)
+    if (!hasPrimarySlide.value || isPrintMode.value)
       return
     if (state.lastUpdate?.type === 'presenter' && (+state.page !== +currentSlideNo.value || +clicksContext.value.current !== +state.clicks)) {
       skipTransition.value = false
diff --git a/packages/client/setup/routes.ts b/packages/client/setup/routes.ts
index c6d626e81a..16c546d288 100644
--- a/packages/client/setup/routes.ts
+++ b/packages/client/setup/routes.ts
@@ -5,21 +5,21 @@ import setups from '#slidev/setups/routes'
 export default function setupRoutes() {
   const routes: RouteRecordRaw[] = []
 
-  if (__SLIDEV_FEATURE_PRESENTER__) {
-    function passwordGuard(to: RouteLocationNormalized) {
-      if (!configs.remote || configs.remote === to.query.password)
+  function passwordGuard(to: RouteLocationNormalized) {
+    if (!configs.remote || configs.remote === to.query.password)
+      return true
+    if (configs.remote && to.query.password === undefined) {
+      // eslint-disable-next-line no-alert
+      const password = prompt('Enter password')
+      if (configs.remote === password)
         return true
-      if (configs.remote && to.query.password === undefined) {
-        // eslint-disable-next-line no-alert
-        const password = prompt('Enter password')
-        if (configs.remote === password)
-          return true
-      }
-      if (to.params.no)
-        return { path: `/${to.params.no}` }
-      return { path: '' }
     }
+    if (to.params.no)
+      return { path: `/${to.params.no}` }
+    return { path: '' }
+  }
 
+  if (__SLIDEV_FEATURE_PRESENTER__) {
     routes.push(
       {
         name: 'entry',
@@ -64,6 +64,17 @@ export default function setupRoutes() {
     )
   }
 
+  if (__SLIDEV_FEATURE_BROWSER_EXPORTER__) {
+    routes.push(
+      {
+        name: 'export',
+        path: '/export/:no?',
+        component: () => import('../pages/export.vue'),
+        beforeEnter: passwordGuard,
+      },
+    )
+  }
+
   routes.push(
     {
       name: 'play',
diff --git a/packages/client/state/index.ts b/packages/client/state/index.ts
index a5b606d6f9..e48cd120db 100644
--- a/packages/client/state/index.ts
+++ b/packages/client/state/index.ts
@@ -26,6 +26,7 @@ export const currentCamera = useLocalStorage<string>('slidev-camera', 'default',
 export const currentMic = useLocalStorage<string>('slidev-mic', 'default', { listenToStorageChanges: false })
 export const slideScale = useLocalStorage<number>('slidev-scale', 0)
 export const wakeLockEnabled = useLocalStorage('slidev-wake-lock', true)
+export const skipExportPdfTip = useLocalStorage('slidev-skip-export-pdf-tip', false)
 
 export const showPresenterCursor = useLocalStorage('slidev-presenter-cursor', true, { listenToStorageChanges: false })
 export const showEditor = useLocalStorage('slidev-show-editor', false, { listenToStorageChanges: false })
diff --git a/packages/client/styles/index.css b/packages/client/styles/index.css
index 4beee5de47..ff624519ba 100644
--- a/packages/client/styles/index.css
+++ b/packages/client/styles/index.css
@@ -8,6 +8,8 @@ body,
   height: 100vh;
   height: calc(var(--vh, 1vh) * 100);
   overflow: hidden;
+  print-color-adjust: exact;
+  -webkit-print-color-adjust: exact;
   @apply font-sans;
 }
 
@@ -17,11 +19,10 @@ html {
 
 .slidev-icon-btn {
   aspect-ratio: 1;
-  display: inline-block;
   user-select: none;
   outline: none;
   cursor: pointer;
-  @apply opacity-75 transition duration-200 ease-in-out align-middle rounded p-1;
+  @apply inline-flex items-center justify-center opacity-75 transition duration-200 ease-in-out align-middle rounded p-1;
   @apply hover:(opacity-100 bg-gray-400 bg-opacity-10);
   @apply focus-visible:(opacity-100 outline outline-2 outline-offset-2 outline-black dark:outline-white);
   @apply md:p-2;
@@ -129,7 +130,7 @@ html {
   position: fixed;
 }
 
-#twoslash-container .v-popper__wrapper {
+#twoslash-container .v-popper__wrapper:not(.no-slide-scale > *) {
   transform: scale(calc(1 * var(--slidev-slide-scale)));
   transform-origin: 30px top;
 }
diff --git a/packages/parser/src/config.ts b/packages/parser/src/config.ts
index e48470ba47..dcc0f13c87 100644
--- a/packages/parser/src/config.ts
+++ b/packages/parser/src/config.ts
@@ -32,9 +32,11 @@ export function getDefaultConfig(): SlidevConfig {
     drawings: {} as ResolvedDrawingsOptions,
     plantUmlServer: 'https://www.plantuml.com/plantuml',
     codeCopy: true,
+    author: '',
     record: 'dev',
     css: 'unocss',
     presenter: true,
+    browserExporter: 'dev',
     htmlAttrs: {},
     transition: null,
     editor: true,
diff --git a/packages/parser/src/utils.ts b/packages/parser/src/utils.ts
index 9433ecf8b4..0586f3b28d 100644
--- a/packages/parser/src/utils.ts
+++ b/packages/parser/src/utils.ts
@@ -10,20 +10,20 @@ export function parseRangeString(total: number, rangeStr?: string) {
   if (rangeStr === 'none')
     return []
 
-  const pages: number[] = []
+  const indexes: number[] = []
   for (const part of rangeStr.split(/[,;]/g)) {
     if (!part.includes('-')) {
-      pages.push(+part)
+      indexes.push(+part)
     }
     else {
       const [start, end] = part.split('-', 2)
-      pages.push(
+      indexes.push(
         ...range(+start, !end ? (total + 1) : (+end + 1)),
       )
     }
   }
 
-  return uniq(pages).filter(i => i <= total).sort((a, b) => a - b)
+  return uniq(indexes).filter(i => i <= total).sort((a, b) => a - b)
 }
 
 /**
diff --git a/packages/slidev/node/cli.ts b/packages/slidev/node/cli.ts
index 8cdc34e8e3..48bc8ce9be 100644
--- a/packages/slidev/node/cli.ts
+++ b/packages/slidev/node/cli.ts
@@ -10,7 +10,7 @@ import { verifyConfig } from '@slidev/parser'
 import equal from 'fast-deep-equal'
 import fs from 'fs-extra'
 import { getPort } from 'get-port-please'
-import { blue, bold, cyan, dim, gray, green, underline, yellow } from 'kolorist'
+import { blue, bold, cyan, dim, gray, green, lightCyan, underline, yellow } from 'kolorist'
 import openBrowser from 'open'
 import yargs from 'yargs'
 import { version } from '../package.json'
@@ -443,8 +443,19 @@ cli.command(
     const { exportSlides, getExportOptions } = await import('./commands/export')
     const port = await getPort(12445)
 
+    let warned = false
     for (const entryFile of entry as unknown as string) {
       const options = await resolveOptions({ entry: entryFile, theme }, 'export')
+
+      if (options.data.config.browserExporter !== false && !warned) {
+        warned = true
+        console.log(lightCyan('[Slidev] Try the new browser exporter!'))
+        console.log(
+          lightCyan('You can use the browser exporter instead by starting the dev server as normal and visit'),
+          `${blue('localhost:')}${dim('<port>')}${blue('/export')}\n`,
+        )
+      }
+
       const server = await createServer(
         options,
         {
@@ -633,8 +644,11 @@ function printInfo(
     console.log(`${dim('  public slide show ')}  > ${cyan(`http://localhost:${bold(port)}/`)}`)
     if (query)
       console.log(`${dim('  private slide show ')} > ${cyan(`http://localhost:${bold(port)}/${query}`)}`)
-    console.log(`${dim('  presenter mode ')}     > ${blue(`http://localhost:${bold(port)}${presenterPath}`)}`)
+    if (options.utils.define.__SLIDEV_FEATURE_PRESENTER__)
+      console.log(`${dim('  presenter mode ')}     > ${blue(`http://localhost:${bold(port)}${presenterPath}`)}`)
     console.log(`${dim('  slides overview ')}    > ${blue(`http://localhost:${bold(port)}${overviewPath}`)}`)
+    if (options.utils.define.__SLIDEV_FEATURE_BROWSER_EXPORTER__)
+      console.log(`${dim('  export slides')}       > ${blue(`http://localhost:${bold(port)}/export/`)}`)
     if (options.inspect)
       console.log(`${dim('  vite inspector')}      > ${yellow(`http://localhost:${bold(port)}/__inspect/`)}`)
 
diff --git a/packages/slidev/node/options.ts b/packages/slidev/node/options.ts
index 38b041ea98..e17d469604 100644
--- a/packages/slidev/node/options.ts
+++ b/packages/slidev/node/options.ts
@@ -1,6 +1,6 @@
 import type { ResolvedSlidevOptions, ResolvedSlidevUtils, SlidevData, SlidevEntryOptions } from '@slidev/types'
 import path from 'node:path'
-import { uniq } from '@antfu/utils'
+import { objectMap, uniq } from '@antfu/utils'
 import Debug from 'debug'
 import fg from 'fast-glob'
 import mm from 'micromatch'
@@ -115,17 +115,22 @@ export async function createDataUtils(resolved: Omit<ResolvedSlidevOptions, 'uti
 }
 
 function getDefine(options: Omit<ResolvedSlidevOptions, 'utils'>): Record<string, string> {
-  return {
-    __DEV__: options.mode === 'dev' ? 'true' : 'false',
-    __SLIDEV_CLIENT_ROOT__: JSON.stringify(toAtFS(options.clientRoot)),
-    __SLIDEV_HASH_ROUTE__: JSON.stringify(options.data.config.routerMode === 'hash'),
-    __SLIDEV_FEATURE_DRAWINGS__: JSON.stringify(options.data.config.drawings.enabled === true || options.data.config.drawings.enabled === options.mode),
-    __SLIDEV_FEATURE_EDITOR__: JSON.stringify(options.mode === 'dev' && options.data.config.editor !== false),
-    __SLIDEV_FEATURE_DRAWINGS_PERSIST__: JSON.stringify(!!options.data.config.drawings.persist === true),
-    __SLIDEV_FEATURE_RECORD__: JSON.stringify(options.data.config.record === true || options.data.config.record === options.mode),
-    __SLIDEV_FEATURE_PRESENTER__: JSON.stringify(options.data.config.presenter === true || options.data.config.presenter === options.mode),
-    __SLIDEV_FEATURE_PRINT__: JSON.stringify(options.mode === 'export' || (options.mode === 'build' && [true, 'true', 'auto'].includes(options.data.config.download))),
-    __SLIDEV_FEATURE_WAKE_LOCK__: JSON.stringify(options.data.config.wakeLock === true || options.data.config.wakeLock === options.mode),
-    __SLIDEV_HAS_SERVER__: options.mode !== 'build' ? 'true' : 'false',
-  }
+  const matchMode = (mode: string | boolean) => mode === true || mode === options.mode
+  return objectMap(
+    {
+      __DEV__: options.mode === 'dev',
+      __SLIDEV_CLIENT_ROOT__: toAtFS(options.clientRoot),
+      __SLIDEV_HASH_ROUTE__: options.data.config.routerMode === 'hash',
+      __SLIDEV_FEATURE_DRAWINGS__: matchMode(options.data.config.drawings.enabled),
+      __SLIDEV_FEATURE_EDITOR__: options.mode === 'dev' && options.data.config.editor !== false,
+      __SLIDEV_FEATURE_DRAWINGS_PERSIST__: !!options.data.config.drawings.persist,
+      __SLIDEV_FEATURE_RECORD__: matchMode(options.data.config.record),
+      __SLIDEV_FEATURE_PRESENTER__: matchMode(options.data.config.presenter),
+      __SLIDEV_FEATURE_PRINT__: options.mode === 'export' || (options.mode === 'build' && [true, 'true', 'auto'].includes(options.data.config.download)),
+      __SLIDEV_FEATURE_BROWSER_EXPORTER__: matchMode(options.data.config.browserExporter),
+      __SLIDEV_FEATURE_WAKE_LOCK__: matchMode(options.data.config.wakeLock),
+      __SLIDEV_HAS_SERVER__: options.mode !== 'build',
+    },
+    (v, k) => [v, JSON.stringify(k)],
+  )
 }
diff --git a/packages/types/src/frontmatter.ts b/packages/types/src/frontmatter.ts
index 1c5171dc9c..a9ae54f123 100644
--- a/packages/types/src/frontmatter.ts
+++ b/packages/types/src/frontmatter.ts
@@ -52,6 +52,10 @@ export interface HeadmatterConfig extends TransitionOptions {
    * @default true
    */
   codeCopy?: boolean
+  /**
+   * The author of the slides
+   */
+  author?: string
   /**
    * Information shows on the built SPA
    * Can be a markdown string
@@ -172,6 +176,12 @@ export interface HeadmatterConfig extends TransitionOptions {
    * @default true
    */
   presenter?: boolean | 'dev' | 'build'
+  /**
+   * Enable browser exporter
+   *
+   * @default 'dev'
+   */
+  browserExporter?: boolean | 'dev' | 'build'
   /**
    * Attributes to apply to the HTML element
    *
diff --git a/packages/vscode/schema/headmatter.json b/packages/vscode/schema/headmatter.json
index dccb3d450c..ea664d20f4 100644
--- a/packages/vscode/schema/headmatter.json
+++ b/packages/vscode/schema/headmatter.json
@@ -177,6 +177,11 @@
           "markdownDescription": "Show a copy button in code blocks",
           "default": true
         },
+        "author": {
+          "type": "string",
+          "description": "The author of the slides",
+          "markdownDescription": "The author of the slides"
+        },
         "info": {
           "type": [
             "string",
@@ -340,6 +345,24 @@
           "markdownDescription": "Enable presenter mode",
           "default": true
         },
+        "browserExporter": {
+          "anyOf": [
+            {
+              "type": "boolean"
+            },
+            {
+              "type": "string",
+              "const": "dev"
+            },
+            {
+              "type": "string",
+              "const": "build"
+            }
+          ],
+          "description": "Enable browser exporter",
+          "markdownDescription": "Enable browser exporter",
+          "default": "dev"
+        },
         "htmlAttrs": {
           "type": "object",
           "additionalProperties": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index accc8d77e7..92b6aff6b0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -261,6 +261,9 @@ catalogs:
     monaco-editor:
       specifier: 0.51.0
       version: 0.51.0
+    nanotar:
+      specifier: ^0.1.1
+      version: 0.1.1
     nodemon:
       specifier: ^3.1.9
       version: 3.1.9
@@ -789,6 +792,12 @@ importers:
       monaco-editor:
         specifier: 'catalog:'
         version: 0.51.0
+      nanotar:
+        specifier: 'catalog:'
+        version: 0.1.1
+      pptxgenjs:
+        specifier: 'catalog:'
+        version: 3.12.0
       prettier:
         specifier: 'catalog:'
         version: 3.4.2
@@ -1955,9 +1964,6 @@ packages:
   '@iconify/types@2.0.0':
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
 
-  '@iconify/utils@2.1.33':
-    resolution: {integrity: sha512-jP9h6v/g0BIZx0p7XGJJVtkVnydtbgTgt9mVNcGDYwaa7UhdHdI9dvoq+gKj9sijMSJKxUPEG2JyjsgXjxL7Kw==}
-
   '@iconify/utils@2.2.0':
     resolution: {integrity: sha512-9A5eZQV9eKlNCXlI/SgYsGRS7YmGmB1oAsRpNVIYBmIzGJRgH+hfG+lo4069s+GFWFNnBAtDg10c53vQZBLfnA==}
 
@@ -5126,6 +5132,9 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
+  nanotar@0.1.1:
+    resolution: {integrity: sha512-AiJsGsSF3O0havL1BydvI4+wR76sKT+okKRwWIaK96cZUnXqH0uNBOsHlbwZq3+m2BR1VKqHDVudl3gO4mYjpQ==}
+
   napi-build-utils@1.0.2:
     resolution: {integrity: sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg==}
 
@@ -7536,18 +7545,6 @@ snapshots:
 
   '@iconify/types@2.0.0': {}
 
-  '@iconify/utils@2.1.33':
-    dependencies:
-      '@antfu/install-pkg': 0.4.1
-      '@antfu/utils': 0.7.10
-      '@iconify/types': 2.0.0
-      debug: 4.4.0(supports-color@8.1.1)
-      kolorist: 1.8.0
-      local-pkg: 0.5.1
-      mlly: 1.7.3
-    transitivePeerDependencies:
-      - supports-color
-
   '@iconify/utils@2.2.0':
     dependencies:
       '@antfu/install-pkg': 0.4.1
@@ -8302,7 +8299,7 @@ snapshots:
 
   '@unocss/preset-icons@0.65.1':
     dependencies:
-      '@iconify/utils': 2.1.33
+      '@iconify/utils': 2.2.0
       '@unocss/core': 0.65.1
       ofetch: 1.4.1
     transitivePeerDependencies:
@@ -11149,7 +11146,7 @@ snapshots:
   mermaid@11.4.1:
     dependencies:
       '@braintree/sanitize-url': 7.1.0
-      '@iconify/utils': 2.1.33
+      '@iconify/utils': 2.2.0
       '@mermaid-js/parser': 0.3.0
       '@types/d3': 7.4.3
       cytoscape: 3.30.2
@@ -11457,6 +11454,8 @@ snapshots:
 
   nanoid@3.3.7: {}
 
+  nanotar@0.1.1: {}
+
   napi-build-utils@1.0.2:
     optional: true
 
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 9e76de2cf5..e0364db212 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -89,6 +89,7 @@ catalog:
   minimist: ^1.2.8
   mlly: ^1.7.3
   monaco-editor: 0.51.0
+  nanotar: ^0.1.1
   nodemon: ^3.1.9
   open: ^10.1.0
   ovsx: ^0.10.1
diff --git a/shim.d.ts b/shim.d.ts
index 65d3b5a602..2d618a0f27 100644
--- a/shim.d.ts
+++ b/shim.d.ts
@@ -9,6 +9,7 @@ declare global {
   const __SLIDEV_FEATURE_RECORD__: boolean
   const __SLIDEV_FEATURE_PRESENTER__: boolean
   const __SLIDEV_FEATURE_PRINT__: boolean
+  const __SLIDEV_FEATURE_BROWSER_EXPORTER__: boolean
   const __SLIDEV_FEATURE_WAKE_LOCK__: boolean
   const __SLIDEV_HAS_SERVER__: boolean
 }
@@ -24,6 +25,7 @@ declare module '@vue/runtime-core' {
     __SLIDEV_FEATURE_RECORD__: boolean
     __SLIDEV_FEATURE_PRESENTER__: boolean
     __SLIDEV_FEATURE_PRINT__: boolean
+    __SLIDEV_FEATURE_BROWSER_EXPORTER__: boolean
     __SLIDEV_FEATURE_WAKE_LOCK__: boolean
     __SLIDEV_HAS_SERVER__: boolean
   }