Archivprojekt Archiviert

PDF Builder / Editor

Eine Dokumentenwerkstatt für die ursprüngliche Sandbox: mehrseitige Dokumente im Browser zusammenstellen, Text wie in einem leichten Textverarbeitungsprogramm formatieren, Links und Bilder einfügen, Signaturen hinzufügen und über den Druckdialog als PDF exportieren. Es war nie eine serverseitige PDF-Engine - der Wert lag in der Bearbeitungs-UX und darin, wie weit man clientseitiges Layout treiben kann, bevor Browser-Druckgrenzen greifen.

Dieses Projekt wird nicht mehr gepflegt oder aktualisiert. Die Case Study und Screenshots dienen als Referenz; die Legacy-Demo auf dem alten Sandbox-Host kann sich in modernen Browsern anders verhalten.

← Zurück zu Projekten Kontakt zu Front-end-Arbeit Legacy-Demo (alte Sandbox)

Was es war

PDF Builder / Editor lebte vollständig in statischem HTML, CSS und JavaScript. Jede Seite war eine bearbeitbare Fläche mit persistenter Toolbar oben, optionalen Seitenpanels für Seiten und Druckeinstellungen sowie Modal-Dialogen für Links, Suche, Signaturen und Hilfe. Kein Konto, kein Backend: Ihr Dokument blieb im Browser, bis Sie druckten oder löschten.

Ziel war praktische Dokumentenerstellung - Briefe, einfache Berichte, Checklisten und unterschriebene Formulare - ohne Softwareinstallation. Der Export nutzte den nativen „Als PDF speichern“-Pfad des Browsers, was die Implementierung ehrlich macht über das, was die Webplattform über Chrome, Firefox und Edge zuverlässig liefern kann.

PDF Builder mit formatiertem Beispieldokument — Der Haupteditor mit Toolbar, Dokumentfläche und Statusleiste mit Wortanzahl und aktiver Seite.

Vollständig clientseitig: keine Uploads, kein Server-Rendering.
Mehrseitige Dokumente mit Bearbeitung und Navigation pro Seite.
Live Wort- und Zeichenzähler plus Seitenanzeige im Statusbereich.
Beispieldokument zum Erkunden der Funktionen ohne Neustart.
Kontextmenü auf markiertem Text für schnelle Formatierung und Listen.

Seitenpanel

Das Seitenpanel behandelte jedes Blatt als eigenständiges Objekt. Seiten hinzufügen, zwischen ihnen springen, Inhalte duplizieren, die Reihenfolge ändern oder Seiten löschen. Miniaturen und Beschriftungen machten längere Dokumente übersichtlicher als ein endloser contenteditable-Block.

Jede Seite hatte ihren eigenen DOM-Baum, sodass Formatierung auf Seite drei nicht auf Seite eins übergriff. Diese Trennung war wichtig für Druckränder und das mentale Modell - Nutzer konnten in „Blättern“ denken wie in Desktop-Publishing.

Seitenpanel mit Seitenverwaltung — Seitenverwaltung: Seiten hinzufügen, auswählen und organisieren.

Leere Dokumentseite im Editor — Eine frische Seite bereit für Inhalt - Toolbar sichtbar, Ränder durch den Druckvorschaubereich angedeutet.

Seite hinzufügen erweitert das Dokument ohne Neuladen.
Umordnen, duplizieren und löschen im Seitenpanel.
Fokus pro Seite: die Toolbar zielt immer auf die aktive Seite.
Leerer Canvas-Zustand für den Neustart.

Formatierungs-Toolbar

Die Toolbar deckte übliche Rich-Text-Operationen ab: fett, kursiv, unterstrichen, durchgestrichen, Überschriften von Normal bis Überschrift 6, Schriftarten (Georgia, Arial, Times, Courier, Verdana, Helvetica), Textfarbe und Hervorhebungsfarbe. Ausrichtung links, zentriert, rechts; Listen mit Aufzählungszeichen (disc, circle, square) und nummerierten Varianten (1,2,3…, a,b,c…, A,B,C…, römische Ziffern).

„Löschen“ entfernte Inline-Formatierung von der aktuellen Auswahl - hilfreich nach dem Einfügen aus Word oder E-Mail. Tastenkürzel wie am Desktop: Strg+B/I/U, Strg+Z/Y, Strg+A für alles auf der aktiven Seite.

Schrift- und Farbsteuerung in der Toolbar — Schriftfamilien-Dropdown mit Textfarbe und Hervorhebungsfarbe.

