react-pdf.org

Install @react-pdf/renderer with npm, then build a document out of React components and render it to a file, a stream, or a blob — the same document works in Node or in the browser. That is the whole workflow react-pdf is built around: you describe the PDF with the layout primitives you already use in React, and the renderer produces the actual PDF.

This guide covers the install, a minimal working document, the three render targets, and the points where people usually get stuck.

What react-pdf actually is

react-pdf is a React renderer for creating PDF files on the browser and server. It is not a PDF viewer and not a wrapper around an existing PDF — you author the document in JSX and it renders out as a PDF.

Two things make it feel familiar:

• Layout you already know. Yoga brings flexbox to the page, so rows, columns, wrapping, and absolute positioning behave the way they do in React Native-style layout.
• Beyond text. Custom fonts, images, SVG, form fields, hyphenation, and page-break control are all supported.

Install

npm install @react-pdf/renderer

That single package is the entry point. The official docs and the Playground are the two places to look next — the Playground lets you edit a document and see the output without setting up a project.

Write your first document

A react-pdf document is a tree of components. The core ones you need for a first pass:

A minimal document looks like this:

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

const styles = StyleSheet.create({
  page: { padding: 30 },
  row: { flexDirection: 'row' },
  label: { width: 100 },
});

const Invoice = () => (
  <Document>
    <Page size="A4" style={styles.page}>
      <View style={styles.row}>
        <Text style={styles.label}>Invoice</Text>
        <Text>#001</Text>
      </View>
    </Page>
  </Document>
);

Two things to notice:

• Styles are not CSS. StyleSheet.create takes a subset of CSS expressed as objects. Flexbox properties work; many web-only properties do not.
• Text must live inside Text. You cannot drop a raw string into a View and expect it to render.

Render it

The same document renders to a file, a stream, or a blob — in Node or straight in the client. Which one you pick depends on where the PDF is going.

On the server (Node)

Use renderToFile when you want a file on disk, or renderToStream when you want to pipe the PDF into an HTTP response:

import { renderToFile } from '@react-pdf/renderer';
import Invoice from './Invoice';

await renderToFile(<Invoice />, './invoice.pdf');

Expected result: invoice.pdf appears at the given path. For an API endpoint, renderToStream lets you send the bytes directly to the client without writing to disk first.

In the browser

Use PDFDownloadLink for a download button, or usePDF when you want the blob and control the timing yourself:

import { PDFDownloadLink } from '@react-pdf/renderer';
import Invoice from './Invoice';

<PDFDownloadLink document={<Invoice />} fileName="invoice.pdf">
  {({ loading }) => (loading ? 'Preparing…' : 'Download invoice')}
</PDFDownloadLink>

Expected result: clicking the link downloads invoice.pdf. The loading flag matters — rendering is asynchronous, so the link is not ready on first paint.

Verify it worked

• Server: check the file exists and opens in a PDF reader. If you used a stream, confirm the response has the right content type and the browser renders it inline rather than downloading garbage.
• Browser: click the link and open the downloaded file. If the button never leaves the loading state, the document threw during render — check the console.

Common sticking points

• Assuming web CSS carries over. Flexbox works; a lot of everything else does not. Build layout with View and flex properties rather than reaching for margins and floats.
• Putting text outside Text. Raw strings in a View will not render.
• Forgetting the render is async. In the browser, handle the loading state from PDFDownloadLink or usePDF; on the server, await the render call.
• Fonts. Custom fonts are supported, but you have to register them before they appear — a missing font shows up as fallback text, not an error.
• Page breaks. Long content does not always break where you want. Page-break control is available, so use it rather than fighting the default flow.

Where to go next

Start in the Playground to iterate on layout without a build step, then move the document into your app. The docs cover the component set, styling rules, and the rendering APIs in more depth than any single example can.

A PDF invoice in legal billing is a fixed-format document that presents the fees and costs owed on a matter in a layout that looks the same on every device. It is the digital equivalent of a printed bill: readable, portable, and easy to attach to an email or upload to a client portal. Its main limitation is that it is not machine-readable in the way a LEDES file is, so a client's e-billing system cannot automatically ingest it. PDF works best for flat-fee matters, small or one-off engagements, and clients who do not run an automated billing platform.

