pdfcn im Test: Rechnungen und Reports mit React, ohne Chrome

Was ist pdfcn?

pdfcn ist eine Sammlung von Bausteinen für PDF-Dokumente in React: Kopfzeilen, Tabellen, Summenblöcke, QR-Codes, Unterschriftsfelder, Diagramme und fertige Vorlagen für Rechnungen, Lieferscheine, Berichte oder Eintrittskarten. Der Name spielt auf shadcn/ui an, die bekannteste Sammlung von Oberflächen-Bausteinen für React. pdfcn überträgt deren Prinzip auf Dokumente. Du installierst keine Bibliothek, in die du nicht hineinschauen kannst, sondern kopierst den Quellcode der Bausteine mit einem Befehl in dein Projekt. Ab dann gehört er dir.

Das shadcn-Prinzip in zwei Absätzen

Eine klassische Bibliothek installierst du als Paket. Updates kommen vom Hersteller, eigene Änderungen am Paket gehen beim nächsten Update verloren. Bei shadcn/ui und damit bei pdfcn liegt der Code nach der Installation als ganz normale Dateien in deinem Projekt. Du änderst ihn wie eigenen Code, und Updates holst du bewusst oder gar nicht.

Das hat eine Kehrseite, die in Ankündigungen selten vorkommt. Nachdem ich alle 20 Vorlagen installiert hatte, lagen in meinem Testprojekt 14.685 Zeilen pdfcn-Code. Die pflegst du ab dann selbst. Für ein Projekt mit drei Belegarten ist das kein Problem, du installierst ja nur, was du brauchst: Für die Rechnung waren es 18 Dateien.

Takumi und Forme: die Engines darunter

pdfcn zeichnet selbst nichts. Die eigentliche Arbeit machen zwei Engines, die beide in Rust geschrieben sind und als WebAssembly laufen, also ohne Browser. Takumi stammt von Kane Wang und rendert Vorschaubilder für soziale Netzwerke und seitenweise PDFs aus JSX, HTML und CSS, in Node, Bun, im Browser und in Cloudflare Workers. Forme stammt von Dan Molitor und ist eine Dokument-Engine, die HTML mit Print-CSS versteht und Vorlagen aus React, Svelte, Vue oder Preact annimmt. pdfcn bietet jede Komponente für beide Engines mit derselben Schnittstelle an. Auf der Startseite schaltest du oben rechts zwischen beiden um.

Wer steckt hinter pdfcn?

pdfcn stammt von Aniket Pawar, einem Designer und Entwickler aus Mumbai (auf GitHub Aniket-508, auf X @alaymanguy). Von den 157 Commits im Projekt stammen 111 von ihm. Veröffentlicht hat er pdfcn unter dem Namen Shadcn Labs, einer GitHub-Organisation, die es seit April 2026 gibt. Sie zählt inzwischen 24 öffentliche Projekte, die meisten nach demselben Muster: termcn für Oberflächen im Terminal (1.168 Sterne), emailcn für E-Mails, ogimagecn für Vorschaubilder, editorcn für Texteditoren und einige mehr. pdfcn ist mit Abstand das erfolgreichste davon.

Nein, pdfcn kommt nicht von shadcn

Am 20. September 2026 landete pdfcn auf Hacker News mit dem Titel „Beautiful pdf components, built on Takumi and Forme, by Shadcn“. Das ist falsch. shadcn ist der Entwickler hinter shadcn/ui, und Shadcn Labs schreibt auf der eigenen GitHub-Seite selbst: „Not endorsed by or affiliated with shadcn.“ Im offiziellen Verzeichnis der shadcn-Registries mit 408 Einträgen taucht pdfcn am 30.09.2026 nicht auf. Das ist kein Makel, pdfcn nutzt nur die offene Registry-Technik von shadcn. Du solltest es aber wissen, wenn du die Qualität einschätzen willst: Hinter pdfcn steht ein einzelner, sehr fleißiger Entwickler, kein Team mit Firma im Rücken.

Wer sonst mitarbeitet

