Come abbiamo creato un editor PDF open source gratuito con Next.js

La visione: editing PDF con la privacy al primo posto

La maggior parte degli editor PDF di oggi richiede di caricare i propri documenti sui loro server. Per documenti sensibili come contratti, cartelle cliniche o estratti conto, questo è un incubo per la privacy.

Volevamo creare qualcosa di diverso:

• Elaborazione 100% lato client — i file non lasciano mai il tuo browser
• Nessuna installazione richiesta — funziona direttamente nei browser web
• Nessuna registrazione o tracciamento — utilizzo completamente anonimo
• Open source — codice trasparente che chiunque può verificare
• Gratuito per sempre — nessun paywall o abbonamento

Con questi principi in mente, abbiamo iniziato a valutare le tecnologie che potessero rendere reale questa visione.

La scelta dello stack tecnologico

Framework frontend: Next.js 14

Abbiamo scelto Next.js 14 con il nuovo App Router per diversi motivi:

• Eccellenti capacità SEO — rendering lato server e gestione dei metadati pronti all'uso
• Supporto all'esportazione statica — distribuzione ovunque (Vercel, Netlify, GitHub Pages)
• Integrazione con TypeScript — type safety e una migliore esperienza di sviluppo
• Ottimizzazione delle prestazioni — code splitting automatico, ottimizzazione delle immagini
• Esperienza di sviluppo — hot reload, ottima documentazione, vasto ecosistema

Rendering PDF: PDF.js

PDF.js di Mozilla è lo standard di riferimento per il rendering dei PDF nel browser. È ciò che alimenta il visualizzatore PDF integrato di Firefox.

Manipolazione PDF: pdf-lib

Per creare e modificare i PDF, usiamo pdf-lib — una libreria JavaScript pura che funziona interamente nel browser.

Gestione dello stato: Zustand

Invece di Redux, abbiamo scelto Zustand — una libreria di gestione dello stato minimale e veloce.

• API semplice — nessun codice boilerplate
• Progettazione TypeScript-first
• Dimensione ridotta del bundle (~1KB)
• Nessun context provider necessario

Styling: Tailwind CSS

Tailwind CSS ci offre uno styling utility-first con un'eccellente esperienza di sviluppo e bundle di produzione ridotti grazie al purging automatico.

Architettura e decisioni di progettazione

1. Elaborazione esclusivamente lato client

Tutto avviene nel browser:

User uploads PDF
  ↓
PDF.js parses and renders to canvas
  ↓
User makes edits (text, images, shapes)
  ↓
pdf-lib creates new PDF with changes
  ↓
Download to user's device

In nessun momento il file lascia il dispositivo dell'utente. Questa è vera privacy by design.

2. Sistema di coordinate normalizzato

Una sfida importante: i PDF hanno dimensioni di pagina diverse e gli utenti possono ingrandire o ridurre. Come tracciare le posizioni degli overlay?

Soluzione: Normalizzare tutte le coordinate nell'intervallo [0, 1].

// Instead of absolute pixels:
{ x: 150, y: 200 }

// We store normalized coordinates:
{ x: 0.25, y: 0.33 }

// Then scale to current viewport:
actualX = normalizedX * pageWidth * zoom
actualY = normalizedY * pageHeight * zoom

Questo rende gli overlay indipendenti dallo zoom e portabili tra diverse dimensioni di pagina.

3. Architettura dei componenti

Abbiamo strutturato l'app in componenti mirati:

• PdfViewer — rendering del canvas principale
• Thumbnails — barra laterale di navigazione delle pagine
• Toolbar — controlli di zoom, rotazione, eliminazione
• EditToolbar — selezione degli strumenti (testo, immagine, forma)
• AdvancedOverlayLayer — rendering di testo, immagini, forme
• ExportButton — logica di esportazione del PDF

4. Pattern di gestione dello stato

Il nostro store Zustand mantiene:

{
  originalFile: File,
  pages: [
    {
      id: string,
      originalIndex: number,
      rotation: 0 | 90 | 180 | 270,
      deleted: boolean,
      textOverlays: [],
      imageOverlays: [],
      shapeOverlays: []
    }
  ],
  selectedPageId: string,
  zoom: number,
  editMode: 'select' | 'text' | 'image' | 'shape'
}

Sfide tecniche che abbiamo affrontato

Sfida 1: Accuratezza dell'estrazione del testo

PDF.js è in grado di estrarre il testo, ma il posizionamento non è sempre perfetto al pixel a causa del modo in cui i PDF codificano il testo (a volte come singoli caratteri, a volte come parole).

Soluzione: Estraiamo gli elementi di testo con le loro matrici di trasformazione e li convertiamo in coordinate normalizzate con bounding box ampi.

Sfida 2: Prestazioni con PDF di grandi dimensioni

Il rendering di PDF con oltre 100 pagine può bloccare il browser.

Soluzione:

• Caricamento lazy delle pagine (rendering solo delle pagine visibili)
• Usare requestAnimationFrame per un rendering fluido
• Consigliare un limite di 25MB / 50 pagine
• Canvas offscreen per le miniature

Sfida 3: Qualità di esportazione

Incorporare testo e immagini in pdf-lib richiede un'attenta trasformazione delle coordinate dallo spazio del browser allo spazio del PDF.

Soluzione: Costruire una pipeline di trasformazione completa che gestisce:

• Rotazioni delle pagine
• Differenze nel sistema di coordinate (asse Y invertito nel PDF)
• Incorporamento e dimensionamento dei font
• Conversione del formato delle immagini

Sfida 4: Compatibilità tra browser

Browser diversi hanno implementazioni del canvas leggermente differenti e particolarità nel rendering dei PDF.

Soluzione: Test approfonditi su Chrome, Firefox, Safari ed Edge. Usare il rilevamento delle funzionalità invece del rilevamento del browser.

Perché lo abbiamo reso open source

Fin dal primo giorno sapevamo che doveva essere open source:

I risultati

Dopo mesi di sviluppo, abbiamo lanciato EditoraPDF con:

Il codice sorgente è disponibile su github.com/affsquadDevs/editorapdf con licenza MIT.

Punti chiave per gli sviluppatori

Partecipa

EditoraPDF è un progetto open source e accogliamo con piacere i contributi di sviluppatori di ogni livello di esperienza.

Domande Frequenti

Considerazioni finali

Creare EditoraPDF è stato un percorso impegnativo ma gratificante. Abbiamo imparato un'enormità sull'elaborazione dei PDF, sulle capacità dei browser e sullo sviluppo open source.

La parte migliore? Ora chiunque può prendere questo codice, imparare da esso, modificarlo o creare qualcosa di ancora migliore. Questo è il potere dell'open source.

Se stai lavorando a un progetto simile o sei semplicemente curioso del codice, dai un'occhiata al repository GitHub. Saremmo felici di ricevere il tuo feedback, rispondere alle domande o esaminare le tue pull request.