What "PDF" means in a legal billing context

When a billing tool offers to send an invoice "in PDF," it is generating a rendered document rather than a structured data file. The distinction matters:

• PDF is a presentation format. A human reads it. Line items, totals, and matter details appear as text and tables on a page.
• LEDES (Legal Electronic Data Exchange Standard) is a structured, delimited text format. An e-billing system parses it, validates it against outside counsel guidelines, and routes it for review.
• Email delivery is a transport method, not a format. You can email a PDF, email a LEDES file, or email a link to an online invoice.

These three are often confused because a single invoice can combine them: a LEDES file delivered by email, or a PDF attached to an email. The format is what the client's systems can read; the delivery method is how it arrives.

When a PDF invoice is the right choice

PDF is usually appropriate when the client does not require electronic submission through a billing platform. Common scenarios:

• Flat-fee and fixed-price matters. When the invoice is one or two lines, a structured file adds no value.
• Small businesses and individuals. Clients without an accounts payable system can open a PDF and pay from it.
• Retainers and replenishment requests. A simple statement of the retainer balance is easy to read as a PDF.
• Pro bono or courtesy bills. Where no formal e-billing review applies.
• Backup documentation. Even when a LEDES file is submitted, a PDF is often attached for the reviewer's convenience.

If the client has outside counsel guidelines requiring LEDES submission, a PDF alone will typically be rejected or returned for manual entry. Check the client's billing requirements before choosing the format.

PDF versus LEDES versus emailed invoice: a quick comparison

Core elements of a compliant legal PDF invoice

A PDF invoice should stand on its own. If a client's AP department picks it up with no context, it should still answer who, what, when, and how much.

Firm and client identification

• Firm name, address, and contact details
• Tax or VAT identification number where applicable
• Client name and billing contact
• Invoice number and invoice date
• Client matter number or reference

Matter and timekeeper detail

• Matter name and description
• For each timekeeper: name, initials, and billing rate
• Time entries with date, narrative description, and time recorded in tenths of an hour
• Clear separation of fee earners if rates differ

Fees, expenses, and totals

• Fees subtotal
• Disbursements and expenses, itemized with dates
• Taxes applied
• Prior payments, credits, or trust retainer applied
• Total amount due and currency

Payment terms

• Due date and payment window
• Accepted payment methods
• Remittance details or a payment link
• Late-payment terms if the engagement letter specifies them

A useful test: hand the PDF to someone who has never seen the matter and ask them to confirm the amount due and the period covered. If they hesitate, the invoice is missing something.

Practical limitations to plan around

PDF invoices shift work to the recipient. Someone at the client has to read the document and key the data into their system, which introduces delay and transcription errors. PDFs also cannot be validated against billing guidelines automatically, so a reviewer may reject a line item that a LEDES rule would have caught before submission.

Two habits reduce the friction:

1. Send a consistent template. Clients learn where to find the total, the matter number, and the payment terms.
2. Keep a LEDES version in reserve. If a client later adopts an e-billing platform, you can convert rather than rebuild.

Choosing between PDF, LEDES, and email delivery

Work from the client's requirements backward:

• Does the client mandate LEDES submission? If yes, PDF is a supplement, not a substitute.
• Is the matter flat-fee or very small? PDF is usually sufficient.
• Does the client have no billing system? PDF delivered by email or portal is the simplest path.
• Is the invoice complex with many timekeepers and expenses? A structured format reduces disputes, even if the client accepts PDF.

When in doubt, ask the client's billing contact which format they prefer and whether a PDF attachment is acceptable alongside any required file. That one question prevents most rejected invoices.

Easy Legal Billing supports sending or scheduling invoices in LEDES, email, or PDF formats, which lets you match the format to each client's requirements rather than forcing one approach across every matter.

Yes. react-pdf is a React renderer for creating PDF files, and the same document can render in Node or directly in the client. According to the project's own description, it renders "to a file, a stream or a blob — in Node or straight in the client." That means you can write one document component and produce PDFs on either side, choosing the output form that fits where the code runs.

What "browser and server" actually means

The key point is that react-pdf is not split into two separate libraries with different APIs. It is a renderer: you describe a document with React components, and the renderer turns that description into PDF output. The environment (Node vs. browser) determines which output forms are practical, not how you write the document.

