React & Next.js

@pdfforge/react turns a JSX tree into a PDF: your components are rendered to HTML on the server (no Chromium in your app), your Tailwind config is compiled locally and inlined, and the API renders the self-contained document with real Chrome.

Install

npm install @pdfforge/react
# optional, for local Tailwind compilation:
npm install tailwindcss postcss

fromJSX

import { PDFForge, Document } from "@pdfforge/react";

const forge = new PDFForge(process.env.PDFFORGE_API_KEY!);

function Invoice({ order }: { order: Order }) {
  return (
    <div className="p-8">
      <h1 className="text-2xl font-bold">Invoice {order.number}</h1>
      <p className="text-gray-500">{order.customer}</p>
    </div>
  );
}

const pdf = await forge.fromJSX(
  <Document format="A4" margin="2cm">
    <Invoice order={order} />
  </Document>,
);

fromJSX(element, options) accepts everything HTML to PDF accepts, plus:

Option	Description
`compileTailwind`	Compile Tailwind locally with your config (default `true` when `tailwindcss` + `postcss` are installed).
`tailwindConfig`	Your Tailwind config object (theme, plugins).
`css`	Pre-compiled CSS to inline as-is (skips local compilation).

When local compilation is unavailable, the SDK falls back to the API's Tailwind base utilities (tailwind: true).

Document is the root

Wrap your tree in <Document> — it emits the full HTML skeleton with @page size/margins, which the API detects and honours (preferCssPageSize). Props: format, width/height, landscape, margin (+ per-side variants), css, className, lang.

In a Next.js route handler

// app/api/invoice/[id]/route.tsx
import { PDFForge, Document } from "@pdfforge/react";
import { Invoice } from "@/components/invoice";

const forge = new PDFForge(process.env.PDFFORGE_API_KEY!);

export async function GET(
  _req: Request,
  { params }: { params: Promise<{ id: string }> },
) {
  const { id } = await params;
  const order = await getOrder(id);

  const pdf = await forge.fromJSX(
    <Document format="A4" margin="2cm">
      <Invoice order={order} />
    </Document>,
  );

  return new Response(Buffer.from(pdf.buffer), {
    headers: {
      "Content-Type": "application/pdf",
      "Content-Disposition": `inline; filename="invoice-${id}.pdf"`,
    },
  });
}

No headless browser in your deployment: rendering happens with renderToStaticMarkup, the heavy lifting on the pdfforge API. Works on serverless runtimes.

PDF-aware components

The package ships components that map to engine features — see the React SDK reference for the full catalog:

PageBreak / NoBreak — control pagination explicitly.
Header / Footer — running bands repeated on every page.
QRCode / Barcode — real scannable codes rendered server-side.
Table — table markup wired into smart page breaks.
Chart / Totals — vector charts and computed totals.

Next steps

React SDK — component-by-component reference.
Pagination & fit — smart breaks and fit-to-page.
HTML to PDF — the underlying endpoint.

Install

fromJSX

In a Next.js route handler

PDF-aware components

Next steps

On this page