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

PDFx components used

ColumnsHeadingKeep TogetherKey ValueListPage FooterPage HeaderSectionSignatureTableText
Use it in React

How to create a statement of work PDF in React

SOWs repeat deliverables and milestone tables. Bind project data once the deal closes, regenerate the PDF from the same source of truth as your project tracker, and keep signatures in the template.

  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: From Figma to PDF: the missing piece · react-pdf vs Puppeteer

What you get on export

A folder you own

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

const pdf = await renderToBuffer(
  <Template data={data} />
);
More in Proposals
proposal

Project Proposal

FAQ

Questions about this statement of work 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 agencies reuse this across clients?

Yes. That is the point of owned code. Theme once, bind new client data per render, and avoid a metered hosted template per client.