The source material lists file, stream, and blob as the output forms and states the same document renders to them in Node or in the client. It does not document per-environment API differences, so treat the component code as shared and the output handling as the part that changes.

Why this matters for choosing react-pdf

If you need PDF generation in only one place, the dual-environment support is a convenience. If you need it in both, it removes a common source of duplication: you avoid maintaining one document definition for the server and a different one for the client.

Concrete cases where both sides are useful:

• Server-side for consistency and control. Generate invoices, reports, or receipts in a Node service so every user gets the same output and the logic stays off the client.
• Client-side for immediacy and privacy. Produce a PDF in the browser when the user should get it instantly, or when the data should not leave the device.
• Both, for the same document. Preview or export in the browser, then regenerate the identical document on the server for archival or emailing.

The "same document" claim is the part worth verifying in your own setup: shared components are the promise, but fonts, images, and data sources still need to be available in whichever environment renders.

What the renderer supports beyond plain text

The project highlights three capability areas, and they apply regardless of environment:

• Layout you already know. Yoga brings flexbox to the page, including rows, columns, wrapping, and absolute positioning. If you have written flexbox in React for the web, the mental model carries over.
• Beyond text. Custom fonts, images, SVG, form fields, hyphenation, and page-break control.
• Output flexibility. File, stream, or blob, as noted above.

For a deeper look at layout behavior, see the related question on how layout works in react-pdf; for the full list of renderable content, see what react-pdf can render beyond text.

Getting started

The documented install command is:

npm install @react-pdf/renderer

From there, the project points to two entry points: a getting-started path and an interactive playground. The playground is the faster way to confirm that a document renders the way you expect before wiring it into a server route or a client component.

A practical sequence:

1. Install @react-pdf/renderer.
2. Build a minimal document component and render it in the playground to check layout and fonts.
3. Move that same component into your target environment.
4. Choose the output form for that environment — stream or file on the server, blob in the browser.

Common sticking points

• Fonts and images must resolve where you render. A font or image path that works in the browser may not resolve in Node, and vice versa. Confirm assets are reachable in each environment you target.
• Output handling differs even when the document does not. Writing a stream to a response and triggering a blob download are different tasks; plan for both if you support both environments.
• Don't assume pricing or hosting details. The source material describes the renderer and its capabilities; it does not state pricing, so check the project's own pages if cost matters to your decision.

The short version: react-pdf is designed so the same React document can render on the server or in the browser, with file, stream, and blob as output options. If your requirement is "generate this PDF in more than one place without rewriting it," that is exactly the case it targets.

react-pdf is a React renderer for creating PDF files, and it works both in the browser and on the server. You describe a document with React components, and the same document can be rendered to a file, a stream, or a blob — in Node or directly in the client. It fits projects that already use React and want PDF generation to live in the same component model as the rest of the app.

How it works

The core idea is that a PDF document is just another React tree. You compose primitives like Document, Page, and View instead of writing imperative drawing calls, and react-pdf translates that tree into PDF output.

The same document definition is portable across environments:

• Server (Node): render to a file or a stream, useful for generating invoices, reports, or exports in a backend job.
• Browser (client): render to a blob, useful for letting a user download a PDF without a round trip to the server.

Because the document is described once, you avoid maintaining separate code paths for server-side and client-side generation.

Layout you already know

react-pdf uses Yoga to bring flexbox to the page. If you have written CSS flexbox, the mental model carries over:

• rows and columns
• wrapping
• absolute positioning

This matters because PDF layout is normally a different discipline from web layout. Here, the layout vocabulary is the one React developers already use, which shortens the gap between "I know how to build this screen" and "I know how to build this page."

Beyond text

A PDF renderer is only useful if it handles more than paragraphs. react-pdf supports:

• custom fonts
• images
• SVG
• form fields
• hyphenation
• page-break control

Page-break control and hyphenation are worth calling out, because they are the details that separate a usable generated document from one that looks machine-made. Form fields matter if the output needs to be filled in after generation.

Getting started

Install the renderer:

npm install @react-pdf/renderer

From there, the documented paths are the docs and the playground. The playground is the faster way to confirm whether the layout model matches what you need before committing to it in a project.

