Comment nous avons créé un éditeur PDF open source gratuit avec Next.js

La vision : une édition PDF respectueuse de la vie privée

La plupart des éditeurs PDF actuels vous obligent à téléverser vos documents sur leurs serveurs. Pour des documents sensibles tels que des contrats, des dossiers médicaux ou des relevés financiers, c'est un cauchemar pour la vie privée.

Nous voulions construire quelque chose de différent :

• Traitement 100 % côté client — les fichiers ne quittent jamais votre navigateur
• Aucune installation requise — fonctionne directement dans les navigateurs web
• Aucune inscription ni suivi — utilisation entièrement anonyme
• Open source — un code transparent que chacun peut auditer
• Gratuit pour toujours — pas de paywall ni d'abonnement

Forts de ces principes, nous avons commencé à évaluer les technologies susceptibles de concrétiser cette vision.

Le choix de la stack technique

Framework frontend : Next.js 14

Nous avons choisi Next.js 14 avec le nouveau App Router pour plusieurs raisons :

• Excellentes capacités SEO — rendu côté serveur et gestion des métadonnées prêts à l'emploi
• Prise en charge de l'export statique — déployez partout (Vercel, Netlify, GitHub Pages)
• Intégration de TypeScript — sûreté de typage et meilleure expérience de développement
• Optimisation des performances — découpage automatique du code, optimisation des images
• Expérience de développement — rechargement à chaud, excellente documentation, vaste écosystème

Rendu PDF : PDF.js

PDF.js de Mozilla est la référence absolue pour le rendu des PDF dans le navigateur. C'est ce qui alimente le lecteur PDF intégré de Firefox.

Manipulation PDF : pdf-lib

Pour créer et modifier des PDF, nous utilisons pdf-lib — une bibliothèque en pur JavaScript qui s'exécute entièrement dans le navigateur.

Gestion d'état : Zustand

Plutôt que Redux, nous avons choisi Zustand — une bibliothèque de gestion d'état minimale et rapide.

• API simple — aucun code répétitif
• Conception orientée TypeScript
• Petite taille de bundle (~1KB)
• Aucun fournisseur de contexte nécessaire

Style : Tailwind CSS

Tailwind CSS nous offre un style utility-first avec une excellente expérience de développement et de petits bundles de production grâce au purge automatique.

Architecture et choix de conception

1. Traitement uniquement côté client

Tout se passe dans le navigateur :

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

À aucun moment le fichier ne quitte l'appareil de l'utilisateur. C'est une véritable confidentialité dès la conception.

2. Système de coordonnées normalisé

Un défi majeur : les PDF ont des tailles de page différentes et les utilisateurs peuvent zoomer ou dézoomer. Comment suivre la position des superpositions ?

Solution : Normaliser toutes les coordonnées dans l'intervalle [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

Cela rend les superpositions indépendantes du zoom et transposables d'une taille de page à l'autre.

3. Architecture des composants

Nous avons structuré l'application en composants ciblés :

• PdfViewer — rendu du canvas principal
• Thumbnails — barre latérale de navigation des pages
• Toolbar — contrôles de zoom, rotation et suppression
• EditToolbar — sélection d'outils (texte, image, forme)
• AdvancedOverlayLayer — rendu du texte, des images et des formes
• ExportButton — logique d'export PDF

4. Modèle de gestion d'état

Notre store Zustand gère :

{
  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'
}

Les défis techniques que nous avons rencontrés

Défi 1 : précision de l'extraction de texte

PDF.js peut extraire du texte, mais le positionnement n'est pas toujours parfait au pixel près en raison de la façon dont les PDF encodent le texte (parfois caractère par caractère, parfois mot par mot).

Solution : Nous extrayons les éléments de texte avec leurs matrices de transformation et les convertissons en coordonnées normalisées avec des boîtes englobantes généreuses.

Défi 2 : les performances avec les gros PDF

Le rendu de PDF de plus de 100 pages peut figer le navigateur.

Solution :

• Charger les pages de façon paresseuse (ne rendre que les pages visibles)
• Utiliser requestAnimationFrame pour un rendu fluide
• Recommander une limite de 25MB / 50 pages
• Canvas hors écran pour les miniatures

Défi 3 : la qualité de l'export

L'intégration de texte et d'images avec pdf-lib nécessite une transformation soignée des coordonnées de l'espace du navigateur vers l'espace PDF.

Solution : Construire un pipeline de transformation complet qui gère :

• Les rotations de page
• Les différences de système de coordonnées (axe Y inversé en PDF)
• L'intégration et le dimensionnement des polices
• La conversion des formats d'image

Défi 4 : la compatibilité entre navigateurs

Les différents navigateurs présentent des implémentations de canvas légèrement différentes et des particularités de rendu PDF.

Solution : Des tests approfondis sur Chrome, Firefox, Safari et Edge. Utiliser la détection de fonctionnalités plutôt que la détection de navigateur.

Pourquoi nous l'avons rendu open source

Dès le premier jour, nous savions que cela devait être open source :

Les résultats

Après des mois de développement, nous avons lancé EditoraPDF avec :

Le code est disponible sur github.com/affsquadDevs/editorapdf sous licence MIT.

Points clés à retenir pour les développeurs

Participez

EditoraPDF est un projet open source, et nous accueillons les contributions de développeurs de tous niveaux.

Foire aux questions

Réflexions finales

Créer EditoraPDF a été un parcours exigeant mais gratifiant. Nous avons énormément appris sur le traitement PDF, les capacités des navigateurs et le développement open source.

Le meilleur dans tout ça ? N'importe qui peut désormais s'emparer de ce code, en tirer des leçons, le modifier ou créer quelque chose d'encore meilleur. C'est toute la puissance de l'open source.

Si vous travaillez sur un projet similaire ou si vous êtes simplement curieux du code, consultez le dépôt GitHub. Nous serions ravis de recueillir vos retours, de répondre à vos questions ou d'examiner vos pull requests.