html4pdf vs @react-pdf/renderer
This is the most serious of the client side options, and the comparison is about duplication rather than quality: either you maintain one design or you maintain two.
The short answer
Use react-pdf when the document is small, stable, and worth building as its own component tree. Use a renderer when the PDF should be the same thing your users already see on screen.
What @react-pdf/renderer is
@react-pdf/renderer is a React renderer that outputs PDF primitives. You compose Document, Page, View and Text components, style them with a StyleSheet that supports a subset of flexbox, and get a real PDF with selectable text and vector graphics. It runs in the browser or on a server, with no browser engine involved.
Side by side
| @react-pdf/renderer | html4pdf | |
|---|---|---|
| What you write | Its components and StyleSheet | The HTML and CSS you already have |
| Layout engine | Its own, a subset of flexbox | Chrome |
| Text quality | Real text and vectors | Real text and vectors |
| CSS support | A defined subset, no cascade, no grid | Everything Chrome supports |
| Where it runs | Browser or server, in your process | An HTTPS call |
| Reusing your UI | No, the document is built separately | Yes, render the component you already have |
| Languages | React only | Any |
| Cost | Free | From $0.033 per document |
| Bundle size | Significant if it ships to the browser | Nothing in the bundle |
Choose @react-pdf/renderer when
- The document is a fixed, long-lived layout worth building once in its own components.
- There must be no server call, for cost, privacy or offline reasons.
- You want precise control over page breaks and repeating headers in code.
- Your team is React everywhere and happy to own two trees.
Choose html4pdf when
- The PDF should look like the page your users see, and that page already exists.
- The design changes often, and keeping two implementations in step is the real cost.
- You need CSS the subset does not cover: grid, pseudo elements, complex typography.
- You do not want a PDF library in the client bundle.
See the code
The working example, in the language this decision is being made in.
@react-pdf/renderer: common questions
Does react-pdf produce real text?
Yes. Unlike the html2canvas approach, output is real text and vector graphics, so it can be selected, searched and printed properly.
Can react-pdf render my existing HTML?
No. It renders its own primitives. Existing markup and stylesheets have to be rebuilt as its components.
Does it support CSS grid?
No. Styling is a subset of flexbox with inline styles, and there is no cascade or selector system.
Can I run it on the server?
Yes, which keeps it out of your client bundle and is usually the better place for it.
Try it before you decide
New accounts get 10 free credits, no card. Send the HTML you already have and compare the output against whatever you are using now.
Other comparisons
- html4pdf vs PuppeteerRun Puppeteer yourself if PDFs are high volume and you already operate containers. Use an API if PDFs are a feature of your product and you do not want Chrome in your deployment.
- html4pdf vs wkhtmltopdfwkhtmltopdf is still fine for simple documents you already have working. For anything new, or anything using modern CSS, its archived WebKit engine is the problem you will eventually hit.
- html4pdf vs WeasyPrintIf your document is HTML and CSS with no scripts, WeasyPrint is excellent and free, and you should use it. If anything on the page is drawn by JavaScript, you need a browser.
- html4pdf vs DompdfDompdf is the right answer for a simple document on shared hosting with no extra services. It is the wrong answer for anything designed with modern CSS, because it implements CSS 2.1.
- html4pdf vs jsPDF and html2canvasjsPDF with html2canvas is free and needs no backend, and it produces a picture of your page rather than a document. If the text has to be selectable, searchable or printable at quality, it is the wrong tool.
- html4pdf vs printing from the browserIf the user is the one who wants the PDF and is sitting in front of the page, use window.print() and a print stylesheet. If your system needs the file, you need a renderer.
- html4pdf vs PlaywrightPlaywright is the better browser automation library. It is not a better PDF pipeline, because the cost was never the library: it is operating the browser. Use it if you already run it, call an API if you do not.
- html4pdf vs running Chromium in a LambdaIt works, it is free, and it is the single most fiddly part of most codebases that do it. If your function is already near the size limit or your users wait on the first request, the trade has stopped paying.
- html4pdf vs GotenbergGotenberg is the right answer if you want this capability inside your own infrastructure and have somewhere to run a container. We are the right answer if you want it without running anything.
- html4pdf vs mPDFmPDF is the best free answer in PHP for long, table-heavy documents written as documents. It is still its own engine, so a design built in a browser will not arrive intact.
- html4pdf vs ReportLabReportLab is the right tool when the document is a fixed, precise artefact and you want no dependencies. It is the wrong tool when the design changes often, because every change is a code change.
- html4pdf vs iTextIf you need deep PDF manipulation on the JVM and can accept AGPL or buy a licence, iText is the strongest tool available. If you only need HTML turned into a document, the licence question is one you can skip entirely.
- html4pdf vs QuestPDFQuestPDF is excellent for documents you are happy to describe in C#. If the document already exists as a web page, you would be rebuilding it, and that duplication is the whole cost.
- html4pdf vs PDFKitPDFKit is a good fit for simple, fixed documents generated at volume, where no browser and no network is worth writing the layout by hand. Beyond that the hand-written layout becomes the problem.