Modern JS Support

PDFBridge waits for your client-side React hydration to resolve perfectly before triggering the V8 Chromium capture.

Tailwind Native

Flexbox, CSS Grids, and absolute positioning work out of the box. Stop writing hacky inline styles.

Server Components

Pass the output of JSX natively from your React Server Components directly to our /convert REST endpoint.

Custom Web Fonts

Host web fonts like Inter or custom brand fonts; our headless fleet loads and renders them sharply.

app/api/invoice/route.ts

import { renderToStaticMarkup } from 'react-dom/server';
import { InvoiceTemplate } from '@/components/invoice';

export async function POST(req) {
  const data = await req.json();
  
  // 1. Render your React component to an HTML string
  const htmlString = renderToStaticMarkup(<InvoiceTemplate data={data} />);

  // 2. Fire it to PDFBridge
  const response = await fetch("https://api.pdfbridge.xyz/api/v1/convert", {
    method: "POST",
    headers: {
      "x-api-key": `${process.env.PDFBRIDGE_API_KEY}`,
      "Content-Type": "application/json"
    },
    body: JSON.stringify({ html: htmlString })
  });

  return new Response(response.body, {
    headers: { "Content-Type": "application/pdf" }
  });
}

The Easiest Flow for React Teams

Build your invoice template as a standard React component (<Invoice />). Call renderToStaticMarkup() on the backend. Send the raw string to PDFBridge. Done.

Get Your Free API Key

Disclaimer: React and Next.js are registered trademarks of Meta Platforms, Inc. and Vercel Inc. respectively. PDFBridge is an independent infrastructure provider and is not affiliated with, endorsed by, or sponsored by Meta or Vercel. Information reflects best practices as of 2026.