Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
@react-pdf/renderer does not natively turn an HTML string into a PDF. It builds PDF documents from React-PDF components such as Document, Page, View, and Text. If you need to start from HTML, use an adapter such as react-pdf-html to translate supported markup into that component tree, and treat the result as a limited conversion—not browser-grade HTML and CSS rendering.
Choose a rendering path
There are two practical ways to produce a PDF from content that currently exists as HTML:
- Build the PDF directly with React-PDF components. Choose this for a fixed set of content types, complex layout requirements, or when precise control over pagination and styling matters most.
- Pass the HTML through an adapter. Choose this when you already have HTML and its common structure—such as headings, paragraphs, basic lists, and images—needs to carry over.
react-pdf-htmlparses HTML and maps supported elements into React-PDF components.
The official React-PDF v4 documentation describes a component-based document renderer, not native parsing of arbitrary HTML strings. The adapter is a separate project with its own documented limitations. Before committing to it, test representative content from your application, including the hardest tables, styles, images, and page breaks.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Install the renderer and create a PDF document
Install @react-pdf/renderer and, if generating documents in the browser, the React dependencies your application needs. React is required; react-dom is needed for client-side document generation. The official quick start also documents server-side rendering, including writing a file or rendering to a stream. Follow the installation instructions for your selected renderer version at React-PDF’s documentation, and use the package manager and lockfile conventions already established in your project.
#1 Best Overall
A React-PDF document is a tree: Document is the root, and its children should be Page elements. Page content uses React-PDF primitives and styles rather than ordinary DOM elements and browser CSS.
Direct component approach
If the source content can be represented as data, render that data as React-PDF components instead of first generating an HTML string. This avoids depending on a translation layer for structure and layout.
import { Document, Page, Text, View } from '@react-pdf/renderer';
function ReportDocument({ title, paragraphs }) {
return (
<Document title={title}>
<Page size="A4">
<View>
<Text>{title}</Text>
{paragraphs.map((paragraph, index) => (
<Text key={index}>{paragraph}</Text>
))}
</View>
</Page>
</Document>
);
}This is the right foundation when layout fidelity is more important than reusing markup. The renderer offers its own styling API, including supported CSS properties and Flexbox layout; it does not imply that every browser CSS rule can be used unchanged.
Render an HTML string with react-pdf-html
For existing HTML, install react-pdf-html alongside @react-pdf/renderer. The adapter’s README documents an <Html> component placed inside a React-PDF Page, itself inside a Document:
import { Document, Page } from '@react-pdf/renderer';
import Html from 'react-pdf-html';
const html = '<h1>Report</h1><p>Generated content</p>';
function PdfDocument() {
return (
<Document>
<Page>
<Html>{html}</Html>
</Page>
</Document>
);
}This is the adapter’s documented integration shape; it is not a guarantee that arbitrary web content will look the same in the resulting PDF. Consult the react-pdf-html README for its API, and validate output using the exact versions and input your application will deploy.
What the adapter translates
The README describes parsing HTML into a node tree, reading <style> tags and inline style attributes, and mapping block/container elements to React-PDF View, inline or text elements to Text, <img> to Image, and <a> to Link. Its examples cover headings, paragraphs, text decoration, images, links, lists, tables, and preformatted code.
Those examples show intended coverage, not full HTML support. CSS is limited to properties supported by React-PDF. Table support is described as basic, and list support should likewise be tested with the structures and styling in your content. Custom renderers let you define how particular tags map to React-PDF components when the defaults are insufficient.
Whitespace, styles, and custom renderers
The adapter documents collapse as defaulting to true. With it set to false, newlines are rendered as breaks. The component also accepts renderers, root styling, stylesheet mappings, and a resetStyles option. Check the README for current prop details and test how the chosen settings affect adjacent inline text, indentation, and line breaks in your own documents.
Handle stylesheets and external resources
Remote stylesheets need special handling. The adapter README says to resolve them asynchronously outside React rendering because React-PDF does not support asynchronous rendering. Fetch and prepare the stylesheet data before rendering the document, then pass the resolved styles through the adapter’s supported mechanism.
Remote images and stylesheets also create application-level decisions: which hosts may be requested, how failures should affect a document, and whether private or internal URLs must be blocked. Define an explicit policy rather than allowing arbitrary markup to trigger requests to any destination. Test missing images, slow resources, and inaccessible hosts so your PDF-generation path has a deliberate failure mode.
Sanitize untrusted HTML before parsing
If HTML is user-authored or otherwise untrusted, sanitize it with a library intended for HTML sanitization before passing it to a parser. OWASP recommends DOMPurify for this purpose and cautions that modifying sanitized markup afterward—or having downstream code mutate it—can undermine the protection. Sanitization and rendering are separate concerns; the available guidance does not establish the security behavior of every parser, renderer, URL handler, or dependency in your stack.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitchesSet an allowlist appropriate to the application for tags, attributes, links, images, and remote stylesheets. Review URL-bearing attributes and external resource sources, and validate the full path from received input through sanitization, parsing, and rendering. Do not treat successful PDF generation as evidence that the input was safe.
Check runtime and framework compatibility
Compatibility depends on the installed React-PDF version and your application stack. The v4 compatibility page lists testing against the latest minor releases of Node.js 18, 20, and 21; React 16.8 or later, React 17, and React 18; and React 19 beginning with renderer v4.1.0. It also documents a Next.js App Router crash before Next.js 14.1.1 and recommends 14.1.1 or later. These are version-specific statements from the v4 compatibility guidance, not a promise for every package combination. Check the React-PDF compatibility page against your installed versions before upgrading or deploying.
Choose between direct components and HTML conversion
| Consideration | Direct React-PDF components | HTML adapter |
|---|---|---|
| Starting point | Structured data or content you can express in React components | An existing HTML string |
| Layout control | Direct control over the PDF component tree and layout | Depends on the adapter’s supported tag and style mappings |
| Browser-style fidelity | Uses React-PDF’s own components and styling model | Does not promise full browser HTML/CSS behavior |
| Tables and lists | Built explicitly for the document layout | Adapter describes basic table support; test real structures |
| Remote stylesheets | Load and translate the styles you need in your application | Resolve remote stylesheets asynchronously before rendering |
| User-generated input | Validate and constrain data used to build the tree | Sanitize HTML and review downstream parsing and URL handling |
If your application has a small, stable HTML vocabulary or strict page-design requirements, explicit React-PDF components are usually the more controllable design. If reusing existing markup saves meaningful work, the adapter can bridge common structures, provided its output passes tests for the actual content.
Troubleshooting common failures
The HTML string appears as text or does not render
Confirm that the markup is passed as children to <Html>, and that Html is nested inside Page and Document. An ordinary React DOM element such as div is not a substitute for the React-PDF document primitives.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Styles look different from the browser
Check each CSS property against React-PDF’s supported styling model and the adapter’s mappings. Reduce the sample to a few elements, then add styles incrementally. For exact layout requirements, express the layout directly with React-PDF components rather than expecting full browser CSS translation.
Tables, lists, or page breaks are wrong
The adapter identifies tables as basic support; complex structures may need a custom renderer or a direct component implementation. Test long content spanning pages, nested lists, wide tables, and any explicit break-related styling. The adapter’s examples do not establish complete pagination behavior for every HTML pattern.
Remote stylesheet rules are missing
Resolve remote stylesheets before starting React rendering. Do not rely on the adapter or renderer to await network requests during the synchronous rendering path.
Client or server rendering fails after an upgrade
Check the exact versions of React, React-PDF, Node.js, and Next.js against the compatibility guidance for that renderer release. In particular, the v4 page calls out React 19 support beginning at React-PDF v4.1.0 and a Next.js App Router issue in versions earlier than 14.1.1.
Recommended Free Tools
Performance, reliability, and cost considerations
No general rendering speed, memory limit, or per-document cost figure is established here; these depend on the application, deployment, document size, and input. For reliable production output, test representative and worst-case documents, including large images, long pages, tables, and missing remote assets. Where output consistency matters, control external resources and versions rather than relying on changing third-party HTML or stylesheets at render time.
Best Value
For predictable layout and fewer translation surprises, build the PDF from your content model with React-PDF components. For existing markup, use an adapter only after verifying the results and setting input and external-resource policies.
Or skip the browser setup
If your goal is a clean image or PDF capture of a live webpage rather than generating a PDF from application content, ScreenshotNeo offers a one-request screenshot API. It is not a replacement for React-PDF’s component-based document generation. Its API can capture a URL directly, and its documentation describes the available request options.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpScreenshotNeo accepts cookie or consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; those steps can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, with response headers indicating the page verdict and billing status. An MCP server provides screenshot tools for AI agents, and the free plan includes 1,000 shots a month with no card required; paid plans start at $5 for 3,000 shots.
Sign up for ScreenshotNeo’s free plan to get 1,000 screenshots a month with no card.
Frequently Asked Questions
Does React-PDF render a PDF file that already exists?
This article covers generating a PDF from React or HTML content. Displaying an existing PDF in a React application is a different task.
Can I use react-pdf-html with any HTML string?
The adapter supports a subset of HTML and React-PDF-compatible styling. Arbitrary markup and browser CSS are not guaranteed to translate faithfully.
Does adding ScreenshotNeo convert HTML into a React-PDF document?
No. ScreenshotNeo captures a webpage URL as an image or PDF; it does not replace React-PDF for constructing application documents.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteQuick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
