Guide · Open source

How to use react-pdf: install, build and export PDFs in React

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

react-pdf, published on npm as @react-pdf/renderer, is a React renderer for creating PDF files in the browser and on the server. You describe a document with components such as Document, Page, View and Text, then generate a PDF from it. This guide shows you how to install it, build a simple document, preview it in a browser and save it to disk from Node.js.

react-pdfdiegomura/react-pdf · ★ 16.8k · MIT Install options & downloads

Quick start

1Install the package. Run yarn add @react-pdf/renderer in your project. Node.js and yarn or another npm-compatible package manager must be available.
2Create styles. Use StyleSheet.create to define named styles for pages and sections, such as flexDirection, margin, padding and flexGrow.
3Build the document. Write a component that returns Document, containing a Page with View and Text elements.
4Preview in the browser. Render the document inside PDFViewer in a browser app to see the PDF before download.
5Save in Node.js. Call ReactPDF.render with your document element and an output path such as example.pdf.

Install @react-pdf/renderer

Add the package to your project with yarn. The README lists Node.js and yarn, or another npm-compatible package manager, as prerequisites.

Prerequisites: Node.js and yarn or another npm-compatible package manager
Package name: @react-pdf/renderer

yarn add @react-pdf/renderer

Describe a document with components

A document is a React component. Wrap your content in Document, put one or more Page elements inside it, and place View and Text elements inside the page. Styles are created with StyleSheet.create, which follows the same pattern as the React Native style API used in the example.

The README example sets the page size to A4 and uses flexDirection, margin, padding and flexGrow to lay out two sections side by side.

Document: the root container for the PDF
Page: a single page, with an optional size such as "A4"
View: a layout container, similar to a div
Text: text content

import React from 'react';
import { Document, Page, Text, View, StyleSheet } from '@react-pdf/renderer';

// Create styles
const styles = StyleSheet.create({
  page: {
    flexDirection: 'row',
    backgroundColor: '#E4E4E4',
  },
  section: {
    margin: 10,
    padding: 10,
    flexGrow: 1,
  },
});

// Create Document Component
const MyDocument = () => (
  <Document>
    <Page size="A4" style={styles.page}>
      <View style={styles.section}>
        <Text>Section #1</Text>
      </View>
      <View style={styles.section}>
        <Text>Section #2</Text>
      </View>
    </Page>
  </Document>
);

Preview the PDF in the browser

In a browser app, the PDFViewer component displays the generated document. Pass your document component as a child. The README example uses ReactDOM.render, which matches the React 17-era API it shows; if your app uses a newer React entry point, adapt the mounting code to your setup.

Import PDFViewer from @react-pdf/renderer
Render your document component inside it

import React from 'react';
import ReactDOM from 'react-dom';
import { PDFViewer } from '@react-pdf/renderer';

const App = () => (
  <PDFViewer>
    <MyDocument />
  </PDFViewer>
);

ReactDOM.render(<App />, document.getElementById('root'));

Save the PDF to a file in Node.js

On the server, the default export's render function takes a React element and an output path. The README example writes the file to example.pdf in the current module's directory.

Pass the document element, for example <MyDocument />
Pass the output path as the second argument

import React from 'react';
import ReactPDF from '@react-pdf/renderer';

ReactPDF.render(<MyDocument />, `${__dirname}/example.pdf`);

Know what the project covers and where to look next

The README is short. It explains installation, the two rendering targets and the basic component model, and it links to a contributing guide for setting up a development environment. For a full component and style reference, use the homepage at react-pdf.org.

The README also says that this package creates PDFs, and it points to a different project, wojtekmaj/react-pdf, if you only need to display an existing PDF file.

Homepage: https://react-pdf.org
Contributing guide: .github/CONTRIBUTING.md in the repository

What people use it for

Generating PDF reports from React components
Creating invoices with a reusable layout component
Saving generated PDFs to disk from a Node.js project
Previewing a PDF inside a browser app before the user downloads it

Frequently asked questions

Is react-pdf free to use?

The project is released under the MIT licence, as stated in the README and repository. The MIT licence permits use in both open-source and commercial projects, but check the LICENSE file in the repository for the full terms.

What do I need to install react-pdf?

The README lists Node.js and yarn, or another npm-compatible package manager, as prerequisites. Install the package with yarn add @react-pdf/renderer.

Can react-pdf display an existing PDF file?

No. The README says this package is for creating PDFs. To display existing PDFs, the README points to wojtekmaj/react-pdf instead.

Does react-pdf work without React?

No. It is a React renderer, so your project needs to use React to describe documents.

How does react-pdf compare to pdfmake, jsPDF and PDFKit?

The source names pdfmake, jsPDF and PDFKit as comparable projects but does not compare them in detail. Choose react-pdf if you want PDF layouts written as React components; check each project's documentation for its own approach.

Can I use react-pdf in both the browser and Node.js?

Yes. The README shows PDFViewer for displaying a PDF in the browser and ReactPDF.render for saving a file in Node.js.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Use react-pdf if you are a React developer who needs to generate PDF reports, invoices or other documents from components, in the browser or on a Node.js server. Pick a different tool if you only need to display an existing PDF, if you want a no-code editor, or if your project does not use React.

Install options & downloads