Elf Menschen haben bisher Code beigesteuert. Kane Wang, der Entwickler von Takumi, hat mit zwölf Commits die Umstellung auf neuere Takumi-Versionen und die Fußzeilen der Berichte übernommen, Dan Molitor von Forme das Update auf Forme 0.25 und korrekte Seitenzahlen. Die Hälfte der 20 Vorlagen stammt von anderen Entwicklern, darunter Lieferschein, Versandetikett, Protokoll, Pressemitteilung und Unterrichtsplan. Eingereicht wurden sie zwischen dem 14. und 22. September. Als Vorbild nennt die Projektseite pdfx, das denselben Ansatz für react-pdf verfolgt. Finanziert wird pdfcn über Sponsoren und Anzeigen von Carbon in der Dokumentation.

Was kann man mit pdfcn bauen?

Die 24 Komponenten decken ab, was in Geschäftsdokumenten immer wieder vorkommt:

• Text und Aufbau: Heading, Text, List, Section, Stack, Divider, Keep Together (hält Inhalte auf einer Seite zusammen) und Page Break.
• Kopf und Fuß: Page Header, Page Footer und Page Number, die sich auf jeder Seite wiederholen.
• Daten: Table, Data Table, Key Value für Schlüssel-Wert-Listen und Graph für Balken-, Linien- und Flächendiagramme aus SVG.
• Hinweise: Alert, Badge und Card.
• Extras: QR Code, Signature (Unterschriftsfeld), Watermark, PDF Image, Link und Form für beschriftete Formularblöcke.

Spannender als die einzelnen Komponenten sind die 20 fertigen Vorlagen. Sie sind vollständige Dokumente aus diesen Komponenten, mit Beispieldaten, die du durch deine eigenen ersetzt. Ich habe alle 20 installiert und mit Takumi gerendert. Jede lief auf Anhieb durch.

Themes und Theme-Builder

Das Aussehen steuern neun Themes: Professional, Modern, Minimal, Executive, Corporate, Elegant, Vivid, Forest und Blueprint. Ein Theme ist eine Datei mit Farben, Schriften, Abständen und Rundungen, die alle Komponenten über einen gemeinsamen Provider lesen. Seit dem 30. August gibt es dazu einen Theme-Builder mit Live-Vorschau, Rückgängig-Funktion und Export als Code. Die Einstellungen stehen in der Adresse, du kannst ein Theme also per Link teilen.

Im Video fällt auf, was Jacob Paris von Vercel schon zehn Tage nach dem Start angemerkt hat: Die Themes unterscheiden sich vor allem in Farbe und Schrift, der Aufbau des Dokuments bleibt gleich. Aniket Pawar antwortete damals, der Theme-Builder sei in Arbeit. Er kam eine Woche später. Für eigene Hausfarben reicht das völlig, für ein wirklich eigenes Layout änderst du die Vorlage selbst.

Wofür braucht man das im Alltag?

pdfcn lohnt sich überall dort, wo Dokumente automatisch aus Daten entstehen, und zwar oft. Typische Fälle aus meiner Arbeit mit Shops und Agenturen:

• Online-Shops mit eigener Logik: Rechnung, Lieferschein, Versandetikett oder Gutschein direkt aus der Bestellung, etwa über einen Webhook aus Shopify oder Shopware in eine kleine Node-Funktion. Das lohnt sich vor allem bei Headless-Shops und Sonderfällen, für die es kein fertiges Plugin gibt.
• Agenturen und Freiberufler: Monatsberichte für Kunden aus Search Console, GA4 oder Werbekonten, Stundenabrechnungen, Angebote.
• Veranstalter: Eintrittskarten mit QR-Code, Programmhefte über mehrere Tage.
• Handwerk und Service: Arbeitsaufträge mit Material, Arbeitszeit und Unterschrift des Kunden.
• Software-Produkte: der Knopf „Als PDF herunterladen“ für Auswertungen, Zertifikate oder Verträge.

Wo pdfcn keinen Sinn ergibt: Wenn du im Monat eine Handvoll Rechnungen schreibst, nimm deine Buchhaltungssoftware. Wenn dein Shopsystem ein Rechnungsplugin mit deutschen Pflichtangaben hat, nutze das. pdfcn ist ein Baukasten für Entwickler, kein Programm zum Anklicken.

So installierst du pdfcn

Die Startseite verspricht „ein Befehl“. In einem frischen Projekt waren es bei mir drei Schritte, weil zwei Voraussetzungen nirgends auf der Startseite stehen.

