Introduction

KViewer is a Nuxt module that gives your application a full-featured PDF viewer with annotation editing, form field interaction, and PDF export capabilities.

What is KViewer?

KViewer wraps pdfjs-dist for rendering, Konva for canvas-based annotations, and pdf-lib for PDF manipulation. It provides two main components: KViewer for single-document viewing and KViewerTabs for multi-document tabbed interfaces.

Key Features

• PDF Rendering -- Full page rendering with optional text selection layer and virtual scrolling for large documents
• 14 Annotation Tools -- Highlight, strikeout, underline, free text, rectangle, circle, arrow, cloud, freehand, free highlight, signature, stamp, and note
• Native PDF Annotations -- Auto-import existing PDF annotations into editable Konva annotations
• Interactive Form Fields -- Text, checkbox, radio, dropdown, signature, and button fields
• PDF Export -- Export with or without flattened annotations, preserving or replacing original annotations
• Draft Saving -- Import/export annotation state as JSON for draft persistence
• Full-Text Search -- Built-in search with match highlighting
• Undo/Redo -- Full annotation history
• Multi-Tab Support -- Manage multiple PDFs with automatic annotation persistence
• iPad Support -- Apple Pencil and pinch-to-zoom

When to Use KViewer

Use KViewer when you need to:

• Display PDFs in a Nuxt application with annotation capabilities
• Build document review or approval workflows
• Create fillable PDF form experiences
• Allow users to sign, stamp, or mark up documents
• Manage multiple PDF documents in a tabbed interface

Requirements

• Nuxt 4+
• Node.js 18+
• Client-side rendering -- KViewer components depend on browser APIs (Canvas, DOM) through pdfjs-dist and Konva. Use ssr: false globally, <ClientOnly>, or per-page definePageMeta({ ssr: false }) to prevent server-side rendering of the viewer.