Kabema PDF Editor

A Nuxt module for viewing, annotating, and exporting PDFs. Built on pdfjs-dist, Konva, and pdf-lib.

Features

• 📄 PDF rendering with optional text selection layer
• ✏️ 14 annotation tools: Select, Highlight, Strikeout, Underline, Free Text, Signature, Rectangle, Circle, Arrow, Cloud, Freehand, Free Highlight, Stamp, Note
• 📤 Export PDF with or without flattened annotations
• 💾 Import/export annotation state for draft saving
• 🔄 Native PDF annotations are auto-imported into editable Konva annotations (core set: Text/FreeText/Highlight/Underline/StrikeOut/Square/Circle/Ink/Line)
• 📝 Interactive form fields (text, checkbox, radio, dropdown, signature, button)
• 🔍 Full-text search with match highlighting
• ⚡ Virtual scrolling for large documents
• ↩️ Undo/redo history
• 🗂️ Multi-tab document support (KViewerTabs)
• 🎨 Customizable header and footer slots

Quick Setup

Install the module:

pnpm add kviewer

Add it to your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['kviewer'],
  kviewer: {
    prefix: 'K', // component prefix (default)
  },
})

Basic Usage

<template>
  <KViewer
    :source="pdfUrl"
    text-layer
    user-name="Jane Doe"
  />
</template>

<script setup lang="ts">
const pdfUrl = '/documents/sample.pdf'
</script>

source accepts a URL string, Uint8Array, or a pdfjs-dist source object.

Viewer Ref API

KViewer exposes methods via a template ref:

<template>
  <KViewer ref="viewerRef" :source="pdfUrl" />
</template>

<script setup lang="ts">
const viewerRef = ref(null)

// Export the PDF as bytes (or trigger a download)
const bytes = await viewerRef.value?.exportPdf()
await viewerRef.value?.exportPdf({ flatten: true, download: true })

// Save / restore annotation drafts
const draft = viewerRef.value?.getAnnotations() ?? []
await viewerRef.value?.importAnnotations(draft, { mode: 'replace' })

// Read / write form field values
const fields = viewerRef.value?.getFormFieldValues()
viewerRef.value?.setFormFieldValue('email', '[email protected]')
</script>

| Method | Returns | |---|---| | getAnnotations() | IAnnotationStore[] | | importAnnotations(annotations, options?) | Promise<{ loaded: number; skipped: number }> | | exportPdf(options?) | Promise<Uint8Array> | | getFormFieldValues() | FormFieldValue[] | | setFormFieldValue(fieldName, value) | void | | getKonvaCanvasState() | Record<number, string> |

exportPdf options default to { flatten: false, download: false, preserveOriginalAnnotations: false }.

When native PDF annotations are auto-imported into Konva, exporting with preserveOriginalAnnotations: true may duplicate annotations. Prefer preserveOriginalAnnotations: false in that workflow.

Development

# Install dependencies
pnpm install

# Generate type stubs
pnpm dev:prepare

# Develop with the playground
pnpm dev

# Build the playground
pnpm dev:build

# Run ESLint
pnpm lint

# Run Vitest
pnpm test
pnpm test:watch