1. Ein React-Projekt mit shadcn-Konfiguration. In einem Next.js-Projekt mit shadcn/ui ist das schon erledigt. In meinem frischen Vite-Projekt brach shadcn init ab, weil Tailwind und ein Pfad-Alias fehlten. Die PDF-Bausteine brauchen Tailwind gar nicht, die Kommandozeile verlangt es trotzdem.
2. Die Registry eintragen. Der Befehl von der Startseite schlug fehl mit Unknown registry "@pdfcn". Erst mit dem Eintrag "@pdfcn": "https://pdfcn.dev/r/{name}.json" unter registries in der components.json klappt der Kurzname. Den Hinweis findest du nur auf der Unterseite „Registry“ der Dokumentation.
3. Der eigentliche Befehl. npx shadcn@latest add @pdfcn/takumi/invoice-minimal legte in 7,8 Sekunden 18 Dateien an und installierte zwei Pakete: takumi-pdf 0.15.0 und @takumi-rs/helpers 2.14.0.

Danach ist das Rendern kurz. So entsteht bei mir die Rechnung aus den Daten einer Bestellung:

import { render } from "takumi-pdf";
import { googleFonts } from "@takumi-rs/helpers";
import { RechnungDocument } from "@/pdf-de/rechnung";

const pdf = await render(<RechnungDocument data={bestellung} />, {
  size: "a4",
  margin: 0,            // die Vorlagen bringen ihre Ränder selbst mit
  fonts: await googleFonts(["Inter"]),
  lang: "de",
});

Zwei Zeilen darin sind wichtig. margin: 0 steht in keiner Anleitung der Vorlagen, pdfcn.dev rendert sie intern aber genau so. Ohne diese Option rutschte die Fußzeile meiner Rechnung auf eine zweite Seite. Und googleFonts lädt die Schrift bei jedem Start von Google. Für den Betrieb legst du die Schriftdateien besser ins Projekt, dann läuft alles offline.

"registries": {
  "@pdfcn": "https://pdfcn.dev/r/{name}.json"
}

npx shadcn@latest add @pdfcn/takumi/invoice-minimal

Takumi oder Forme: Welche Engine solltest du nehmen?

Beide Engines laufen ohne Browser, beide sind kostenlos, beide stecken hinter derselben pdfcn-Schnittstelle. Unterschiede gibt es trotzdem, und einige davon habe ich erst im Test gesehen.

Meine Faustregel: Für kurze Belege, die schnell und klein sein sollen, nimm Takumi. Das ist auch die Engine, auf die pdfcn zuerst ausgerichtet ist, und die mit der größeren Gemeinde. Für lange, tabellenlastige Dokumente, ausfüllbare Formulare oder Signaturen nimm Forme. Mischen solltest du die beiden nicht: Die Dateien beider Engines landen unter denselben Pfaden, eine zweite Installation überschreibt die erste.

Mein Praxistest: deutsche Rechnung, Lieferschein und SEO-Bericht

Der Aufbau: ein frisches Projekt mit Vite, React und TypeScript, Node 22, ein Apple M4 mit 16 GB. Getestet habe ich takumi-pdf 0.15.0, Forme 0.25.0 und zum Vergleich Chrome 154 über Puppeteer 25.12. Chrome bekam dabei denselben Code, nur als HTML statt als PDF-Auftrag. Das geht, weil die Takumi-Bausteine von pdfcn am Ende normale div- und span-Elemente mit Stilangaben sind.

Die Rechnung: 24 Stellen, dann ist sie deutsch

Als Grundlage diente die Vorlage „Invoice Minimal“. Sie ist sauber gebaut, aber durch und durch amerikanisch. „Bill To“, „Invoice Details“ und „Balance Due“ stehen als Text im Code, ebenso das Dollarzeichen, „Tax (7%)“ und die indische Steuernummer „GST“. Selbst „Page 1 of 1“ ist kein Platzhalter, sondern fester Text. Die Beträge erscheinen zudem in zwei Formaten im selben Beleg: $25,000 beim Einzelpreis und $25000.00 bei der Summe.

Für die deutsche Fassung habe ich 24 Stellen ersetzt und die Datentypen um Leistungsdatum, USt-IdNr., Steuernummer, IBAN und Steuersatz erweitert. Die Beträge formatiert jetzt Intl.NumberFormat("de-DE", { currency: "EUR" }). Das Ergebnis stimmt: Umlaute, ß, das Euro-Zeichen und deutsche Anführungszeichen kommen in Takumi und Forme sauber heraus, der Text ist im PDF markier- und durchsuchbar.

