# @react-pdf/renderer

> Create PDF files on the browser and server

Latest version **4.9.0** (published 2026-08-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install @react-pdf/renderer
pnpm add @react-pdf/renderer
yarn add @react-pdf/renderer
bun add @react-pdf/renderer
```

## Health

**Score 75/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 4.9.0 |
| Published | 2026-08-27 |
| First published | 2018-08-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 13 |
| Unpacked size | 312.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| Author | Diego Muracciole |
| Maintainers | diegomura |

## Links

- npm: https://www.npmjs.com/package/@react-pdf/renderer
- Repository: https://github.com/diegomura/react-pdf
- Homepage: https://github.com/diegomura/react-pdf#readme
- Issues: https://github.com/diegomura/react-pdf/issues
- npm.io page: https://npm.io/package/@react-pdf/renderer

## Dependencies (13)

- [queue](https://npm.io/package/queue.md) ^6.0.1
- [events](https://npm.io/package/events.md) ^3.3.0
- [pdfkit](https://npm.io/package/pdfkit.md) 0.20.1
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.2
- [object-assign](https://npm.io/package/object-assign.md) ^4.1.1
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.20.13
- [@react-pdf/fns](https://npm.io/package/@react-pdf/fns.md) 3.1.3
- [@react-pdf/font](https://npm.io/package/@react-pdf/font.md) ^4.1.2
- [@react-pdf/types](https://npm.io/package/@react-pdf/types.md) ^2.14.0
- [@react-pdf/layout](https://npm.io/package/@react-pdf/layout.md) ^5.2.0
- [@react-pdf/render](https://npm.io/package/@react-pdf/render.md) ^4.7.0
- [@react-pdf/primitives](https://npm.io/package/@react-pdf/primitives.md) ^4.4.0
- [@react-pdf/reconciler](https://npm.io/package/@react-pdf/reconciler.md) ^2.0.0

## Recent versions

- 4.9.0 (latest) — 2026-08-27
- 4.8.1 — 2026-08-24
- 4.8.0 — 2026-08-23
- 4.7.0 — 2026-08-23
- 4.6.1 — 2026-08-14
- 4.6.0 — 2026-08-08
- 4.5.1 — 2026-04-15
- 4.5.0 — 2026-04-15
- 4.4.1 — 2026-04-10
- 4.4.0 — 2026-04-06
- 4.3.3 — 2026-04-04
- 4.3.2 — 2025-12-29
- 4.3.1 — 2025-09-23
- 4.3.0 — 2025-03-05
- 4.2.4 — 2025-03-03
- … 155 more at https://npm.io/package/@react-pdf/renderer/versions

## README

<p align="center">
  <img src="https://user-images.githubusercontent.com/5600341/27505816-c8bc37aa-587f-11e7-9a86-08a2d081a8b9.png" height="280px">
  <p align="center">React renderer for creating PDF files on the browser and server<p>
  <p align="center">
    <a href="https://www.npmjs.com/package/@react-pdf/renderer">
      <img src="https://img.shields.io/npm/v/@react-pdf/renderer?style=flat&colorA=000000&colorB=000000" />
    </a>
     <a href="https://opencollective.com/react-pdf">
      <img src="https://img.shields.io/opencollective/all/react-pdf?style=flat&colorA=000000&colorB=000000" />
    </a>
    <a href="https://github.com/diegomura/react-pdf/blob/master/LICENSE">
      <img src="https://img.shields.io/github/license/diegomura/react-pdf?style=flat&colorA=000000&colorB=000000" />
    </a>
    <a href="https://blockchain.com/btc/address/bc1qj223udztpmt5dck46dw0yap08yum63ht56h90v">
      <img src="https://img.shields.io/badge/BTC-f5f5f5?style=flat&colorA=000000&colorB=000000" />
    </a>
     <a href="https://blockchain.com/eth/address/0x4e1DB76bA0858BbCAa4DD804418D0D9EcF77B1cC">
      <img src="https://img.shields.io/badge/ETH-f5f5f5?style=flat&colorA=000000&colorB=000000" />
    </a>
  </p>
</p>

## How to install

```sh
yarn add @react-pdf/renderer
```

## How it works

```jsx
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>
);
```

### `Web.` Render in DOM

```jsx
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'));
```

### `Node.` Save in a file

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

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

## Contributors

This project exists thanks to all the people who contribute. Looking to contribute? Please check our [[contribute]](https://github.com/diegomura/react-pdf/blob/master/.github/CONTRIBUTING.md) document for more details about how to setup a development environment and submitting code.

<a href="https://github.com/diegomura/react-pdf/blob/master/.github/CONTRIBUTING.md"><img src="https://opencollective.com/react-pdf/contributors.svg?width=890" /></a>

## Sponsors

Thank you to all our sponsors! [[Become a sponsors](https://opencollective.com/react-pdf#sponsors)]

<a href="https://opencollective.com/react-pdf#sponsors" target="_blank"><img src="https://opencollective.com/react-pdf/sponsors.svg?width=890"></a>

## Backers

Thank you to all our backers! [[Become a backer](https://opencollective.com/react-pdf#backer)]

<a href="https://opencollective.com/react-pdf#backers" target="_blank"><img src="https://opencollective.com/react-pdf/backers.svg?width=890"></a>

## License

MIT © [Diego Muracciole](http://github.com/diegomura)

---

[![](https://img.shields.io/npm/dt/@react-pdf/renderer.svg?style=flat)](https://www.npmjs.com/package/@react-pdf/renderer)

---
_Source: https://npm.io/package/@react-pdf/renderer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._