Drupal 11 + Next.js: PDF Editor

A browser-based PDF editor built into the site. A user uploads any PDF file, and the document renders on screen as a canvas.

URL GitHub repo Drupal + Next.js:
https://github.com/franciscojavierguardado101/Drupal-Frontend-Custom-PDF-Editor

URL Webpage:
https://franciscojavierguardado101-book-1-f.vercel.app/pdf-editor

 

PDF.js: rendering
When the user uploads a file, PDF.js reads the binary data and renders the first page onto an HTML canvas at 1.5x scale. 

pdf-lib: embedding and download
When the user clicks Download, pdf-lib loads the original PDF bytes, opens the first page, and writes each annotation into the document at the correct coordinates. Text annotations are drawn at the proportionally scaled font size and color. 

signature_pad: drawing
The signature modal renders a white canvas and uses the signature_pad library to capture freehand strokes with velocity-based line width. The user can pick from five ink color presets or a custom color picker. On save, the canvas is exported as a transparent-background PNG which pdf-lib then embeds into the PDF.