Ein Freund bat mich gestern, ihm einen kostenlosen Rechnungsgenerator zu empfehlen. Ich öffnete die ersten zehn Google-Ergebnisse, und alle machten dasselbe: Anmelde-Wall, E-Mail-Abgriff oder ein Wasserzeichen quer über dem PDF, es sei denn, du zahlst 12 $/Monat. Ein PDF aus Formularfeldern zu generieren ist ein gelöstes Problem, das irgendwie zu einer SaaS-Kategorie würde.
Also habe ich drei davon an einem Tag gebaut. Rechnungsgenerator, Lebenslauf-Builder, Anschreiben-Generator. Keine Anmeldung, kein Wasserzeichen, keine Daten verlassen deinen Browser. Felder ausfüllen, Live-Vorschau sehen, sauberes PDF herunterladen. Fertig.
Die drei Tools sind ein Rechnungsgenerator, ein Lebenslauf-Builder und ein Anschreiben-Generator. Alle drei laufen vollständig in deinem Browser.
Warum ich diese Tools gebaut habe, statt bestehende zu empfehlen
Letzten Monat habe ich versucht, kostenlose Rechnungsgeneratoren für einen Freelancer-Freund zu finden. Jeder einzelne verlangte eine Registrierung, beschränkte dich auf eine Vorlage, fügte sein Branding zum PDF hinzu oder war offensichtlich ein Trichter für sein SaaS-Produkt. Dieselbe Geschichte bei Lebenslauf-Buildern: Die kostenlose Stufe gibt dir eine einfache Vorlage, und sobald du etwas willst, das professionell aussieht, starrst du auf eine Bezahlschranke.
Die Sache ist: Ein PDF aus Formulardaten zu generieren ist kein schwieriges Problem. Der Browser hat alles, was er braucht. pdf-lib ist eine hervorragende Open-Source-Bibliothek, die PDFs komplett in JavaScript erstellt. Es gibt wirklich keinen Grund, warum deine Rechnungsdaten den Server von jemand anderem berühren müssen.
Also habe ich diese Tools mit einer gemeinsamen PDF-Rendering-Schicht und einem Vorlagensystem gebaut, inspiriert von PptPresentationMaker, das bereits das komplexeste Tool auf Kitmul war. Die Architektur ist geradlinig: React State für das Formular, eine HTML/CSS-Live-Vorschau, die sich bei jedem Tastendruck aktualisiert, und ein pdf-lib-PDF, das beim Klick auf Download generiert wird.
Der Rechnungsgenerator: sechs Vorlagen und echte Berechnungen
Der Rechnungsgenerator war technisch der interessanteste der drei. Er bietet sechs Vorlagen (Clean, Modern, Classic, Bold, Minimal, Corporate), jede mit eigenem Header-Layout und Farbschema. Du kannst dein Firmenlogo hochladen, und das Tool skaliert es clientseitig mit einem Canvas-Element, bevor es mit embedPng() ins PDF eingebettet wird.
Die automatischen Berechnungen verarbeiten Zwischensummen, prozentuale oder feste Rabatte und Steuersätze. Alles aktualisiert sich live in der Vorschau. Der Währungswähler unterstützt zwölf Währungen mit lokalisierter Formatierung über Intl.NumberFormat; dieselben $1,234.56 werden korrekt angezeigt, egal ob du USD, EUR oder JPY wählst.
Das Tabellen-Rendering war der schwierigste Teil. pdf-lib hat kein Tabellenkonzept; du positionierst Rechtecke und Text mit Pixelkoordinaten. Ich habe einen gemeinsamen drawTable-Helper geschrieben, der Zeilenhöhen basierend auf Textumbruch berechnet, alternierende Zeilenhintergründe handhabt und automatisch auf eine neue Seite umbricht, wenn die Tabelle überläuft. Dieser Helper ist jetzt in allen drei Tools wiederverwendbar.
Etwas, das mich überrascht hat: die Berechnung des Header-Layouts. Vorlagen mit farbigen Hintergründen müssen die exakte Höhe des Header-Inhalts kennen (Logo-Höhe + Geschäftsinfo-Zeilen + Rechnungsdetails), bevor sie das Hintergrundrechteck zeichnen. Ich habe es am Ende dynamisch berechnet, basierend darauf, welche Felder ausgefüllt sind; so schrumpft der Header, wenn du Felder leer lässt, und wächst, wenn du ein Logo hinzufügst.
Der Lebenslauf-Builder: fünf Vorlagen, alle ATS-kompatibel
Der Lebenslauf-Builder ist mit rund 900 Zeilen das komplexeste Tool. Er bietet fünf Vorlagen: Classic (einzelne Spalte, maximale ATS-Kompatibilität), Modern (mit einer farbigen Seitenleiste für Kontaktdaten und Fähigkeiten), Professional (zweispaltiger Header), Minimal (viel Weissraum) und Executive (fette Akzent-Unterstreichungen).
Ich habe die bewusste Entscheidung getroffen, nur StandardFonts aus pdf-lib zu verwenden (Helvetica und Helvetica-Bold). Benutzerdefinierte Schriften sehen hübscher aus, aber sie brechen Applicant Tracking Systems. ATS-Parser erwarten Standardschriften und einfache Textpositionierung. Jede Vorlage gibt echten, auswählbaren Text aus, der von oben nach unten gezeichnet wird; niemals Bilder von Text. Selbst die Modern-Vorlage mit ihrer Seitenleiste zeichnet den Hauptinhalt zuerst in der Lesereihenfolge, damit ein ATS deine Berufserfahrung vor deinen Kontaktdaten liest.
Die Abschnitte sind umsortierbar. Du kannst Berufserfahrung über Ausbildung ziehen oder Abschnitte für Zertifizierungen, Sprachen und Projekte hinzufügen. Jeder Erfahrungseintrag unterstützt mehrere Aufzählungspunkte mit Hinzufügen-/Entfernen-Steuerung. Das Ganze generiert mehrseitige PDFs, wenn dein Lebenslauf länger als eine Seite ist, mit korrekten Seitenumbrüchen, die nie einen Abschnittstitel von seinem Inhalt trennen.
Der Anschreiben-Generator: Einfachheit, richtig gemacht
Der Anschreiben-Generator ist der einfachste der drei, aber genau das ist der Punkt. Ein Anschreiben ist ein formatierter Geschäftsbrief, und die Formatierung falsch hinzubekommen lässt dich schlampig wirken. Das Tool bietet vier Vorlagen (Traditional, Modern, Professional, Simple) mit korrekten Geschäftsbrief-Konventionen: Platzierung der Absenderinformationen, Datumsformatierung, Anrede, Textabsätze und Grussformel.
Die Traditional-Vorlage platziert deine Kontaktdaten oben rechts (der formelle Standard). Die Modern-Vorlage verwendet einen großen Namen mit einer horizontalen Akzentlinie. Die Professional-Vorlage hat einen farbigen Header-Block. Du kannst so viele Textabsätze hinzufügen, wie du brauchst.
Keine KI schreibt deinen Brief. Du schreibst ihn, das Tool formatiert ihn. Ich finde, das ist wichtig. Ein Personalverantwortlicher, der hundert KI-generierte Anschreiben gelesen hat, erkennt sie sofort. Deine eigenen Worte in einem sauberen Layout werden mehr auffallen als ein GPT-generierter Brief in einem auffälligen Design.
Das Datenschutz-Argument ist real
Diese drei Tools verarbeiten sensible Informationen. Deine Rechnung enthält deine Geschäftsdaten, Kundennamen und Finanzdaten. Dein Lebenslauf enthält deinen beruflichen Werdegang, E-Mail und Telefonnummer. Dein Anschreiben nennt konkrete Unternehmen, bei denen du dich bewirbst.
Jede Alternative, die ich getestet habe, sendet diese Daten an einen Server. Zoho, Canva, Resume.io, Zety; alle verlangen Konten, und sobald du ein Konto erstellt hast, leben deine Daten auf deren Servern unter deren Datenschutzrichtlinien. Einige davon erklären ausdrücklich, dass sie deine Daten zur "Serviceverbesserung" nützen, was eine höfliche Art ist zu sagen, dass sie Modelle mit deinem Lebenslauf trainieren.
Bei browserbasierten Tools macht die Architektur Datenschutz zum Standard. Es gibt keinen Server, an den Daten gesendet werden. Die pdf-lib-Bibliothek generiert das PDF in einem Web Worker, der Browser erstellt eine Blob URL, und der Download erfolgt über einen lokalen Anker-Klick. Deine Daten existieren im Browserspeicher, bis du den Tab schliesst.
Was ich als Nächstes bauen würde
Quittungsgenerator (das Spiegelbild von Rechnungen, für die Empfängerseite), NDA-Generator (einfache vorlagenbasierte Rechtsdokumente) und Besprechungsprotokoll-Generator (strukturierte Notizen als PDF). Alle folgen demselben Muster: Formulardaten, Live-Vorschau, sauberes PDF. Die gemeinsamen Layout-Helper machen jedes neue Tool schneller zu bauen als das vorherige.
Wenn du Freelancer bist und Rechnungen erstellst, auf Jobsuche bist und deinen Lebenslauf aufpolierst, oder einfach jemand bist, der ein professionelles Dokument braucht, ohne den Registrierungs-Tanz, probier diese Tools aus. Sie sind auf kitmul.com neben über 400 weiteren kostenlosen browserbasierten Tools zu finden.
Verwandte Tools: PPT Presentation Maker · Text to PDF · PDF Merger · Budget Planner · Image to PDF
Referenzen: