sveltekit-pdf-editor Streamlined PDF Editing

A lightweight, customizable PDF editor component for SvelteKit applications that makes working with PDF annotations simple and intuitive.

View Documentation GitHub Repository

Key Features

PDF Annotations

Create, edit, and manage annotations on PDF documents with an intuitive interface.

Simple Integration

Easily integrate with SvelteKit applications with minimal configuration. Offline usage is supported.

Download Support

Optional download functionality for edited PDFs with customized file names.

Documentation

Installation

yarn add sveltekit-pdf-editor

Basic Usage

Import the component, provide a PDF blob, and handle annotations:

<PdfEditor
  {pdfBlob}
  {pageAnnotations}
  {fileName}
  user="John"
  allowDownload={true}
  disablePages={[]}
  on:annotationChange={handleAnnotationChange}
  on:dataUpdated={handleDataUpdate}
  on:done={handleDone}
/>

Props Reference

Prop	Type	Default	Description
pdfBlob	Blob	{}	The PDF file blob to edit
pageAnnotations	Array	[]	Array of annotation objects for the PDF
allowDownload	Boolean	false	Enable/disable download functionality
fileName	String	''	Filename for the downloaded PDF
disablePages	[{ from_page: number; to_page: number; }]	[]	Array of page numbers to disable editing on
ownerId	String	''	User identifier to mark ownership of annotations for multi-user support

Events

Event	Detail	Description
annotationChange	Array of annotation objects	Fired when annotations are created, updated, or deleted
dataUpdated	Object	Fired when any data within the editor is updated
done	Object	Fired when the user completes the editing session

Try It Out

See the PDF editor in action with our interactive demo

Try the Live Demo