When react-pdf is a good fit

Choose it when:

• your project is already React-based and you want one component model for UI and PDF
• you need the same document to render on the server and in the browser
• you need flexbox-style layout rather than manual coordinate placement
• you need fonts, images, SVG, form fields, hyphenation, or page-break control

Look elsewhere when you need to manipulate or extract content from existing PDFs — react-pdf is a renderer for creating PDF files, not a general PDF editing toolkit.

react-pdf uses Yoga to bring flexbox layout to PDF pages, so you position elements with the same mental model you already use for CSS: rows, columns, wrapping, and absolute positioning. If you are comfortable with flexbox in the browser, the main adjustment is that you are laying out fixed-size pages rather than a scrolling viewport, and you build the structure with React components instead of HTML tags.

The layout engine: Yoga, not the browser

react-pdf does not run your document through a browser rendering engine. It uses Yoga, a cross-platform layout engine that implements flexbox, to compute positions and sizes. That has two practical consequences:

• Flexbox is the primary layout tool. You get flexDirection, justifyContent, alignItems, flexWrap, flex, and related properties on View components.
• There is no CSS cascade or stylesheet. Styles are JavaScript objects passed to a style prop, and they are resolved per component rather than inherited through a global cascade.

Because the same document definition renders to a file, a stream, or a blob — in Node or in the client — the layout result is consistent across server and browser, which matters when you generate the same invoice or report in both places.

Building a page structure with React components

The layout primitives are React components, not HTML elements:

A minimal structure looks like this:

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

const styles = StyleSheet.create({
  page: { flexDirection: 'column', padding: 30 },
  row: { flexDirection: 'row', justifyContent: 'space-between' },
  column: { flexGrow: 1, flexBasis: 0 },
});

const Invoice = () => (
  <Document>
    <Page size="A4" style={styles.page}>
      <View style={styles.row}>
        <View style={styles.column}><Text>From</Text></View>
        <View style={styles.column}><Text>To</Text></View>
      </View>
    </Page>
  </Document>
);

The input is the component tree plus the style objects; the action is rendering; the expected result is a laid-out page where the two columns split the available width evenly. Note that flexDirection defaults to column in react-pdf, unlike the browser default of row — a common source of surprise when porting CSS.

What carries over from CSS flexbox

• Rows and columns: flexDirection: 'row' | 'column' controls the main axis.
• Distribution: justifyContent and alignItems behave as you expect along the main and cross axes.
• Wrapping: flexWrap: 'wrap' lets children flow onto multiple lines.
• Absolute positioning: position: 'absolute' with top, left, right, bottom takes an element out of flow — useful for headers, footers, and watermarks.
• Sizing: width, height, flexGrow, flexShrink, and flexBasis work on View boxes.

Where it differs from the browser

• No scrolling viewport. A Page is a fixed canvas. Content that overflows does not scroll; you control it with page breaks.
• Page-break control is explicit. The docs list page-break control as a feature, so you manage where content splits rather than relying on the browser.
• Units and defaults differ. Sizes are in points, and as noted, the default flex direction is column.
• Text is special. Text must be wrapped in Text components; you cannot drop raw strings into a View and expect them to lay out like inline HTML.

Beyond boxes: fonts, images, and SVG

Layout is not only about boxes. The renderer supports custom fonts, images, SVG, form fields, and hyphenation, all of which participate in the same flexbox flow. An image inside a View with flexGrow will size according to the flex rules, and hyphenation affects how text wraps inside its container — so text-heavy layouts benefit from testing with your actual font and content length.

A practical way to verify layout

1. Install the renderer: npm install @react-pdf/renderer.
2. Build a small document with one Page and a couple of nested View rows.
3. Render it to a file or blob and open the result.
4. Adjust flexDirection, justifyContent, and flexBasis until the boxes land where you want.

The playground linked from the site is the fastest loop for this, since you can change styles and see the page without wiring up a full build.

If your goal is a document whose structure mirrors a familiar CSS flexbox layout — rows, columns, wrapping, absolute overlays — react-pdf is a direct fit. If you need a scrolling, reflowing web page rather than fixed pages, or you depend on the full CSS cascade, flexbox alone will not cover that, and you should treat the layout model as a constrained subset rather than a browser equivalent.