PDF editor

Annotate a PDF on the canvas and export the result back to a PDF.

import { useState } from 'react'
import 'tldraw/tldraw.css'
import { PdfEditor } from './PdfEditor'
import { Pdf, PdfPicker } from './PdfPicker'
import './pdf-editor.css'

type State =
	| {
			phase: 'pick'
	  }
	| {
			phase: 'edit'
			pdf: Pdf
	  }

export default function PdfEditorWrapper() {
	const [state, setState] = useState<State>({ phase: 'pick' })

	switch (state.phase) {
		case 'pick':
			return (
				<div className="PdfEditor">
					<PdfPicker onOpenPdf={(pdf) => setState({ phase: 'edit', pdf })} />
				</div>
			)
		case 'edit':
			return (
				<div className="PdfEditor">
					<PdfEditor pdf={state.pdf} />
				</div>
			)
	}
}

Each PDF page is rendered with pdfjs-dist and placed on the canvas as a locked image shape. Side effects keep those page shapes locked and below every other shape. Camera constraints (editor.setCameraOptions) confine the viewport to the document, with contain behavior so you can scroll through pages but not away from them.

The OnTheCanvas slot draws a translucent overlay around the pages, and the export button uses editor.toImage with per-page bounds to render the annotations for each page and stamp them onto the original PDF with pdf-lib.

Try it: open your own PDF or use the example, draw on it, then press "Export PDF".

Is this page helpful?
Prev
Image annotator
Next
Canvas mask