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 quotation PDF in React

Quotes sit next to invoices in most SaaS and agency stacks. They need the same owned-code path: stable tables, a validity window, and a signature block you can fill from your CRM. Export the TSX once, then regenerate every quote from structured opportunity data.

  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: How to generate PDFs in React in 2026 · react-pdf vs Puppeteer

What you get on export

A folder you own

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

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

Questions about this quotation 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.

Can the client sign the quote in the PDF?

The template includes a signature block. You can collect a signature image URL in your app and pass it as a prop, or keep it as a print-and-sign field.