Can react-pdf Run in Both the Browser and on the Server?

Updated

Yes. react-pdf is a React renderer for creating PDF files, and the same document can render in Node or directly in the client. According to the project's own description, it renders "to a file, a stream or a blob — in Node or straight in the client." That means you can write one document component and produce PDFs on either side, choosing the output form that fits where the code runs.

What "browser and server" actually means

The key point is that react-pdf is not split into two separate libraries with different APIs. It is a renderer: you describe a document with React components, and the renderer turns that description into PDF output. The environment (Node vs. browser) determines which output forms are practical, not how you write the document.

Environment Typical output Where the work happens
Server (Node) File or stream On your server, often in a request handler or background job
Browser (client) Blob (and downloads) In the user's browser, no server round trip required

The source material lists file, stream, and blob as the output forms and states the same document renders to them in Node or in the client. It does not document per-environment API differences, so treat the component code as shared and the output handling as the part that changes.

Why this matters for choosing react-pdf

If you need PDF generation in only one place, the dual-environment support is a convenience. If you need it in both, it removes a common source of duplication: you avoid maintaining one document definition for the server and a different one for the client.

Concrete cases where both sides are useful:

  • Server-side for consistency and control. Generate invoices, reports, or receipts in a Node service so every user gets the same output and the logic stays off the client.
  • Client-side for immediacy and privacy. Produce a PDF in the browser when the user should get it instantly, or when the data should not leave the device.
  • Both, for the same document. Preview or export in the browser, then regenerate the identical document on the server for archival or emailing.

The "same document" claim is the part worth verifying in your own setup: shared components are the promise, but fonts, images, and data sources still need to be available in whichever environment renders.

What the renderer supports beyond plain text

The project highlights three capability areas, and they apply regardless of environment:

  • Layout you already know. Yoga brings flexbox to the page, including rows, columns, wrapping, and absolute positioning. If you have written flexbox in React for the web, the mental model carries over.
  • Beyond text. Custom fonts, images, SVG, form fields, hyphenation, and page-break control.
  • Output flexibility. File, stream, or blob, as noted above.

For a deeper look at layout behavior, see the related question on how layout works in react-pdf; for the full list of renderable content, see what react-pdf can render beyond text.

Getting started

The documented install command is:

npm install @react-pdf/renderer

From there, the project points to two entry points: a getting-started path and an interactive playground. The playground is the faster way to confirm that a document renders the way you expect before wiring it into a server route or a client component.

A practical sequence:

  1. Install @react-pdf/renderer.
  2. Build a minimal document component and render it in the playground to check layout and fonts.
  3. Move that same component into your target environment.
  4. Choose the output form for that environment — stream or file on the server, blob in the browser.

Common sticking points

  • Fonts and images must resolve where you render. A font or image path that works in the browser may not resolve in Node, and vice versa. Confirm assets are reachable in each environment you target.
  • Output handling differs even when the document does not. Writing a stream to a response and triggering a blob download are different tasks; plan for both if you support both environments.
  • Don't assume pricing or hosting details. The source material describes the renderer and its capabilities; it does not state pricing, so check the project's own pages if cost matters to your decision.

The short version: react-pdf is designed so the same React document can render on the server or in the browser, with file, stream, and blob as output options. If your requirement is "generate this PDF in more than one place without rewriting it," that is exactly the case it targets.