Live react-pdf output1 page
Preparing…
What's inside
PDFx components used
ColumnsDividerKey ValuePage FooterPage HeaderSectionSignatureTableText
Use it in React
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.
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
Is the preview the real PDF?
Yes. The sheet above renders through @react-pdf/renderer, the exact output you export. What you preview is what ships.
Do I need to sign up to preview?
No. Previewing is free and open. You only sign in when you want to save the template to your account and edit it in the builder.
Can I change the theme after export?
Yes. Switch themes in the builder before you export, or adjust the theme tokens in the exported TSX afterward. The canvas and the PDF stay in sync.