Edit
React-pdf
React renderer for creating PDF files on the browser and server.
v3
Quick start guide
Compatibility
Rendering process
Components Try it out!
SVG Images
Hooks
Styling
Fonts
Node API 1. Install React and react-pdf
Advanced
Starting with react-pdf is extremely simple.
Playground / REPL
Donate
Using npm
npm install @react-pdf/renderer --save
Using Yarn
yarn add @react-pdf/renderer
Using pnpm
pnpm add @react-pdf/renderer
Using Bun
bun add @react-pdf/renderer
Since a renderer simply implements how elements render into something, you still need to have React to
make it work (and react-dom for client-side document generation). You can find instructions on how to
do that here.
2. Create your PDF document
This is where things start getting interesting. React-pdf exports a set of React primitives that enable you
to render things into your document very easily. It also has an API for styling them, using CSS properties
and Flexbox layout.
Let's make the code speak for itself:
import React from 'react';
import { Page, Text, View, Document, 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>
);
This will produce a PDF document with a single page. Inside, two different blocks, each of them rendering
a different text. These are not the only valid primitives you can use. Please refer to the Components or
Examples sections for more information.
3. Choose where to render the document
React-pdf enables you to render the document in two different environments: web and server. The
process is essentially the same, but catered to needs of each environment.
Save in a file
import ReactPDF from '@react-pdf/renderer';
ReactPDF.render(<MyDocument />, `${__dirname}/example.pdf`);
Render to a stream
v3 import ReactPDF from '@react-pdf/renderer';
ReactPDF.renderToStream(<MyDocument />);
Quick start guide
Compatibility
Rendering process Render in DOM
Components
SVG Images import React from 'react';
import ReactDOM from 'react-dom';
Hooks import { PDFViewer } from '@react-pdf/renderer';
Styling
const App = () => (
Fonts <PDFViewer>
Node API <MyDocument />
</PDFViewer>
Advanced );
Playground / REPL
ReactDOM.render(<App />, document.getElementById('root'));
Donate
4. Have fun!
Maybe the most important step — make use of all react-pdf capabilities to create beautiful and awesome
documents!
Compatibility →
