What is react-pdf?

Updated

react-pdf is a React renderer for creating PDF files, and it works both in the browser and on the server. You describe a document with React components, and the same document can be rendered to a file, a stream, or a blob — in Node or directly in the client. It fits projects that already use React and want PDF generation to live in the same component model as the rest of the app.

How it works

The core idea is that a PDF document is just another React tree. You compose primitives like Document, Page, and View instead of writing imperative drawing calls, and react-pdf translates that tree into PDF output.

The same document definition is portable across environments:

  • Server (Node): render to a file or a stream, useful for generating invoices, reports, or exports in a backend job.
  • Browser (client): render to a blob, useful for letting a user download a PDF without a round trip to the server.

Because the document is described once, you avoid maintaining separate code paths for server-side and client-side generation.

Layout you already know

react-pdf uses Yoga to bring flexbox to the page. If you have written CSS flexbox, the mental model carries over:

  • rows and columns
  • wrapping
  • absolute positioning

This matters because PDF layout is normally a different discipline from web layout. Here, the layout vocabulary is the one React developers already use, which shortens the gap between "I know how to build this screen" and "I know how to build this page."

Beyond text

A PDF renderer is only useful if it handles more than paragraphs. react-pdf supports:

  • custom fonts
  • images
  • SVG
  • form fields
  • hyphenation
  • page-break control

Page-break control and hyphenation are worth calling out, because they are the details that separate a usable generated document from one that looks machine-made. Form fields matter if the output needs to be filled in after generation.

Getting started

Install the renderer:

npm install @react-pdf/renderer

From there, the documented paths are the docs and the playground. The playground is the faster way to confirm whether the layout model matches what you need before committing to it in a project.

When react-pdf is a good fit

Choose it when:

  • your project is already React-based and you want one component model for UI and PDF
  • you need the same document to render on the server and in the browser
  • you need flexbox-style layout rather than manual coordinate placement
  • you need fonts, images, SVG, form fields, hyphenation, or page-break control

Look elsewhere when you need to manipulate or extract content from existing PDFs — react-pdf is a renderer for creating PDF files, not a general PDF editing toolkit.