React to PDF — export components without a second template

The common browser recipe is html2canvas plus jsPDF: rasterise the DOM to a canvas, paste the canvas into a PDF. It works until someone tries to select the text, search the document, or print a table that spans three pages — because the output is a picture of a page, not a page.

What server-side rendering changes

• Text stays selectable and searchable — it is typeset, not photographed
• Page breaks obey break-inside and break-after instead of slicing mid-row
• Running headers and footers with real page numbers
• Output is identical across browsers, because your users' browsers are not involved
• Fonts resolve server-side, so a missing local font cannot silently change the layout

Two ways to do it

Send the component directly with jsx, or point the API at a route your app already renders. The first keeps everything in one call; the second is useful when the page needs your session or your database.

import { RenderKit } from "renderkit-sdk";
const rk = new RenderKit(process.env.RENDERKIT_API_KEY);

// 1. Component + props — nothing else to host
const a = await rk.pdf({
  jsx: { component: "Report", props: { quarter: "Q3", revenue: 128400 } },
  format: "A4",
  margin: { top: "18mm", bottom: "18mm" },
});

// 2. Or an existing route in your app
const b = await rk.pdf({
  url: "https://app.example.com/reports/2026-q3?print=1",
  wait_until: "networkidle",
  print_background: true,
});

Making the CSS behave

Print is a different medium and the browser treats it as one. A @media print block that hides navigation, sets break-inside: avoid on cards and table rows, and switches to physical units for margins gets you most of the way. Backgrounds need print_background: true — Chromium drops them by default.

More

JSX to PDF covers the component-native path in depth. See also React PDF invoices, HTML to PDF in React, and the full HTML to PDF API.