node-html-pdf VS react-print-pdf

node-html-pdf: the library is simple and easy to use, one simple command and you get your PDF. However, the library is no longer maintained and we expect to have issue with complex layouts. Also, even if the HTML document include already all information about the layout, you may have to add some optionto make it work correctly as shown in the .README. So while being simple, it requires manual fintuning for each document.

For this comparison we decided to use a simple example of HTML document with some specific CSS styles (fonts, margins, etc.) and a header and footer. We used the react-print-pdf library to design the HTML document using React components. Especially, we re-used the advanced invoice with QR code template from the reac-print-pdf library. We then converted this HTML document to PDF using each of the four libraries and compared both the process required to generate the PDF and the quality of the output. We run the experiment on a MacBook Pro with Apple M1 Pro chip, 32 GB of RAM, using Node.js v20.11.0. We used chromium as the browser for Puppeteer and Playwright.

The open-source library react-print-pdf brings a set of components and wrappers we can use to build beautiful PDFs in minutes.

Hey HN, we’re the co-founders of Onedoc (https://www.onedoclabs.com/), and the original contributors to the open-source library react-print-pdf (https://github.com/OnedocLabs/react-print-pdf) which lets developers design and generate PDF documents automatically. Here’s a demo video: https://www.youtube.com/watch?v=MgfCyOyckQU&t=3s

Billions of PDFs are generated daily: invoices, contracts, receipts, reports, you name it. Developer time gets wasted producing these basic documents because there are no good-enough tools to design and generate PDFs.

We previously worked at giant firms, where documents (especially PDFs) were central to most workflows. We got asked to generate automated trade confirmations for our customer’s counterparties. We could not find any tool other than outdated libraries offering poor control over layout and the generation process. In the end, we just created our own—basically bringing web technologies to PDFs. That was the genesis of Onedoc.

PDF creation has two phases: design (specifying content and layout) and generation (producing the actual PDF file). Onedoc lets you do both simply and automatically.

Design: we have an open-source library called "react-print-pdf" (https://github.com/OnedocLabs/react-print-pdf) that allows you to design a document the same way you would design a website. It supports Tailwind CSS components, Chakra UI components, and recently also built LaTeX and Markdown components. The latter let you write text in Markdown style, and include formulas using LaTeX syntax, directly within a React component.

Generation: we have an API (https://docs.onedoclabs.com/api-reference/introduction) and Node.js SDK (https://docs.onedoclabs.com/quickstart/nodejs) that render your designs into PDFs.

The choice of renderer significantly affects the accuracy of the resulting PDF. For example, exporting a webpage into PDF will often result in a layout that differs from the original webpage. We ensure that what you designed is what you get, and therefore you have 100% control over the entire layout of your document including margin, style, etc. We can do that because we built the react-print-pdf library to match the HTML/CSS to PDF rendering tool we have.

Once you have generated your document, you can either store it on your local system or, if you want, use our platform (https://app.onedoclabs.com/) to host your document online. If you use us, you’ll also get analytics over your documents.

Our main product is an API, but you can try it on our website directly (https://www.onedoclabs.com/) using our playground without any installation or sign-up. Our pricing is usage-based: per document generated. The pricing is degressive: the more documents you generate, the less you pay per document. If you don’t want to pay for PDF generation, you can still generate as many documents as you want, but with a watermark on the margin.

It’s been fun to see what our users are building with our open-source library (components, templates, etc.) and our API. We have a website (https://react-print.onedoclabs.com/) dedicated to the open-source library where we post the templates submitted by the community. Some early power users built simple web apps (CV/Resume generator, NDA and Invoice generator). We are excited to show our product to the HN community and look forward to your feedback!

Contribute to the open-source library.

If you are still here and reading this article, you probably already know what react-print-pdf is. But just in case, is collection of high-quality, unstyled components for creating beautiful PDFs using React and TypeScript. Unlike other solutions, react-print-pdf gives you complete control over your documents, allowing you to design complex layouts with features like footnotes, headers, margins, and more. Additionally, it enables you to track and analyze specific parts of your document, and build and update charts using data from your database.

We believe documents are at the core of communication—invoices, contracts, resumes, brochures, etc. They are the primary method for exchanging information with others professionally. So, why do we continue to use decades-old technology to create them? We believe you deserve better. Document production needs to be modernized. Start today and create your next PDF the same way you build a web app. And yes, this includes automating data integration into your documents. Say hello to react-print-pdf.