Eine Kleinigkeit zeigt, warum du die Sprache immer fest angeben solltest. Einige Vorlagen formatieren Zahlen mit toLocaleString() ohne Sprachangabe. Das Ergebnis hängt dann von der Sprachumgebung ab, in der gerendert wird. In meinem deutschen Chrome zeigte die Vorschau auf pdfcn.dev deshalb „$4.500“ statt „$4,500“, ein Dollarbetrag im deutschen Zahlenformat.

Geschwindigkeit: schneller als Chrome, aber nicht bei jeder Länge

Im Netz kursiert die Zahl „26 ms statt 198 ms mit Chrome“. Sie stammt aus der Vergleichsseite von Takumi selbst, gemessen mit Version 0.4 auf einem M1 Pro. Ich habe mit den aktuellen Versionen nachgemessen, jede Engine in fünf eigenen Läufen mit je 20 warmen Durchläufen.

Bei der einseitigen Rechnung bestätigt sich der Vorsprung, nur kleiner als versprochen: Takumi brauchte 30 ms, Forme 35 ms, Chrome 91 ms. Das ist Faktor drei, nicht Faktor acht, denn Chrome war auf dem M4 deutlich schneller als in der Messung von Takumi. Bei der Sammelrechnung mit 120 Positionen dreht sich das Bild. Forme lag mit 84 ms klar vorn, Chrome brauchte 131 ms und Takumi 174 ms. Wer lange Dokumente erzeugt, sollte also nicht blind die schnellste Engine aus dem Kurztest nehmen.

Der größere Unterschied liegt ohnehin woanders. Puppeteer lädt bei der Installation einen kompletten Chrome und eine zweite, schlanke Chrome-Variante herunter, zusammen mit dem Paket selbst 602 MB. Takumi kommt mit 4,4 MB aus. Auf einem kleinen Server oder in einer Serverless-Funktion entscheidet genau das, ob PDFs überhaupt gehen.

Lange Rechnungen: Hier musst du nacharbeiten

Die Sammelrechnung zeigt auch die größte Schwäche der fertigen Vorlagen. Sie sind für eine Seite gebaut. Bei 120 Positionen wiederholt keine der drei Varianten den Tabellenkopf auf den Folgeseiten. Takumi setzt ab Seite zwei keinen oberen Rand mehr und stellt die Fußzeile allein auf eine siebte Seite. Forme hält die Ränder, schreibt aber auf jede Seite „Seite 1 von 1“, weil der Text fest in der Vorlage steht. Das gleiche Problem wurde für die Forme-Berichte schon gemeldet und dort behoben, in der Rechnungsvorlage steckt es noch.

Lösbar ist das mit Bordmitteln. Takumi kennt eigene Kopf- und Fußzeilen mit echten Seitenzahlen als Option beim Rendern, Forme hat eine Tabelle, die ihren Kopf auf jeder Seite wiederholt. Du musst die Vorlage dafür aber umbauen. Für Monatsrechnungen mit vielen Positionen solltest du das einplanen.

Lieferschein: Vorsicht bei Feldern, die du nicht setzt

Der Lieferschein hatte eine Überraschung, die in einem echten Betrieb unangenehm werden kann. Die Vorlage mischt die übergebenen Daten mit ihren eigenen US-Beispieldaten. Jedes Feld, das du nicht setzt, füllt sie aus dem Beispiel. Auf meinem deutschen Lieferschein stand deshalb plötzlich „Bestellnr. Kunde: PO-4471“, eine Nummer, die ich nie angegeben hatte. Genauso wären der englische Rückgabehinweis oder der Firmenname „Acme Store“ gedruckt worden, hätte ich sie weggelassen.

Die Lösung ist einfach: Lösche die Beispieldaten, sobald die Vorlage in deinem Projekt liegt. Dann fällt ein fehlendes Feld sofort auf, statt still durch amerikanische Daten ersetzt zu werden. Auch die Adressfelder musst du umbauen. Die Vorlage erwartet Bundesstaat und ZIP-Code und setzt sie in US-Reihenfolge zusammen. Für Deutschland habe ich daraus „Straße, PLZ Ort“ gemacht.

