📄 PDF Editor SDK

The PDF Editor SDK is a powerful, framework-agnostic solution that allows you to integrate a complete PDF editing experience into your web applications. Built on top of Fabric.js and Vue 3, it provides a rich set of features for manipulating PDF documents directly in the browser.

✨ Key Features

Copy the built library files to your project:

Copy// Copy these files from dist/lib/ to your project
pdf-editor-sdk.es.js
pdf-editor-sdk.umd.js
pdf-editor-sdk.css
pdf-editor-sdk.d.ts

Copynpm install @your-company/pdf-editor-sdk
# or
yarn add @your-company/pdf-editor-sdk

Copynpm install git+https://github.com/your-company/pdf-editor-sdk.git
# or add to package.json
{
  "dependencies": {
    "pdf-editor-sdk": "git+https://github.com/your-company/pdf-editor-sdk.git"
  }
}

Copynpm install vue@^3.4.0 pinia@^2.1.0
# or
yarn add vue@^3.4.0 pinia@^2.1.0

<!-- A. CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-plus/dist/index.css">

<!-- B. JS Dependencies -->
<script src="https://cdn.jsdelivr.net/npm/vue@3.4.30/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-demi@0.14.6/lib/index.iife.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pinia@2.1.7/dist/pinia.iife.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/element-plus/dist/index.full.min.js"></script>

<!-- C. PDF Editor SDK -->
<script src="./pdf-editor-sdk.umd.js"></script>

Copyimport PDFEditorSDK from 'pdf-editor-sdk'
import 'pdf-editor-sdk/style.css'

Copy<div id="editor-container" style="width: 100%; height: 600px;"></div>

Copyconst editor = new PDFEditorSDK({
  container: '#editor-container',
  width: 800,
  height: 600,
  onReady: () => {
    console.log('Editor ready!')
  },
  onError: (error) => {
    console.error('Editor error:', error)
  }
})

// Load a PDF
await editor.loadPDF('/path/to/document.pdf')

// Add some text
editor.addText('Hello World', { 
  fontSize: 24,
  fontFamily: 'Arial'
})

// Export to PDF
const blob = await editor.exportToPDF()
// Download or upload the blob

Copyconst editor = new PDFEditorSDK({
  container: '#editor',
  features: {
    text: true,      // Enable text editing
    image: true,     // Enable image insertion
    shape: true,     // Enable shape drawing
    qrcode: true,    // Enable QR codes
    barcode: true,   // Enable barcodes
    signature: false, // Disable signatures
    watermark: false  // Disable watermarks
  }
})

getCanvas(): Canvas | null

Returns the underlying Fabric.js canvas instance for advanced manipulation.

Copyconst canvas = editor.getCanvas()
if (canvas) {
  canvas.setBackgroundColor('#f0f0f0', canvas.renderAll.bind(canvas))
}

setZoom(zoom: number): void

Set the canvas zoom level (1 = 100%).

Copyeditor.setZoom(1.5) // 150% zoom

getZoom(): number

Get the current zoom level.

Copyconst currentZoom = editor.getZoom()

fitToScreen(): void

Automatically fit the canvas to the container size.

Copyeditor.fitToScreen()

addText(text?: string, options?: TextOptions): void

Add a text element to the canvas.

Copyeditor.addText('My Text', {
  fontSize: 32,
  fontFamily: 'Helvetica',
  fontWeight: 'bold',
  fill: '#333333',
  opacity: 1
})

addImage(url: string, options?: ImageOptions): void

Add an image from a URL.

Copyeditor.addImage('/path/to/image.jpg', {
  scaleX: 0.5,
  scaleY: 0.5,
  opacity: 0.8
})

addQRCode(content: string, options?: QRCodeOptions): void

Generate and add a QR code.

Copyeditor.addQRCode('https://example.com', {
  size: 200,
  errorCorrectionLevel: 'H'
})

addBarCode(content: string, options?: BarCodeOptions): void

Generate and add a barcode.

Copyeditor.addBarCode('123456789', {
  format: 'CODE128',
  displayValue: true
})

addWatermark(text: string, options?: TextOptions): void

Add a semi-transparent watermark.

Copyeditor.addWatermark('CONFIDENTIAL', {
  fontSize: 72,
  opacity: 0.2,
  fill: '#ff0000'
})

deleteSelected(): void

Delete currently selected element(s).

duplicateSelected(): void

Duplicate currently selected element(s).

selectAll(): void

Select all elements on the canvas.

clearSelection(): void

Deselect all elements.

Copyeditor.selectAll()
editor.duplicateSelected()
editor.clearSelection()

loadPDF(file: File | ArrayBuffer | string): Promise<void>

Load a PDF file from various sources.

Copy// From URL
await editor.loadPDF('/documents/sample.pdf')

// From File input
const fileInput = document.querySelector('input[type="file"]')
fileInput.addEventListener('change', async (e) => {
  const file = e.target.files[0]
  await editor.loadPDF(file)
})

getPageCount(): number

Get the total number of pages.

goToPage(pageNumber: number): void

Navigate to a specific page (1-indexed).

addPage(): void

Add a new blank page.

deletePage(pageNumber: number): void

Delete a specific page.

Copyconst totalPages = editor.getPageCount()
console.log(`Total pages: ${totalPages}`)

editor.goToPage(2) // Go to page 2
editor.addPage()   // Add new page

