React to PDF: Using JSX Templates for Document Generation

Why React for PDF templates?

Most PDF template systems use Handlebars, Liquid, or Mustache — string-based templating languages that are hard to debug, don't support complex logic, and require learning yet another syntax.

React components are different. You get:

• TypeScript type checking for your template data
• Component composition and reuse
• Conditional rendering with JavaScript (not a limited template syntax)
• Your existing React skills — no new language to learn

Creating a React PDF template

A pdfRelay template is a React component that receives props and returns JSX:

export default function Invoice({ company, client, items, total }) {
  return (
    <div style={{ fontFamily: 'sans-serif', padding: 40 }}>
      <h1>Invoice</h1>
      <p>From: {company.name}</p>
      <p>To: {client.name}</p>

      <table style={{ width: '100%', borderCollapse: 'collapse' }}>
        <thead>
          <tr>
            <th>Item</th>
            <th>Qty</th>
            <th>Price</th>
          </tr>
        </thead>
        <tbody>
          {items.map((item, i) => (
            <tr key={i}>
              <td>{item.name}</td>
              <td>{item.qty}</td>
              <td>${item.price.toFixed(2)}</td>
            </tr>
          ))}
        </tbody>
      </table>

      <p style={{ textAlign: 'right', fontSize: 20 }}>
        Total: ${total.toFixed(2)}
      </p>
    </div>
  );
}

Rendering the template

const response = await fetch('https://pdfrelay.com/api/v1/render', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer sk_live_...',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    template: 'invoice',
    data: {
      company: { name: 'Acme Corp' },
      client: { name: 'Jane Smith' },
      items: [
        { name: 'Widget', qty: 5, price: 9.99 },
        { name: 'Gadget', qty: 2, price: 24.99 },
      ],
      total: 99.93,
    },
  }),
});

The template is rendered server-side using React's renderToStaticMarkup, then converted to PDF by the Rust engine. You get the expressiveness of React with the rendering quality of a native PDF engine.

No proprietary template language. No learning curve. Just React — the library millions of developers already know.