SEO-Monatsbericht mit echten Search-Console-Daten

Der dritte Test ist der, den ich selbst am ehesten einsetzen würde: ein Monatsbericht für einen Kunden. Als Grundlage diente die Vorlage „Report Marketing“, befüllt mit den Septemberzahlen von Opal-Schmiede aus der Search-Console-Schnittstelle. Vom 1. bis 29. September kamen 11.299 Klicks aus der Google-Suche, rund 390 am Tag, bei 698.392 Impressionen. Die durchschnittliche Position verbesserte sich gegenüber dem August von 7,5 auf 7,0. Vier der sechs stärksten Seiten sind Ratgeber-Artikel.

Das Ergebnis sieht ordentlich aus, der Weg dahin zeigt aber wieder die Grenzen der Vorlage. Mit den vollen Adressen der Seiten lief die zweite Seite über, und es entstand eine leere Seite, auf der nur die Fußzeile stand. Erst mit kurzen Namen wie „Tansanit-Preis“ passte alles auf drei Seiten. Die Diagramm-Komponente beschriftet Achse und Balken mit Werten wie „2.8K“ und „837.8“, die Tabellenköpfe hießen „Stream“, „Owner“ und „Risk“, und jede Seite trug die Fußzeile „Generated with pdfcn“. Die Zähler auf der letzten Seite prüfen sogar englische Statuswerte wie „On Track“, übersetzt man die, zählen sie falsch. Das alles lässt sich ändern, es ist ja dein Code. Rechne für einen Bericht in deinem Design aber eher mit einem halben Tag als mit einer Stunde.

Wie du die Zahlen in so einem Bericht richtig einordnest, steht in meinem Beitrag Search Console richtig lesen. Wenn du solche Berichte automatisch haben willst, schau dir mein Angebot für Reporting und Auswertungen an.

Schriften, Barrierefreiheit und was mir sonst auffiel

• Takumi liest keine Systemschriften. Die Themes nennen „Helvetica“ und „Times-Roman“, gerendert wurde trotzdem alles in Inter, der einzigen Schrift, die ich übergeben hatte. Die Serifen-Überschrift des Themes fehlte. Chrome dagegen nahm die Schriften des Mac. Wer ein Theme wie Executive mit Merriweather nutzen will, muss die Schriftdatei selbst übergeben.
• Forme bettet Helvetica nicht ein. Die Datei ist klein, aber das Aussehen hängt vom Betrachter ab. Für PDF/A oder eine Hausschrift registrierst du eigene Schriften.
• „Accessible“ stimmt nur teilweise. Takumi schreibt standardmäßig eine Struktur für Screenreader ins PDF. In meiner Rechnung bestand sie aber aus 36 Absätzen, ohne Überschrift und ohne Tabelle. Der Grund: pdfcn baut Tabellen aus Zeilen mit Flexbox statt aus echten Tabellen-Elementen. Die Takumi-Dokumentation sagt selbst, dass solche Tabellen keine Tabellen-Struktur bekommen.
• Die Code-Ansicht ist geschönt. Auf der Startseite besteht die Beispielrechnung aus 20 Zeilen. Die echte Vorlage hat 252 Zeilen und bringt 17 weitere Dateien mit.
• Keine deutsche Sprache in Sicht. Geplant ist Mehrsprachigkeit für die Dokumentation in sieben Sprachen, Deutsch ist nicht dabei. Die Beschriftungen in den Vorlagen betrifft das ohnehin nicht.

pdfcn, react-pdf oder Puppeteer: Was passt wann?

pdfcn ist nicht der einzige Weg zum PDF aus JavaScript. Die Frage ist, was deine Vorlage mitbringt und wo das PDF entstehen soll.

Wichtig in Deutschland: Eine PDF-Rechnung ist keine E-Rechnung

Wer pdfcn für Rechnungen einsetzt, muss die E-Rechnungspflicht kennen. Seit dem 1. Januar 2025 müssen alle Unternehmen in Deutschland E-Rechnungen empfangen können. Beim Ausstellen gilt eine Übergangszeit: Bis Ende 2026 darfst du an andere Unternehmen noch Papier oder mit Zustimmung des Empfängers ein PDF schicken. Bei einem Vorjahresumsatz bis 800.000 Euro verlängert sich diese Frist bis Ende 2027. Danach gilt im Geschäft zwischen inländischen Unternehmen die E-Rechnung.