exportToPDF(options?: ExportOptions): Promise<Blob>

Export the document as PDF.

Copyconst pdfBlob = await editor.exportToPDF({
  pages: 'all', // 'all', 'current', or [1, 2, 3]
  quality: 1,
  dpi: 300
})

// Download the PDF
const url = URL.createObjectURL(pdfBlob)
const a = document.createElement('a')
a.href = url
a.download = 'document.pdf'
a.click()

exportToPNG(options?: ExportOptions): Promise<Blob>

Export as PNG image.

Copyconst pngBlob = await editor.exportToPNG({
  quality: 1,
  dpi: 150
})

exportToJPEG(options?: ExportOptions): Promise<Blob>

Export as JPEG image.

Copyconst jpegBlob = await editor.exportToJPEG({
  quality: 0.9,
  dpi: 72
})

mount(): void

Mount the editor to the DOM (if unmounted).

unmount(): void

Unmount the editor from the DOM without destroying it.

destroy(): void

Completely destroy the editor and cleanup resources.

Copy// Cleanup on component unmount
onBeforeUnmount(() => {
  editor.destroy()
})

Copy<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="pdf-editor-sdk.css">
</head>
<body>
  <div id="editor"></div>

  <!-- Load peer dependencies first -->
  <script src="https://cdn.jsdelivr.net/npm/vue@3.4.30/dist/vue.global.prod.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/pinia@2.1.7/dist/pinia.iife.prod.js"></script>

  <!-- Load SDK (UMD build for browser) -->
  <script src="./pdf-editor-sdk.umd.js"></script>

  <script>
    // Access SDK from global variable
    const PDFEditorSDK = window.PDFEditorSDK?.default || window.PDFEditorSDK
    
    const editor = new PDFEditorSDK({
      container: '#editor',
      width: 800,
      height: 600,
      onReady: () => {
        console.log('Ready!')
      }
    })
  </script>
</body>
</html>

Copy<template>
  <div>
    <div ref="editorContainer"></div>
    <button @click="addText">Add Text</button>
    <button @click="exportPDF">Export PDF</button>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import PDFEditorSDK from 'pdf-editor-sdk'
import 'pdf-editor-sdk/style.css'

const editorContainer = ref(null)
let editor = null

onMounted(() => {
  editor = new PDFEditorSDK({
    container: editorContainer.value,
    width: 800,
    height: 600
  })
})

const addText = () => {
  editor?.addText('Hello from Vue!')
}

const exportPDF = async () => {
  const blob = await editor?.exportToPDF()
  // Handle blob...
}

onBeforeUnmount(() => {
  editor?.destroy()
})
</script>

Copyimport React, { useEffect, useRef } from 'react'
import PDFEditorSDK from 'pdf-editor-sdk'
import 'pdf-editor-sdk/style.css'

function PDFEditor() {
  const containerRef = useRef(null)
  const editorRef = useRef(null)

  useEffect(() => {
    if (containerRef.current) {
      editorRef.current = new PDFEditorSDK({
        container: containerRef.current,
        width: 800,
        height: 600
      })
    }

    return () => {
      editorRef.current?.destroy()
    }
  }, [])

  const handleAddText = () => {
    editorRef.current?.addText('Hello from React!')
  }

  return (
    <div>
      <div ref={containerRef}></div>
      <button onClick={handleAddText}>Add Text</button>
    </div>
  )
}

export default PDFEditor

Copy<input type="file" id="pdfUpload" accept=".pdf">

<script>
document.getElementById('pdfUpload')
  .addEventListener('change', async (e) => {
    const file = e.target.files[0]
    if (file) {
      try {
        await editor.loadPDF(file)
        console.log('PDF loaded successfully')
      } catch (error) {
        console.error('Error loading PDF:', error)
      }
    }
  })
</script>

Custom Container Styles

You can style the editor container to fit your application's design:

Copy.pdf-editor-wrapper {
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  background: #ffffff;
}

.pdf-editor-wrapper canvas {
  cursor: crosshair;
}

Dark Theme

Apply dark theme styles:

Copyconst editor = new PDFEditorSDK({
  container: '#editor',
  theme: 'dark'
})

/* Custom dark theme CSS */
.pdf-editor-wrapper[data-theme="dark"] {
  background: #1f2937;
  color: #f3f4f6;
}

Responsive Design

Copy<style>
@media (max-width: 768px) {
  .pdf-editor-wrapper {
    width: 100% !important;
    height: 100vh !important;
  }
}
</style>

<script>
// Auto-resize on window resize
window.addEventListener('resize', () => {
  editor.fitToScreen()
})
</script>

Common Issues

Issue: "Container element not found"

Issue: Canvas not rendering

Issue: PDF not loading

Issue: Export not working

Browser Compatibility

Performance Tips

• For large PDFs (\u003e100 pages), consider implementing pagination
• Optimize images before adding them to the canvas
• Use lower DPI for screen display (72-96), higher for print (300)
• Call destroy() when unmounting to prevent memory leaks
• Debounce canvas events for better performance

Debug Mode

Copy// Access internal canvas for debugging
const canvas = editor.getCanvas()
console.log('Canvas objects:', canvas.getObjects())
console.log('Active object:', canvas.getActiveObject())

// Listen to canvas events
canvas.on('object:added', (e) => {
  console.log('Object added:', e.target)
})