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

features.zoom: true

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: { currentZoomLevel, zoomMode },
  zoomIn(),
  zoomOut(),
  setZoom(level: number),
  setZoomMode(mode: 'fit-page' | 'fit-width' | 'actual'),
}

Events

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

Dependencies

  • viewport

Configuration: featureConfig.zoom

interface ZoomFeatureConfig {
  min?: number // default 0.25
  max?: number // default 8
  step?: number // default 0.1
  defaultMode?: 'fit-page' | 'fit-width' | 'actual' // default 'fit-width'
}
<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 setZoom(0.75).

See also