Eine E-Rechnung ist ein strukturierter Datensatz nach der europäischen Norm EN 16931, in Deutschland meist als XRechnung (reines XML) oder ZUGFeRD (PDF mit eingebetteter XML). Ein schön gestaltetes PDF aus pdfcn ist das nicht. Seit der Einführung der Pflicht gilt bei ZUGFeRD außerdem die XML als führend, nicht das sichtbare Bild. Weichen beide voneinander ab, zählt die XML.

Die Details stehen in den Fragen und Antworten des Bundesfinanzministeriums zur E-Rechnung (Stand März 2026). Eine Steuerberatung ersetzt dieser Abschnitt nicht.

Wie schnell wächst pdfcn?

Für ein Projekt, das am 11. August 2026 angelegt wurde, ist das Tempo bemerkenswert. Am 30. September standen 2.746 Sterne und 139 Forks auf GitHub, 40 Einträge waren offen. Der Launch-Beitrag auf X holte 2.035 Likes. Auf Hacker News blieb es dagegen bei 6 Punkten, auf Reddit bei einem freundlichen Beitrag in r/shadcn mit 51 Punkten. Viel Kritik habe ich nicht gefunden, aber auch kaum Erfahrungsberichte aus echten Projekten. pdfcn ist sieben Wochen alt.

Ein besserer Gradmesser als Sterne sind die Downloads der Engines. takumi-pdf gibt es auf npm erst seit dem 1. August 2026, elf Tage vor pdfcn. Heute sind es rund 26.000 Downloads pro Woche. Forme hat sich seit dem Start von pdfcn mehr als verdreifacht. Ein Teil davon geht sicher auf pdfcn zurück, beide Engines haben aber auch eigene Nutzer.

Die offenen Aufgaben auf GitHub zeigen, wohin es geht. Geplant sind Vorlagen für Quittung, Angebot, Geschäftsbrief, Lebenslauf, Anschreiben, Projektangebot und Zertifikat, dazu Komponenten für Strichcodes, Summenblöcke und Adressen. Außerdem sollen mit pdfme und Unlayer zwei weitere Engines dazukommen.

Meine Meinung: Für wen sich pdfcn lohnt

pdfcn ist das schnellste Startpaket für PDFs in React, das ich kenne. Nach zehn Minuten hatte ich eine ansehnliche Rechnung, nach einer Stunde eine deutsche. Der Code ist lesbar, die Themes lassen sich im Browser einstellen, und das Rendern ohne Chrome spart auf dem Server Platz und Nerven. Dass die Dokumentation für KI-Assistenten vorbereitet ist, merkt man im Alltag sofort.

Man sollte pdfcn aber als das nehmen, was es ist: eine sehr gute Vorlage, kein fertiges Produkt für Deutschland. Sprache, Währung, Pflichtangaben, Adressen und Seitenumbrüche machst du selbst. Und das Projekt hängt an einer Person. 111 von 157 Commits stammen von Aniket Pawar, und niemand garantiert, dass es in einem Jahr noch gepflegt wird. Genau hier hilft ausgerechnet das shadcn-Prinzip: Der Code liegt bei dir und läuft auch weiter, wenn pdfcn eines Tages stillsteht.

Einsetzen würde ich pdfcn für zwei Dinge. Erstens für Monatsberichte an Kunden, die heute als Dashboard im Browser laufen und am Monatsende als PDF in den Posteingang sollen. Zweitens für Belege in Shop-Automationen, die kein Plugin abdeckt, etwa Lieferscheine für Teillieferungen oder Etiketten aus einem eigenen Lager-Workflow. Für Rechnungen an Unternehmen würde ich pdfcn nur zusammen mit einer E-Rechnungs-Bibliothek nehmen. Wie solche Abläufe mit KI und Schnittstellen aussehen, zeige ich unter KI-Automatisierung.

Häufige Fragen

Was ist pdfcn?

pdfcn ist eine kostenlose Sammlung von PDF-Bausteinen für React mit 24 Komponenten, 20 fertigen Vorlagen und 9 Themes. Die Bausteine werden über die shadcn-Kommandozeile als Quellcode in dein Projekt kopiert und mit Takumi oder Forme gerendert, ohne Browser.

