Wie wir mit Next.js einen kostenlosen Open-Source-PDF-Editor entwickelt haben

Die Vision: Datenschutzorientierte PDF-Bearbeitung

Die meisten PDF-Editoren von heute verlangen, dass Sie Ihre Dokumente auf ihre Server hochladen. Bei sensiblen Dokumenten wie Verträgen, medizinischen Unterlagen oder Kontoauszügen ist das ein Albtraum für den Datenschutz.

Wir wollten etwas anderes entwickeln:

• 100 % clientseitige Verarbeitung – Dateien verlassen niemals Ihren Browser
• Keine Installation erforderlich – funktioniert direkt im Webbrowser
• Keine Anmeldung, kein Tracking – vollständig anonyme Nutzung
• Open Source – transparenter Code, den jeder prüfen kann
• Für immer kostenlos – keine Paywalls oder Abonnements

Mit diesen Prinzipien im Hinterkopf begannen wir, Technologien zu evaluieren, die diese Vision Wirklichkeit werden lassen könnten.

Die Wahl des Tech-Stacks

Frontend-Framework: Next.js 14

Wir haben uns aus mehreren Gründen für Next.js 14 mit dem neuen App Router entschieden:

• Hervorragende SEO-Funktionen – serverseitiges Rendering und Metadatenverwaltung von Haus aus
• Unterstützung für statischen Export – überall bereitstellbar (Vercel, Netlify, GitHub Pages)
• TypeScript-Integration – Typsicherheit und bessere Developer Experience
• Performance-Optimierung – automatisches Code-Splitting, Bildoptimierung
• Developer Experience – Hot Reload, großartige Dokumentation, riesiges Ökosystem

PDF-Rendering: PDF.js

PDF.js von Mozilla ist der Goldstandard für das Rendern von PDFs im Browser. Es ist die Grundlage für den in Firefox integrierten PDF-Viewer.

PDF-Bearbeitung: pdf-lib

Zum Erstellen und Bearbeiten von PDFs verwenden wir pdf-lib – eine reine JavaScript-Bibliothek, die vollständig im Browser läuft.

State-Management: Zustand

Statt Redux haben wir uns für Zustand entschieden – eine minimalistische, schnelle Bibliothek für das State-Management.

• Einfache API – kein Boilerplate-Code
• TypeScript-First-Design
• Geringe Bundle-Größe (~1KB)
• Keine Context-Provider erforderlich

Styling: Tailwind CSS

Tailwind CSS bietet uns Utility-First-Styling mit hervorragender Developer Experience und kleinen Produktions-Bundles durch automatisches Purging.

Architektur- und Designentscheidungen

1. Ausschließlich clientseitige Verarbeitung

Alles geschieht im 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

Zu keinem Zeitpunkt verlässt die Datei das Gerät des Nutzers. Das ist echter Datenschutz durch Design.

2. Normalisiertes Koordinatensystem

Eine große Herausforderung: PDFs haben unterschiedliche Seitengrößen, und Nutzer können hinein- und herauszoomen. Wie verfolgen wir die Positionen der Overlays?

Lösung: Alle Koordinaten auf den Bereich [0, 1] normalisieren.

// 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

Das macht Overlays zoom-unabhängig und über verschiedene Seitengrößen hinweg portabel.

3. Komponentenarchitektur

Wir haben die App in fokussierte Komponenten gegliedert:

• PdfViewer – Rendering des Haupt-Canvas
• Thumbnails – Seitenleiste zur Seitennavigation
• Toolbar – Steuerung für Zoom, Drehung, Löschen
• EditToolbar – Werkzeugauswahl (Text, Bild, Form)
• AdvancedOverlayLayer – Rendering von Text, Bildern, Formen
• ExportButton – Logik für den PDF-Export

4. State-Management-Muster

Unser Zustand-Store verwaltet:

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

Technische Herausforderungen, denen wir gegenüberstanden

Herausforderung 1: Genauigkeit der Textextraktion

PDF.js kann Text extrahieren, aber die Positionierung ist nicht immer pixelgenau, da PDFs Text auf unterschiedliche Weise kodieren (manchmal als einzelne Zeichen, manchmal als Wörter).

Lösung: Wir extrahieren Textelemente mit ihren Transformationsmatrizen und wandeln sie in normalisierte Koordinaten mit großzügigen Bounding Boxes um.

Herausforderung 2: Performance bei großen PDFs

Das Rendern von PDFs mit über 100 Seiten kann den Browser einfrieren lassen.

Lösung:

• Seiten verzögert laden (nur sichtbare Seiten rendern)
• requestAnimationFrame für flüssiges Rendering nutzen
• Limit von 25MB / 50 Seiten empfehlen
• Offscreen-Canvas für Vorschaubilder

Herausforderung 3: Exportqualität

Das Einbetten von Text und Bildern in pdf-lib erfordert eine sorgfältige Koordinatentransformation vom Browser-Raum in den PDF-Raum.

Lösung: Eine umfassende Transformations-Pipeline aufbauen, die Folgendes bewältigt:

• Seitendrehungen
• Unterschiede im Koordinatensystem (Y-Achse in PDF umgekehrt)
• Schrifteinbettung und -größe
• Konvertierung von Bildformaten

Herausforderung 4: Browser-Kompatibilität

Verschiedene Browser haben leicht unterschiedliche Canvas-Implementierungen und Eigenheiten beim PDF-Rendering.

Lösung: Umfangreiche Tests in Chrome, Firefox, Safari und Edge. Feature Detection statt Browser Detection verwenden.

Warum wir es zu Open Source gemacht haben

Von Anfang an war uns klar, dass dies quelloffen sein musste:

Die Ergebnisse

Nach Monaten der Entwicklung haben wir EditoraPDF veröffentlicht – mit:

Der Quellcode ist verfügbar unter github.com/affsquadDevs/editorapdf unter der MIT-Lizenz.

Die wichtigsten Erkenntnisse für Entwickler

Mach mit

EditoraPDF ist ein Open-Source-Projekt, und wir freuen uns über Beiträge von Entwicklern aller Erfahrungsstufen.

Häufig gestellte Fragen

Abschließende Gedanken

Die Entwicklung von EditoraPDF war eine herausfordernde, aber lohnende Reise. Wir haben unglaublich viel über PDF-Verarbeitung, Browser-Funktionen und Open-Source-Entwicklung gelernt.

Das Beste daran? Jeder kann nun diesen Code nehmen, daraus lernen, ihn bearbeiten oder etwas noch Besseres entwickeln. Das ist die Kraft von Open Source.

Wenn du an einem ähnlichen Projekt arbeitest oder einfach neugierig auf den Code bist, sieh dir das GitHub-Repository an. Wir würden uns freuen, dein Feedback zu hören, Fragen zu beantworten oder deine Pull Requests zu prüfen.