Überschriftenebenen H1–H6 plus Normal-Absatzstil.
Sechs Schriftfamilien und unabhängige Text-/Hervorhebungsfarben.
Aufzählungs- und nummerierte Listen mit mehreren Nummerierungsschemata.
Formatierung der Auswahl löschen.
Rechtsklick-Kontextmenü für Listen und Stile.

Einfügen: Links, Bilder, Tabellen, TOC, Signaturen

Neben Fließtext fügte die Einfügen-Gruppe strukturierte Inhalte hinzu. Links öffneten einen Dialog für Anzeigetext und URL. Bilder mit Größenoptionen. Tabellen und ein Inhaltsverzeichnis-Generator für längere Dokumente. Signaturen waren am aufwendigsten: zeichnen auf Canvas, Bild hochladen oder getippten Text in Handschrift-Schrift mit Größe und Farbe, dann Vorschau vor dem Einfügen.

Dialog zum Einfügen eines Links — Link-Dialog mit Text- und URL-Feldern.

Optionen für Bildeinfügung — Bildoptionen beim Einbetten von Medien.

Signatur-Dialog mit Zeichnen-, Upload- und Text-Tabs — Signatur-Workflow: zeichnen, hochladen oder tippen - mit Strichstärke, Schrift, Farbe und Live-Vorschau.

Link-Dialog: Beschriftung + URL als Ankertext.
Bildeinfügung mit Layout-/Größenoptionen.
Tabellen-Builder für einfache Raster.
Inhaltsverzeichnis-Block für mehrteilige Dokumente.
Signaturmodi: Freihand, Upload oder typografischer Text.
Signaturvorschau vor dem Einfügen.

Suchen & Ersetzen

Ein eigener Suchen-&-Ersetzen-Dialog (Strg+F) durchlief Treffer im Dokument. Groß-/Kleinschreibung und ganze Wörter filterten Ergebnisse; Zurück/Weiter vor dem Ersetzen einzelner Treffer oder „Alle ersetzen“.

F3 und Umschalt+F3 für nächsten/vorherigen Treffer; Escape schloss Dialoge ohne den Dokumentzustand zu verlieren.

Option für Groß-/Kleinschreibung.
Filter nur ganze Wörter.
Einzelnen Treffer oder alle ersetzen.
Tastatur: Strg+F öffnen, F3 / Umschalt+F3 für Treffer.

Druckeinstellungen & Export

Druckeinstellungen öffneten ein Panel für Seitengröße (A4, Letter, Legal), Ausrichtung (Hoch- oder Querformat) und Ränder in Millimetern. Die UI erinnerte an „Als PDF speichern“ im Systemdruckdialog - so funktioniert browserbasierter Export ohne proprietäre PDF-Bibliothek auf dem Server.

Aktionen: Drucken / Als PDF speichern, Dokument leeren, Beispieldokument laden. Dokumentinfo mit Wörtern, Zeichen, Seitenanzahl und aktiver Seite vor dem Export.

Seitenformate: A4, Letter, Legal.
Hoch- und Querformat.
Konfigurierbare Ränder (mm).
Druck / Als PDF über die Browser-Druck-Pipeline.
Kurzbefehle zum Leeren und Beispieldokument.

Hilfe & Tastenkürzel

Ein integriertes Hilfe-Panel dokumentierte Toolbar, Kürzel und Tipps - öffnen mit Strg+/ und schließen mit Escape wie andere Modals.

Strg+/ - Hilfe öffnen oder schließen.
Strg+F - Suchen & Ersetzen.
Strg+B / Strg+I / Strg+U - fett, kursiv, unterstrichen.
Strg+Z / Strg+Y - rückgängig und wiederholen.
Strg+A - alles auf der aktiven Seite markieren.
Esc - Dialoge schließen.

Warum es archiviert ist

Ich entwickle oder unterstütze PDF Builder nicht mehr aktiv. Browser-APIs, Druckmotoren und contenteditable-Eigenheiten ändern sich schnell; einen Dokumenteditor poliert zu halten ist ein Produkt für sich. Das Tool bleibt hier dokumentiert, damit Designentscheidungen und Funktionsumfang im Portfolio sichtbar sind, auch ohne weitere Fixes oder Features.

Für einen gepflegten Dokumenten-Workflow heute eignen sich dedizierte Editoren oder serverseitige PDF-Pipelines. Dieser Archiv-Eintrag ist ein Snapshot dessen, was ich auf der alten Sandbox veröffentlicht habe - inklusive Legacy-Demo-Link aus Interesse, nicht als unterstütztes Produkt.