---
title: "How to generate PDFs in React with React to PDF"
canonical_url: "https://www.nutrient.io/blog/how-to-create-pdfs-with-react-to-pdf/"
md_url: "https://www.nutrient.io/blog/how-to-create-pdfs-with-react-to-pdf.md"
last_updated: "2026-07-31T07:32:34.926Z"
description: "Learn how to convert JSX to PDF and generate a React PDF from components using the React to PDF library. This tutorial shows how to create PDFs in React with Vite and export receipts and reports as downloadable files."
---

**TL;DR**

Learn how to create a React PDF using the [React to PDF](https://github.com/ivmarcos/react-to-pdf) library and [Vite](https://vite.dev/). This tutorial shows how to generate PDFs in React by converting components into downloadable files on the client side. While great for simple React PDF use cases like invoices and reports, React to PDF has limitations in styling and text quality. For production-ready React PDF generation with templating and form support, check out [Nutrient Web SDK](https://www.nutrient.io/sdk/web/).

## What is a JSX file?

A JSX file contains [JSX (JavaScript XML)](https://react.dev/learn/writing-markup-with-jsx), which is the HTML-like syntax React uses to describe a user interface (UI) inside JavaScript. These files usually carry the `.jsx` extension (or `.tsx` in TypeScript projects). Because JSX isn’t valid JavaScript on its own, a build tool like Vite or Babel compiles it into plain JavaScript the browser can run.

### How to open a JSX file

A `.jsx` file is plain text, so you can open and edit it in any code editor — [VS Code](https://code.visualstudio.com/), WebStorm, or even a basic text editor. To see what it actually renders, run it inside a React project (as you will below). And to turn that rendered output into a shareable document, you can convert the JSX to PDF — which is exactly what the rest of this tutorial covers.

## What is React to PDF?

React to PDF is an open source library that lets you create a React PDF by converting JSX-based content into a downloadable file directly in the browser. It uses the [html2canvas](https://html2canvas.hertzen.com/) and [jspdf](https://artskydj.github.io/jsPDF/docs/jsPDF.html) libraries under the hood to take a screenshot of the target element and embed it into a PDF file.

The main benefit? You can add React PDF generation to your app with minimal setup and no server-side rendering.

## Why use React to PDF for React PDF generation?

There are several use cases where generating a React PDF directly from a webpage can be very useful:

- **Invoices or receipts** — You can export invoice data filled out by a user in a web form into a downloadable PDF file.

- **Reports and dashboards** — Users may want to save dynamically generated data (like charts, graphs, or reports) as a PDF.

- **Certificates** — If your application generates certificates, React to PDF allows you to provide users with downloadable PDFs based on their interactions.

However, a key point to remember is that React to PDF generates PDFs using screenshots of your components, which means the PDFs aren’t [vector-based](https://www.nutrient.io/blog/vector-pdf.md). As a result, the text may blur upon zooming in, and the captured area may not include the entire webpage, depending on scroll position.

## Setting up the project with Vite

Start by creating a React project using Vite.

### Step 1 — Installing Vite and creating a new project

To create a new React project using Vite, run the following commands in your terminal:

```bash

npm create vite@latest my-pdf-app -- --template react-ts
cd my-pdf-app
npm install

```

This sets up a project with React, TypeScript, JSX support (`.tsx`), and the modern Vite bundler.

### Step 2 — Installing React to PDF

Next, install the React to PDF library to enable PDF generation functionality:

```bash

npm install react-to-pdf

```

### Step 3 — Creating the PDF generator component

Create a simple component that lets users download content as a PDF:

```jsx

// App.tsx
import { usePDF } from "react-to-pdf";

const App = () => {
  const { toPDF, targetRef } = usePDF({
    filename: "simple-receipt.pdf",
  });

  return (
    <div className="App">
      {/* Button to trigger the PDF generation. */}
      <button onClick={() => toPDF()}>Download PDF</button>

      {/* The content to be exported into the PDF. */}
      <div
        ref={targetRef}
        style={{
          padding: "20px",
          border: "1px solid black",
          marginTop: "20px",
        }}
      >
        <h2>Receipt</h2>
        <p><strong>Date:</strong> October 16, 2024</p>
        <p><strong>Total:</strong> $120.00</p>
        <p>Thank you for shopping with us!</p>
      </div>
    </div>
  );
};

export default App;

```

The code uses the `usePDF` hook from `react-to-pdf` to generate a PDF from a specific section of a React component. Clicking the **Download PDF** button triggers the `toPDF()` function, exporting the content inside the referenced `div` as a PDF.

Make sure `src/main.tsx` looks like this:

```tsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App.tsx";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

```

### Step 4 — Running the app with Vite

Run the development server:

```bash

npm run dev

```

This will start a local development server and open the app in your browser. You’ll see a **Download PDF** button. When clicked, a PDF file named `simple-receipt.pdf` will be generated with the content of the receipt.

## Customizing the PDF content

You can easily customize the content inside the `div` to include any type of information you want in your PDF. The React to PDF library works well with both simple and complex JSX content, so you can create invoices, reports, or even design-rich PDFs with images and styles.

Here’s an example of a customized receipt:

```jsx

<div
  ref={targetRef}
  style={{
    padding: "20px",
    border: "1px solid black",
    marginTop: "20px",
  }}

>

  <h2>Receipt</h2>
  <p>Company: My Awesome Company</p>
  <p>Address: 123 Main Street, Springfield</p>
  <p>Date: October 16, 2024</p>
  <h3>Items:</h3>
  <ul>
    <li>Item 1 - $50.00</li>
    <li>Item 2 - $30.00</li>
    <li>Item 3 - $40.00</li>
  </ul>
  <p>Total: $120.00</p>
  <p>Thank you for shopping with us!</p>
</div>

```![React PDF demo showing the receipt component](@/assets/images/blog/2022/how-to-create-pdfs-with-react-to-pdf/demo.png)![Generated React PDF output file](@/assets/images/blog/2022/how-to-create-pdfs-with-react-to-pdf/result.png)

## Known limitations of React PDF generation with React to PDF

While React to PDF is a great tool for client-side React PDF generation, there are a few limitations to be aware of:

1. **Text quality** — Since the PDF is created using a screenshot, the text may not be as sharp as vector-based PDFs. Zooming in on the PDF may result in blurry text.

2. **Page size** — React to PDF captures the visible part of the component. If the component content exceeds the viewport height, it might get clipped.

3. **CSS styling** — Some CSS styles, particularly those involving complex layout and animations, may not be well-supported in the generated PDF.

## React PDF libraries compared

There are three main approaches to generating PDFs in React, ranging from free, open source libraries to a commercial SDK. The right choice depends on whether you need quick client-side exports, vector-quality output, or a headless, production-grade pipeline:

| Feature                 | react-to-pdf                   | @react-pdf/renderer                      | Nutrient Web SDK                  |
| ----------------------- | ------------------------------ | ---------------------------------------- | --------------------------------- |
| **Output type**         | Screenshot-based (raster)      | Vector-based                             | Vector-based                      |
| **Text quality**        | Blurs on zoom                  | Sharp at any zoom                        | Sharp at any zoom                 |
| **Syntax**              | Wrap existing JSX              | Custom components (Document, Page, View) | Template-based or programmatic    |
| **Server-side support** | No                             | Yes                                      | Yes                               |
| **Form fields**         | No                             | No                                       | Yes                               |
| **Digital signatures**  | No                             | No                                       | Yes                               |
| **Annotations**         | No                             | No                                       | Yes                               |
| **Setup complexity**    | Low                            | Medium                                   | Medium                            |
| **Best for**            | Quick exports, simple receipts | Custom PDF layouts, reports              | Enterprise apps, forms, workflows |
| **License**             | MIT (free)                     | MIT (free)                               | Commercial                        |

**When to use each:**

- **react-to-pdf** — Quick prototypes, simple receipts, when you need to export existing UI components as-is.

- **@react-pdf/renderer** — Custom PDF layouts with React-like syntax, reports with precise formatting, when you need vector output.

- **Nutrient Web SDK** — Production apps requiring forms, signatures, annotations, or high-volume PDF generation.

## Generate React PDFs using Nutrient Web SDK (alternative to React to PDF)

While React to PDF is a handy tool for simple React PDF use cases, it may not meet the demands of more complex applications or production workflows. If you’re building a business-critical React app that needs high-quality React PDF generation, template support, or backendless automation, you’ll want to consider Nutrient Web SDK.

This commercial React PDF library lets you create rich PDF documents directly inside any React-based web app, entirely on the client side and without a server.

### Key features of Nutrient’s React PDF generation SDK

- Create PDFs from templates, images, and form data, or by merging documents

- Generate PDFs headlessly, without requiring a user interface

- Save generated documents to local disk, cloud storage, or custom endpoints

- Embed seamlessly in React, Angular, Vue, and vanilla JavaScript apps

- Supports both interactive and automated workflows

Whether you’re building an invoice system, a contract generator, or a batch document pipeline, Nutrient’s PDF generation tools are scalable and reliable for production environments.

### Helpful links

- [React PDF generation library documentation](https://www.nutrient.io/guides/web/pdf-generation.md)

- [Nutrient Web SDK PDF generation guide](https://www.nutrient.io/guides/web/pdf-generation.md)

## Conclusion

Vite and React to PDF provide a straightforward way to add PDF export functionality to your app. This setup works for receipts, reports, and other content users need to download.

For more advanced React PDF capabilities, we offer a commercial [React PDF library](https://www.nutrient.io/guides/web.md) that integrates into your web application. It comes with 30+ features that let you view, annotate, edit, and sign documents directly in your browser. Out of the box, it has a polished and flexible UI that you can extend or simplify based on your unique use case.

You can also deploy our vanilla [JavaScript PDF viewer](https://www.nutrient.io/blog/how-to-build-a-javascript-pdf-viewer.md) or use one of our many web framework deployment options like [React.js](https://www.nutrient.io/blog/how-to-build-a-reactjs-pdf-viewer.md), [Angular](https://www.nutrient.io/blog/how-to-build-an-angular-pdf-viewer/), and [Vue.js](https://www.nutrient.io/blog/how-to-build-a-vuejs-pdf-viewer.md). To see a list of all web frameworks, start your [free trial](https://www.nutrient.io/try/). Or, [launch our demo](https://www.nutrient.io/demo/hello) to see our viewer in action.

## Related posts

- [How to convert HTML to PDF in React](https://www.nutrient.io/blog/how-to-convert-html-to-pdf-using-react.md)

- [How to build a React.js PDF viewer](https://www.nutrient.io/blog/how-to-build-a-reactjs-pdf-viewer.md)

- [How to export to PDF using React](https://www.nutrient.io/blog/how-to-export-to-pdf-using-react/)

- [How to convert HTML to PDF with JavaScript](https://www.nutrient.io/blog/html-to-pdf-in-javascript/)

## FAQ

#### How do I open a JSX file?

A `.jsx` file is plain text, so you can open and edit it in any code editor like VS Code or WebStorm. To see what it renders, run it inside a React project; to share that output as a document, convert the JSX to PDF using a library like React to PDF.

#### Can I convert JSX to PDF?

Yes. JSX describes your React UI, and you can convert its rendered output to a PDF directly in the browser. The quickest way is the React to PDF library’s `usePDF` hook, which captures a referenced element and saves it as a PDF with no server required. For sharp, vector-based output — or forms and signatures — use a dedicated React PDF library like Nutrient Web SDK.

#### Is React to PDF good?

React to PDF is a good fit for quick, client-side exports like receipts, invoices, and reports, where setup speed matters more than print quality. Because it generates PDFs from screenshots, text can blur on zoom and tall content may be clipped. For vector-quality output or production features, consider `@react-pdf/renderer` or Nutrient Web SDK.

#### How do I use PDF.js with React?

PDF.js *views* existing PDFs rather than generating them, so it solves a different problem from React to PDF. To display PDFs in a React app, see our [React.js PDF viewer guide](https://www.nutrient.io/blog/how-to-build-a-reactjs-pdf-viewer.md). To generate new PDFs from React components, use React to PDF or `@react-pdf/renderer` as shown above.

#### How can I create a React PDF using React to PDF?

To create a React PDF, install the `react-to-pdf` package, use the `usePDF` hook to wrap the content you want to export, and trigger the PDF generation through a button click or event.

#### What are the advantages of using React to PDF for React PDF generation?

React to PDF is easy to integrate and allows you to convert React components into PDFs with minimal configuration, making it ideal for exporting reports, invoices, or any web content as a React PDF.

#### How do I customize the React PDF layout with React to PDF?

Customize the React PDF layout by applying CSS styles to your React components before rendering them as PDFs. Ensure the final document matches your design specifications.

#### Can React to PDF handle dynamic content for React PDF generation?

Yes. React to PDF can handle dynamic content, allowing you to generate React PDFs that include real-time data and user inputs directly from your components.

#### What are common issues when generating React PDFs with React to PDF?

Common issues include styling inconsistencies and rendering large datasets. Address these by testing different styles and optimizing data before React PDF generation. Also, note that text may be blurred when zooming in due to the non-vectorized screenshots.
---

## Related pages

- [The business case for accessibility: Five ways it drives enterprise value](/blog/5-ways-accessibility-drives-enterprise-value.md)
- [Accessibility Untangled Why It Matters Guide](/blog/accessibility-untangled-why-it-matters-guide.md)
- [Advanced Techniques For React Native Ui Components](/blog/advanced-techniques-for-react-native-ui-components.md)
- [`vector_store` holds your indexed documents (see the multimodal RAG post](/blog/agentic-rag.md)
- [Ai Document Automation Extraction To Action](/blog/ai-document-automation-extraction-to-action.md)
- [Ai Legal Assistant Document Authoring](/blog/ai-legal-assistant-document-authoring.md)
- [Angular File Viewer Pdf Image Office Files](/blog/angular-file-viewer-pdf-image-office-files.md)
- [Auto Tagging And Document Accessibility In Dotnet Sdk](/blog/auto-tagging-and-document-accessibility-in-dotnet-sdk.md)
- [Best Document Viewers](/blog/best-document-viewers.md)
- [The CEO’s AI playbook: Why decision architecture beats model selection](/blog/ceo-ai-playbook-decision-architecture.md)
- [1. Extract and chunk the PDF.](/blog/chat-with-pdf.md)
- [Complete Guide To Pdfjs](/blog/complete-guide-to-pdfjs.md)
- [Construction Document Data Extraction](/blog/construction-document-data-extraction.md)
- [Convert One Drive Files To Pdf In Sharepoint](/blog/convert-one-drive-files-to-pdf-in-sharepoint.md)
- [Create And Edit Pdfs In Flutter](/blog/create-and-edit-pdfs-in-flutter.md)
- [Create Pdfs With React](/blog/create-pdfs-with-react.md)
- [Creating A Document Scanner With Ocr In Python](/blog/creating-a-document-scanner-with-ocr-in-python.md)
- [Creating And Filling Pdf Forms Programmatically In Javascript](/blog/creating-and-filling-pdf-forms-programmatically-in-javascript.md)
- [The CTO’s AI playbook: Why accountability architecture beats orchestration](/blog/cto-ai-playbook-accountability-architecture.md)
- [Digital Signatures](/blog/digital-signatures.md)
- [Digital Workflow Automation](/blog/digital-workflow-automation.md)
- [Document Ai Vs Ocr](/blog/document-ai-vs-ocr.md)
- [Document Viewer](/blog/document-viewer.md)
- [Document Watermarking](/blog/document-watermarking.md)
- [Emerging threats: Your logging system may be an agentic threat vector](/blog/emerging-threats-your-logging-system.md)
- [app.py](/blog/extract-text-from-pdf-using-python.md)
- [Fillable Pdf](/blog/fillable-pdf.md)
- [How To Add Digital Signature To Pdf Using React](/blog/how-to-add-digital-signature-to-pdf-using-react.md)
- [How To Build A Dotnet Maui Pdf Viewer](/blog/how-to-build-a-dotnet-maui-pdf-viewer.md)
- [How To Build A Flutter Pdf Viewer](/blog/how-to-build-a-flutter-pdf-viewer.md)
- [or](/blog/how-to-build-a-javascript-pdf-viewer-with-pdfjs.md)
- [How To Build A Javascript Pdf Viewer](/blog/how-to-build-a-javascript-pdf-viewer.md)
- [or](/blog/how-to-build-a-nextjs-pdf-viewer.md)
- [How To Build A Powerpoint Viewer Using Javascript](/blog/how-to-build-a-powerpoint-viewer-using-javascript.md)
- [Using Yarn](/blog/how-to-build-a-react-excel-viewer.md)
- [How To Build A React Native Pdf Viewer](/blog/how-to-build-a-react-native-pdf-viewer.md)
- [How To Build A React Powerpoint Viewer](/blog/how-to-build-a-react-powerpoint-viewer.md)
- [How To Build A Reactjs File Viewer](/blog/how-to-build-a-reactjs-file-viewer.md)
- [or](/blog/how-to-build-a-reactjs-pdf-viewer-with-react-pdf.md)
- [or](/blog/how-to-build-a-reactjs-pdf-viewer.md)
- [How To Build A Reactjs Viewer With Pdfjs](/blog/how-to-build-a-reactjs-viewer-with-pdfjs.md)
- [How To Build A Vuejs Pdf Viewer With Pdfjs](/blog/how-to-build-a-vuejs-pdf-viewer-with-pdfjs.md)
- [How To Build A Vuejs Pdf Viewer](/blog/how-to-build-a-vuejs-pdf-viewer.md)
- [How To Build An Android Pdf Viewer](/blog/how-to-build-an-android-pdf-viewer.md)
- [How To Build An Angular Pdf Viewer With Ng2 Pdf Viewer](/blog/how-to-build-an-angular-pdf-viewer-with-ng2-pdf-viewer.md)
- [How To Build An Angular Pdf Viewer With Pdfjs](/blog/how-to-build-an-angular-pdf-viewer-with-pdfjs.md)
- [How To Convert Docx To Pdf Using Javascript](/blog/how-to-convert-docx-to-pdf-using-javascript.md)
- [How To Convert Docx To Pdf Using Python](/blog/how-to-convert-docx-to-pdf-using-python.md)
- [How To Convert Html To Pdf Using Html2pdf](/blog/how-to-convert-html-to-pdf-using-html2pdf.md)
- [or](/blog/how-to-convert-html-to-pdf-using-react.md)
- [or](/blog/how-to-convert-html-to-pdf-using-wkhtmltopdf-and-python.md)
- [How To Convert Word To Pdf In Nodejs](/blog/how-to-convert-word-to-pdf-in-nodejs.md)
- [or](/blog/how-to-create-a-react-js-signature-pad.md)
- [How To Edit Pdfs Using Ios Pdf Library](/blog/how-to-edit-pdfs-using-ios-pdf-library.md)
- [How To Embed A Pdf Viewer In Your Website](/blog/how-to-embed-a-pdf-viewer-in-your-website.md)
- [How To Extract Tables From Pdf And Images](/blog/how-to-extract-tables-from-pdf-and-images.md)
- [How To Generate Pdf From Html With Nodejs](/blog/how-to-generate-pdf-from-html-with-nodejs.md)
- [base_url tells WeasyPrint where to resolve relative asset paths](/blog/how-to-generate-pdf-reports-from-html-in-python.md)
- [Open an image.](/blog/how-to-use-tesseract-ocr-in-python.md)
- [From an HTML string.](/blog/html-in-pdf-format.md)
- [Javascript Pdf Libraries](/blog/javascript-pdf-libraries.md)
- [Linearized Pdf](/blog/linearized-pdf.md)
- [Swift Package Manager](/blog/mobile-pdf-sdk.md)
- [`elements` come from your document parser — each has a type and content.](/blog/multimodal-rag.md)
- [Nutrient Vs Conga Composer](/blog/nutrient-vs-conga-composer.md)
- [Online Document Viewer](/blog/online-document-viewer.md)
- [Open Pdf In Your Web App](/blog/open-pdf-in-your-web-app.md)
- [Building WCAG 2.2, Section 508, and PDF/UA-compliant PDFs with an SDK](/blog/pdf-accessibility.md)
- [Pdf Extraction Benchmark Opendataloader Bench](/blog/pdf-extraction-benchmark-opendataloader-bench.md)
- [Pdf Extraction Document Case Studies](/blog/pdf-extraction-document-case-studies.md)
- [Pdf Page Labels](/blog/pdf-page-labels.md)
- [Pdf Sdk Compliance Security Checklist](/blog/pdf-sdk-compliance-security-checklist.md)
- [Pdf Sdk Performance Benchmark](/blog/pdf-sdk-performance-benchmark.md)
- [Pdf Ua Compliance Guide](/blog/pdf-ua-compliance-guide.md)
- [Pdfjs Advanced Loading Streaming Workers](/blog/pdfjs-advanced-loading-streaming-workers.md)
- [Pdfjs Annotation Editor Layer](/blog/pdfjs-annotation-editor-layer.md)
- [Pdfjs Area Annotations Canvas Capture](/blog/pdfjs-area-annotations-canvas-capture.md)
- [Pdfjs Coordinate Systems Pdf To Screen](/blog/pdfjs-coordinate-systems-pdf-to-screen.md)
- [Pdfjs Document Outline Bookmarks Metadata](/blog/pdfjs-document-outline-bookmarks-metadata.md)
- [Pdfjs Eventbus Guide](/blog/pdfjs-eventbus-guide.md)
- [Pdfjs Limitations Commercial Upgrade](/blog/pdfjs-limitations-commercial-upgrade.md)
- [Pdfjs Native Annotation Layer Forms](/blog/pdfjs-native-annotation-layer-forms.md)
- [Pdfjs Navigation Zoom Rotation](/blog/pdfjs-navigation-zoom-rotation.md)
- [Pdfjs Pdf Page Manipulation Pdf Lib](/blog/pdfjs-pdf-page-manipulation-pdf-lib.md)
- [Pdfjs React Viewer Setup](/blog/pdfjs-react-viewer-setup.md)
- [Pdfjs Rendering Overlays React Portals](/blog/pdfjs-rendering-overlays-react-portals.md)
- [Pdfjs Server Side Text Extraction](/blog/pdfjs-server-side-text-extraction.md)
- [Pdfjs Sticky Note Annotations](/blog/pdfjs-sticky-note-annotations.md)
- [Pdfjs Text Highlight Annotations](/blog/pdfjs-text-highlight-annotations.md)
- [Pdfjs Text Search Pdffindcontroller](/blog/pdfjs-text-search-pdffindcontroller.md)
- [Pdfjs Thumbnail Sidebar](/blog/pdfjs-thumbnail-sidebar.md)
- [Process Flows](/blog/process-flows.md)
- [React Native Pdf Annotation](/blog/react-native-pdf-annotation.md)
- [or](/blog/sample-blog-updated.md)
- [Add DWS MCP Server to your Claude Code project.](/blog/teaching-llms-to-read-pdfs.md)
- [Open an image file.](/blog/tesseract-python-guide.md)
- [Top 5 Javascript Pdf Viewers](/blog/top-5-javascript-pdf-viewers.md)
- [Convert an HTML file to PDF.](/blog/top-ten-ways-to-convert-html-to-pdf.md)
- [Vector Pdf](/blog/vector-pdf.md)
- [Wcag2 Accessibility Requirements Documents](/blog/wcag2-accessibility-requirements-documents.md)
- [Web Sdk Is Now Headless](/blog/web-sdk-is-now-headless.md)
- [What Are Annotations](/blog/what-are-annotations.md)
- [What Is A Vpat](/blog/what-is-a-vpat.md)
- [What Is Document Processing](/blog/what-is-document-processing.md)
- [What Is Pdf Ua](/blog/what-is-pdf-ua.md)
- [Why Pdfium Is A Trusted Platform For Pdf Rendering](/blog/why-pdfium-is-a-trusted-platform-for-pdf-rendering.md)
- [Why Your Ai Agent Hallucinates Pdf Table Data](/blog/why-your-ai-agent-hallucinates-pdf-table-data.md)