Ist pdfcn kostenlos?

Ja. pdfcn steht unter der MIT-Lizenz und darf auch in kommerziellen Projekten genutzt werden. Takumi (MIT oder Apache-2.0) und Forme (MIT) sind ebenfalls kostenlos.

Kommt pdfcn von shadcn?

Nein. pdfcn stammt von Aniket Pawar und seinem Projekt Shadcn Labs. Shadcn Labs schreibt selbst, dass es nicht von shadcn unterstützt wird und nicht mit ihm verbunden ist. pdfcn nutzt nur die offene Registry-Technik der shadcn-Kommandozeile.

Brauche ich shadcn/ui, um pdfcn zu nutzen?

Du brauchst die shadcn-Kommandozeile und eine components.json mit dem Registry-Eintrag für pdfcn. Die Kommandozeile verlangt beim Einrichten Tailwind und einen Pfad-Alias. Die PDF-Bausteine selbst nutzen kein Tailwind und keine Komponenten aus shadcn/ui.

Funktioniert pdfcn ohne React?

Nein, pdfcn besteht aus React-Komponenten. Ohne React kannst du Takumi direkt mit HTML und CSS nutzen oder Forme mit HTML, Print-CSS, Vue, Svelte oder Preact.

Kann pdfcn deutsche Rechnungen erzeugen?

Ja, nach Anpassung. Umlaute, ß und das Euro-Zeichen funktionieren. Die Vorlagen sind aber auf Englisch und US-Format gebaut, Beschriftungen, Währung und Steuer musst du im Code ändern und die Pflichtangaben nach § 14 UStG selbst ergänzen. In meinem Test waren das 24 Stellen.

Erzeugt pdfcn E-Rechnungen im Format ZUGFeRD oder XRechnung?

Nein. pdfcn liefert nur das sichtbare Dokument. Takumi und Forme können zwar ein ZUGFeRD-PDF als PDF/A-3 mit eingebetteter XML bauen, die XML nach EN 16931 musst du aber mit einer eigenen Bibliothek oder einem Dienst erzeugen.

Wie schnell ist pdfcn?

In meinem Test auf einem Apple M4 brauchte eine einseitige Rechnung mit Takumi 30 ms, mit Forme 35 ms und mit Chrome über Puppeteer 91 ms. Bei 120 Positionen waren es 174 ms mit Takumi, 84 ms mit Forme und 131 ms mit Chrome.

Läuft pdfcn in Cloudflare Workers oder auf Vercel?

Ja. Takumi läuft in Node, Bun, im Browser und in Cloudflare Workers, pdfcn.dev selbst rendert seine Vorschauen in einer Next.js-Route. Forme läuft laut eigener Dokumentation ebenfalls in Workers, bei tabellenlastigen Dokumenten aber nur bis etwa 50 Seiten.

Sind die PDFs aus pdfcn barrierefrei?

Nur teilweise. Takumi schreibt standardmäßig eine Struktur für Screenreader ins PDF, bei meiner Rechnung waren das aber nur Absätze ohne Überschriften und ohne Tabellen-Struktur, weil pdfcn Tabellen aus Flexbox-Zeilen baut. Für geprüfte Barrierefreiheit nach PDF/UA musst du die Vorlagen umbauen und das Ergebnis mit einem Prüfwerkzeug testen.

Fazit

pdfcn hält, was die Startseite verspricht: schöne PDFs, schnell gemacht, ohne Chrome auf dem Server. Für React-Projekte ist es der kürzeste Weg von null zur ersten Rechnung, und dank der Engines Takumi und Forme ist es auf kleinen Servern und in Edge-Funktionen einsetzbar, wo Puppeteer scheitert. Mein Test zeigt aber auch, dass „Beautiful PDFs, made simple“ vor allem für Amerika und für eine Seite gilt. Für deutsche Belege, lange Dokumente und E-Rechnungen ist pdfcn ein hervorragender Startpunkt, das letzte Stück Arbeit bleibt bei dir.

Stand: 30.09.2026. Ich wiederhole den Test, wenn pdfcn Vorlagen für Angebot und Quittung bringt, eine dritte Engine dazukommt oder die Vorlagen mehrsprachig werden.