---
title: "React to PDF: Generate PDFs from React components"
canonical_url: "https://www.nutrient.io/blog/create-pdfs-with-react/"
md_url: "https://www.nutrient.io/blog/create-pdfs-with-react.md"
last_updated: "2026-06-08T09:14:14.173Z"
description: "Learn how to generate PDFs from React components using @react-pdf/renderer. Includes Flexbox layout, images, links, and when to use Nutrient’s SDK for production apps."
---

Most modern apps need a way to generate PDF files from data — invoices, sales contracts, certificates — and React is a good fit for assembling them programmatically.

This article walks through [`react-pdf`](https://react-pdf.org/) by [Diego Muracciole](https://github.com/diegomura/), a React renderer that produces PDFs from a declarative component API.

## Getting started with react-pdf

`react-pdf` works in the browser, on the server, or on mobile devices, just like your existing React (or React Native) application does. To keep things simple for this article, we’ll use [CodeSandbox](https://codesandbox.io/) to run a simple React application directly in the browser.

By default, `react-pdf` comes with a simple PDF viewer that uses an [`<iframe>` to render the document](https://www.nutrient.io/blog/open-pdf-in-your-web-app/) in the browser. However, the CodeSandbox examples use our [JavaScript PDF library](https://www.nutrient.io/guides/web.md) to view the PDFs.

To get started with `react-pdf`, first add it as a dependency to your JavaScript application:

```txt

yarn add @react-pdf/renderer

```

```txt

npm install @react-pdf/renderer

```

To create a PDF, you have to use the basic components exposed by `react-pdf`, which are used as primitives (like DOM elements in React DOM and `<View>` in React Native). These can be composed into [custom components](https://reactjs.org/docs/components-and-props.html/) as well. The following components are the most important ones:

- [`<Document>`](https://react-pdf.org/components#document/) is the root of a PDF file.

- [`<Page>`](https://react-pdf.org/components#page) describes an individual page. It must have a dimension (you’re using A4 in this example).

- [`<View>`](https://react-pdf.org/components#view) is a general-purpose container used for styling and formatting. You can use [`StyleSheet.create()`](https://react-pdf.org/styling) similar to how this API is used in React Native to style your views with the full power of Flexbox for laying out PDFs.

- [`<Text>`](https://react-pdf.org/components#text) is used to display text.

Now you’ll create your first PDF. Start with a simple two-column layout using Flexbox. To do this, use a page view and set its `flexDirection` to `row` so that items are aligned in a row. Then, insert a section view with `flexGrow: 1` to tell the layout engine that the items should expand to the biggest possible width. If you have two items, they’ll now be evenly distributed:

```jsx

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

const styles = StyleSheet.create({
	page: {
		flexDirection: 'row',
	},
	section: {
		flexGrow: 1,
	},
});

const MyDocument = (
	<Document>
		<Page size="A4" style={styles.page}>
			<View style={styles.section}>
				<Text>Hello World!</Text>
			</View>
			<View style={styles.section}>
				<Text>We're inside a PDF!</Text>
			</View>
		</Page>
	</Document>
);

```

That’s already enough to create the PDF! To render it, you can use the [`<PDFViewer>`](https://react-pdf.org/components#pdfviewer) React DOM component that ships with `react-pdf`. It uses an [`<iframe>` to render the document](https://www.nutrient.io/blog/open-pdf-in-your-web-app/) in the browser:

```jsx

import { createRoot } from 'react-dom/client';

createRoot(document.getElementById('root')).render(
	<PDFViewer>{MyDocument}</PDFViewer>,
);

```

For a more advanced viewer than the bundled `<iframe>`, see the [Nutrient Web SDK for React](https://www.nutrient.io/guides/web.md) example.

## react-pdf’s rendering process

Before a PDF is generated, `react-pdf` goes through several steps to lay out the pages and encode them as a valid PDF. The official website features a wonderful graphic (shown below) that explains the [rendering pipeline](https://react-pdf.org/rendering-process).![Internal structures creation — PDF document creation & metadata — Fetching assets — Wrapping pages — Rendering — Finish document](@/assets/images/blog/2019/create-pdfs-with-react/pipeline.png)

The most interesting aspect of this pipeline is that some of the work — the creation of internal structures and PDF documents — can already be started before all assets (fonts, images) are loaded via the network. This will speed up the rendering process.

Now you’ll try some more powerful features. More specifically, you’ll add images and links to your PDF document.

## Adding images and links

In addition to the components you used before, you’ll now take a look at two more:

- [`<Image>`](https://react-pdf.org/components#image), which is used to place images inside the PDF file.

- [`<Link>`](https://react-pdf.org/components#link), which is used to create hyperlink annotations.

For this example, you want to create a two-row layout, where the first row will show the Nutrient logo centered, and the second row will show a small paragraph of text, followed by a link to the website.

Start by changing the `flexDirection` of the page view to `column` instead of `row`, and create a new `centerImage` view that uses `alignItems: "center"` to center the logo. After that, use an `<Image>` element to load a PNG image directly into the PDF:

```jsx

const styles = StyleSheet.create({
	page: {
		flexDirection: 'column',
	},
	image: {
		width: '50%',
		padding: 10,
	},
	centerImage: {
		alignItems: 'center',
		flexGrow: 1,
	},
});

const MyDocument = (
	<Document>
		<Page style={styles.page} size="A4">
			<View style={styles.centerImage}>
				<Image style={styles.image} src="/nutrient-logo.png" />
			</View>
		</Page>
	</Document>
);

```

The `flexGrow` property on the `centerImage` view will make sure the image view uses all the available height and pushes the text elements that you’re adding next to the bottom. To add links, use the `<Link>` element inside text elements. This looks similar to an HTML anchor tag, but it’ll create proper [link annotations](https://www.nutrient.io/guides/web/annotations/link-annotations.md) inside the PDF:

```jsx

const styles = StyleSheet.create({
	text: {
		width: '100%',
		backgroundColor: '#f0f0f0',

		color: '#212121',

	},
});

const MyDocument = (
	<Document>
		<Page style={styles.page} size="A4">
			<Text style={styles.text}>Some text...</Text>
			<Text style={styles.text}>Some more text...</Text>
			<Text style={styles.text}>
				Learn more at{' '}
				<Link src="https://www.nutrient.io/">nutrient.io</Link>
			</Text>
		</Page>
	</Document>
);

```

Adding links and images to a PDF works the same way as adding them to any React tree.

## Conclusion

[`react-pdf`](https://react-pdf.org/) generates PDFs from React in the browser, on a Node.js server, or in React Native — the examples above port across all three with minimal changes.

`react-pdf` uses an [`<iframe>`](https://www.nutrient.io/blog/open-pdf-in-your-web-app/) to show the PDF using the browser’s default PDF viewer. If you need consistent cross-browser behavior and richer features like [PDF annotations](https://www.nutrient.io/guides/web/annotations.md), [view and scroll settings](https://www.nutrient.io/guides/web/customizing-the-interface/document-presentation-options.md), and [UI customization](https://www.nutrient.io/guides/web/customizing-the-interface/css-customization.md), it’s worth pairing `react-pdf` (for generation) with a dedicated viewer (for display).

## Use Nutrient Web SDK in your React app

[Nutrient Web SDK](https://www.nutrient.io/guides/web.md) is the production-ready option for rendering and editing the PDFs you generate. Install the package and import it into any React component:

```bash

npm install @nutrient-sdk/viewer

```

```jsx

import { useEffect, useRef } from 'react';
import NutrientViewer from '@nutrient-sdk/viewer';

export default function PdfViewer({ document }) {
	const container = useRef(null);

	useEffect(() => {
		const { current } = container;
		NutrientViewer.load({ container: current, document });
		return () => NutrientViewer.unload(current);
	}, [document]);

	return <div ref={container} style={{ height: '100vh' }} />;
}

```

The SDK ships with annotations, form filling, signatures, redaction, and AI Assistant — see the [open a PDF in React on the web with react-pdf](https://www.nutrient.io/blog/open-pdf-in-react/) and [how to add PDF support to your web app in no time](https://www.nutrient.io/blog/integrate-pspdfkit-web/) walkthroughs for end-to-end examples. Start with a [free trial](https://www.nutrient.io/try) or browse the [demos](https://www.nutrient.io/guides/web/demo.md).

## FAQ

#### What is react-pdf?

`react-pdf` is a library that allows you to generate PDF documents using React components, making it possible to create PDFs in the browser, on the server, or on mobile devices.

#### How do I install react-pdf?

You can install `react-pdf` using either Yarn or npm with the commands `yarn add @react-pdf/renderer` or `npm install @react-pdf/renderer`.

#### What are the basic components of react-pdf?

The basic components include `Document`, `Page`, `View`, and `Text`, which serve as the building blocks for creating PDFs.

#### How can I add images and links in react-pdf?

You can use the `Image` component to add images and the `Link` component to create hyperlinks within your PDF documents.

#### Is there an advanced PDF viewer recommended for use with react-pdf?

For more advanced features, you can integrate [Nutrient Web SDK](https://www.nutrient.io/guides/web.md), which offers enhanced PDF viewing and customization capabilities.
---

## 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)
- [Ai Document Automation Extraction To Action](/blog/ai-document-automation-extraction-to-action.md)
- [Advanced Techniques For React Native Ui Components](/blog/advanced-techniques-for-react-native-ui-components.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)
- [Convert One Drive Files To Pdf In Sharepoint](/blog/convert-one-drive-files-to-pdf-in-sharepoint.md)
- [Complete Guide To Pdfjs](/blog/complete-guide-to-pdfjs.md)
- [The CTO’s AI playbook: Why accountability architecture beats orchestration](/blog/cto-ai-playbook-accountability-architecture.md)
- [Digital Signatures](/blog/digital-signatures.md)
- [Document Viewer](/blog/document-viewer.md)
- [Document Ai Vs Ocr](/blog/document-ai-vs-ocr.md)
- [Emerging threats: Your logging system may be an agentic threat vector](/blog/emerging-threats-your-logging-system.md)
- [How To Build A React Powerpoint Viewer](/blog/how-to-build-a-react-powerpoint-viewer.md)
- [or](/blog/how-to-build-a-nextjs-pdf-viewer.md)
- [or](/blog/how-to-build-a-javascript-pdf-viewer-with-pdfjs.md)
- [or](/blog/how-to-convert-html-to-pdf-using-react.md)
- [How To Build A Reactjs Viewer With Pdfjs](/blog/how-to-build-a-reactjs-viewer-with-pdfjs.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-wkhtmltopdf-and-python.md)
- [How To Convert Word To Pdf In Nodejs](/blog/how-to-convert-word-to-pdf-in-nodejs.md)
- [How To Create Pdfs With React To Pdf](/blog/how-to-create-pdfs-with-react-to-pdf.md)
- [or](/blog/how-to-build-a-reactjs-pdf-viewer-with-react-pdf.md)
- [How To Generate Pdf From Html With Nodejs](/blog/how-to-generate-pdf-from-html-with-nodejs.md)
- [How To Embed A Pdf Viewer In Your Website](/blog/how-to-embed-a-pdf-viewer-in-your-website.md)
- [base_url tells WeasyPrint where to resolve relative asset paths](/blog/how-to-generate-pdf-reports-from-html-in-python.md)
- [Html In Pdf Format](/blog/html-in-pdf-format.md)
- [Linearized Pdf](/blog/linearized-pdf.md)
- [Nutrient Vs Conga Composer](/blog/nutrient-vs-conga-composer.md)
- [Pdf Page Labels](/blog/pdf-page-labels.md)
- [Open Pdf In Your Web App](/blog/open-pdf-in-your-web-app.md)
- [Online Document Viewer](/blog/online-document-viewer.md)
- [Pdfjs Coordinate Systems Pdf To Screen](/blog/pdfjs-coordinate-systems-pdf-to-screen.md)
- [Pdf Ua Compliance Guide](/blog/pdf-ua-compliance-guide.md)
- [Pdf Sdk Compliance Security Checklist](/blog/pdf-sdk-compliance-security-checklist.md)
- [Pdfjs React Viewer Setup](/blog/pdfjs-react-viewer-setup.md)
- [Pdf Sdk Performance Benchmark](/blog/pdf-sdk-performance-benchmark.md)
- [Pdfjs Limitations Commercial Upgrade](/blog/pdfjs-limitations-commercial-upgrade.md)
- [Pdfjs Eventbus Guide](/blog/pdfjs-eventbus-guide.md)
- [Pdfjs Text Search Pdffindcontroller](/blog/pdfjs-text-search-pdffindcontroller.md)
- [Pdfjs Navigation Zoom Rotation](/blog/pdfjs-navigation-zoom-rotation.md)
- [Pdfjs Rendering Overlays React Portals](/blog/pdfjs-rendering-overlays-react-portals.md)
- [Process Flows](/blog/process-flows.md)
- [or](/blog/sample-blog-updated.md)
- [Convert an HTML file to PDF.](/blog/top-ten-ways-to-convert-html-to-pdf.md)
- [Web Sdk Is Now Headless](/blog/web-sdk-is-now-headless.md)
- [Wcag2 Accessibility Requirements Documents](/blog/wcag2-accessibility-requirements-documents.md)
- [Vector Pdf](/blog/vector-pdf.md)
- [What Are Annotations](/blog/what-are-annotations.md)
- [Why Your Ai Agent Hallucinates Pdf Table Data](/blog/why-your-ai-agent-hallucinates-pdf-table-data.md)
- [What Is A Vpat](/blog/what-is-a-vpat.md)
- [Why Pdfium Is A Trusted Platform For Pdf Rendering](/blog/why-pdfium-is-a-trusted-platform-for-pdf-rendering.md)
- [What Is Pdf Ua](/blog/what-is-pdf-ua.md)