How to Edit PDF Metadata in the Browser with Vue 3 and pdf-lib

Editing PDF metadata involves reading and writing document properties like title, author, and subject.

Here's how to build a browser-based PDF metadata editor with Vue 3 and pdf-lib.

The challenge: Preserving content while updating metadata

PDF metadata editing involves:

1. Loading the source PDF
2. Reading existing metadata fields
3. Updating metadata with new values
4. Saving without affecting page content

The stack

• Vue 3 with Composition API
• pdf-lib for PDF manipulation
• Vite for bundling

The core implementation

<script setup lang="ts">
import { ref } from 'vue'
import { PDFDocument } from 'pdf-lib'

const file = ref<File | null>(null)
const metadata = ref({
  title: '',
  author: '',
  subject: '',
  keywords: '',
  creator: '',
  producer: ''
})
const loading = ref(false)
const result = ref<Uint8Array | null>(null)

async function handleFile(e: Event) {
  const input = e.target as HTMLInputElement
  if (!input.files?.[0]) return
  file.value = input.files[0]

  // Read existing metadata
  const arrayBuffer = await file.value.arrayBuffer()
  const pdfDoc = await PDFDocument.load(arrayBuffer)

  metadata.value = {
    title: pdfDoc.getTitle() || '',
    author: pdfDoc.getAuthor() || '',
    subject: pdfDoc.getSubject() || '',
    keywords: pdfDoc.getKeywords() || '',
    creator: pdfDoc.getCreator() || '',
    producer: pdfDoc.getProducer() || ''
  }
}

async function saveMetadata() {
  if (!file.value) return
  loading.value = true

  const arrayBuffer = await file.value.arrayBuffer()
  const pdfDoc = await PDFDocument.load(arrayBuffer)

  // Update metadata
  pdfDoc.setTitle(metadata.value.title)
  pdfDoc.setAuthor(metadata.value.author)
  pdfDoc.setSubject(metadata.value.subject)
  pdfDoc.setKeywords(metadata.value.keywords)
  pdfDoc.setCreator(metadata.value.creator)
  pdfDoc.setProducer(metadata.value.producer)

  result.value = await pdfDoc.save()
  loading.value = false
}
</script>

Key implementation details

1. Reading metadata

pdf-lib provides getter methods for all standard metadata fields:

const title = pdfDoc.getTitle()
const author = pdfDoc.getAuthor()
const subject = pdfDoc.getSubject()

2. Setting metadata

Use setter methods to update metadata values:

pdfDoc.setTitle(newTitle)
pdfDoc.setAuthor(newAuthor)
pdfDoc.setSubject(newSubject)

3. Handling empty values

Clear metadata by setting empty strings:

pdfDoc.setTitle('')  // Removes title

Limitations

No batch editing

This implementation handles one PDF at a time.

Solution: Process files sequentially in a loop.

Limited metadata fields

Only standard PDF metadata is supported, not custom XMP metadata.

Solution: Use desktop software for advanced metadata editing.

No validation

Empty or invalid metadata values are accepted without warnings.

Solution: Add form validation before saving.

Summary

Building a browser-based PDF metadata editor involves:

1. Using pdf-lib to load and read metadata
2. Providing a form for editing fields
3. Saving updated metadata to a new PDF
4. Offering download functionality

Try it at en.sotool.top/edit-metadata.