MeldUI

Document Viewer: Features

Every capability flag on the features prop, plus per-feature configuration shapes.

The features prop is a flat object of opt-in flags. Disabled flags do not register their corresponding EmbedPDF plugin, which means the plugin package is tree-shaken from your bundle. The minimum required plugins (DocumentManager, Viewport, Scroll, Render, Tiling) are always registered.

<DocumentViewer
  source="/doc.pdf"
  wasm-url="/pdfium.wasm"
  :features="{ zoom: true, search: true, annotations: true }"
/>

Flag reference

Navigation / view controls

FlagDefaultWhat it enables
zoomfalseZoom in / out buttons, fit presets (page / width / actual), pinch-to-zoom on touch
rotatefalseRotate CW / CCW per 90°
spreadfalseTwo-page spread view mode toggle
panfalseHand-tool (drag-to-pan) interaction mode
fullscreenfalseFullscreen toggle (F11 if keyboardShortcuts is on)

Search / selection

FlagDefaultWhat it enables
searchfalseSearch popover with case / whole-word toggles, prev / next, match counter
selectionfalseText selection on the page + copy-to-clipboard

Side panels

FlagDefaultWhat it enables
outlinefalseDocument outline / bookmark tree side panel
thumbnailsfalseThumbnail grid side panel

Export

FlagDefaultWhat it enables
printfalsePrint toolbar button (uses native browser print dialog)
downloadfalseDownload button. Combine with downloadUrl prop to serve a re-encoded copy

Annotations (Phase 1)

FlagDefaultWhat it enables
annotationsfalseHighlight tool + sticky-note comment tool, plus full annotation CRUD via the programmatic API
commentThreadsfalseThreaded comments overlay (replies + resolved state). Requires annotations
undoRedofalseUndo / redo toolbar buttons + Ctrl+Z / Ctrl+Shift+Z

Editing (Phase 2 — opt-in)

FlagDefaultWhat it enables
stampsfalseStamp tool + stamp library picker
signaturefalseSignature pad dialog + place-signature flow
redactionfalseText-redact + area-redact tools + saveAsCopy burn-in
formsfalseInteractive PDF form-field rendering and setFieldValue API
attachmentsfalseAttachments side panel + downloadAttachment API

Interaction

FlagDefaultWhat it enables
keyboardShortcutsfalseArrow keys (page nav), + / - (zoom), R (rotate), Ctrl+F (search), F11 (fullscreen), Esc (close popovers), C / O / T (toggle comment / outline / thumbnails panel)
touchGesturesfalseSwipe page-nav, double-tap to zoom, pinch zoom (in combination with zoom)

Per-feature configuration: featureConfig

featureConfig is keyed by feature name and lets you tune a plugin’s behaviour without re-implementing it.

import type { FeatureConfig } from '@meldui/vue'

const featureConfig: FeatureConfig = {
  zoom: { min: 0.25, max: 8, step: 0.1, defaultMode: 'fit-width' },
  annotations: {
    author: '[email protected]',
    defaultTools: [
      { id: 'h-yellow', label: 'Yellow', color: '#FFCD45', opacity: 0.4 },
      { id: 'h-cyan', label: 'Cyan', color: '#A0E7E5', opacity: 0.4 },
    ],
  },
}

zoom

OptionTypeDefaultNotes
minnumber0.25Minimum scale factor
maxnumber8Maximum scale factor
stepnumber0.1Increment for zoom-in / zoom-out buttons
defaultMode'fit-page' | 'fit-width' | 'actual''fit-width'Initial zoom preset

annotations

OptionTypeDefaultNotes
authorstringcurrentUser?.displayNameAttached to created annotations
useAnnotationModebooleanfalseWhen true, new redactions are stored as pending PDF REDACT annotations instead of applied immediately
defaultToolsAnnotationToolConfig[]5 highlight presets (yellow / green / blue / pink / purple at α 0.4)Override the floating highlight tooltip’s colour palette. Each tool has { id, label, color, opacity }. The 5 default colours match HIGHLIGHT_COLORS exported from @meldui/vue

stamps (Phase 2)

OptionTypeNotes
librariesStampLibraryConfig[]Preload stamp libraries from URL or ArrayBuffer
defaultLibrary{ id, name, categories? } | falseSet the toolbar’s default library; false to hide the library picker

signature (Phase 2)

OptionTypeNotes
mode'signature-only' | 'signature-and-initials'Whether the user is prompted for initials in addition to a full signature
defaultSize{ width: number; height: number }Initial bounding box for placed signatures

redaction (Phase 2)

OptionTypeNotes
useAnnotationModebooleanIf true, new redactions are pending (visible in panel) and applied via applyAllRedactions(); otherwise they burn in immediately

Highlight colour palette

@meldui/vue exports the 5 canonical colours as HIGHLIGHT_COLORS so you can render swatches matching the floating tooltip:

import { HIGHLIGHT_COLORS, DEFAULT_HIGHLIGHT_COLOR } from '@meldui/vue'

console.log(HIGHLIGHT_COLORS)
// [
//   { name: 'Yellow', value: '#FFCD45' },
//   { name: 'Green',  value: '#92E89E' },
//   { name: 'Blue',   value: '#8FCFEF' },
//   { name: 'Pink',   value: '#FFA0BD' },
//   { name: 'Purple', value: '#C8A5DD' },
// ]
console.log(DEFAULT_HIGHLIGHT_COLOR) // '#FFCD45'

Pass any of these values directly into updateAnnotation(id, { color }).

See also

Getting StartedProgrammatic API