MeldUI

Plugin: Zoom

Zoom in / out, fit presets, and pinch-to-zoom.

The Zoom plugin handles all zoom interactions: explicit zoom buttons, fit presets (page / width / actual), pinch gestures, and zoom-level emission.

Enabling flag

The Zoom plugin is always registered — useZoom and the zoom buttons are always wired up. features.zoom controls whether the zoom toolbar group is shown.

What it does

  • Toolbar buttons: zoom in, zoom out, fit-page, fit-width, actual size
  • Pinch-to-zoom on touch devices (when combined with features.touchGestures)
  • Ctrl/Cmd + Plus/Minus keyboard shortcuts (when features.keyboardShortcuts is on)
  • Emits zoom-change whenever the scale changes

Composable

useZoom(documentId) from @embedpdf/plugin-zoom/vue. Returns { state, provides }:

{
  state: Ref<{ zoomLevel, currentZoomLevel, isMarqueeZoomActive }>,
  provides: ComputedRef<ZoomScope | null>, // null until the plugin is ready
}

The imperative methods live on provides.value:

provides.value?.requestZoom(0.75) // explicit scale or a ZoomMode
provides.value?.zoomIn()
provides.value?.zoomOut()

Events

  • zoom-change — scale or mode changed (surfaces internally)

Dependencies

  • viewport

Configuration: featureConfig.zoom

interface ZoomFeatureConfig {
  min?: number // falls back to the zoom plugin default (0.25)
  max?: number // falls back to the zoom plugin default (10)
  defaultMode?: 'fit-page' | 'fit-width' | 'actual-size' // default 'fit-page'
  step?: number // declared but NOT currently applied
}

step is part of the type for forward-compatibility but is not wired into the zoom plugin yet — setting it has no effect. min / max fall through to the EmbedPDF zoom plugin’s own defaults (0.25 / 10) when omitted.

defaultMode maps to the zoom plugin’s defaultZoomLevel: 'fit-page' (the default), 'fit-width', or 'actual-size' (100%).

<DocumentViewer
  source="/doc.pdf"
  wasm-url="/pdfium.wasm"
  :features="{ zoom: true }"
  :feature-config="{ zoom: { min: 0.5, max: 4, defaultMode: 'fit-page' } }"
/>

When you’d touch it directly

For a “Zoom 75% / 100% / 150%” dropdown in your own toolbar — import useZoom and call provides.value?.requestZoom(0.75).

See also

Introduction