PDFx Builder
Live react-pdf output1 page
What's inside

PDFx components used

ColumnsDividerKey ValuePage FooterPage HeaderSectionSignatureTableText
Use it in React

How to generate a purchase order PDF in React

POs are operational documents with vendor and ship-to blocks plus line items. Export once, approve in your workflow, and render from ERP data without Puppeteer in the serverless path.

  1. Preview the live @react-pdf/renderer output on this page (no signup).
  2. Click Use this template to open it in the visual builder and bind your {{variables}}.
  3. Export the .zip of typed TSX, drop it into your Next.js app, and call renderToBuffer with your data.

Drop the exported folder into your app/ directory, import the template, and pass typed props. Render it server-side with renderToBuffer in a route handler, or stream it to the browser. No headless browser, no runtime to learn.

Related: Why react-pdf tables split across pages (and the fix) · react-pdf vs Puppeteer

What you get on export

A folder you own

purchase-order/
├─Template.tsx
├─types.ts
├─sample-data.ts
└─README.md
import { Template } from "./purchase-order";
import { renderToBuffer } from "@react-pdf/renderer";

const pdf = await renderToBuffer(
  <Template data={data} />
);
FAQ

Questions about this purchase order template

Is the preview the real PDF?

Yes. The sheet renders through @react-pdf/renderer, the exact engine behind the export and the hosted API. What you preview is what ships.

Do I own the exported code?

Yes. Export is a .zip of typed TSX, sample data, and a README. There is no proprietary runtime and no vendor lock-in. You render PDFs inside your own React or Next.js app.

Does this include pricing columns?

Yes. Line items support qty, unit price, and line totals. Adjust columns in the builder or in the exported TSX.