pigeon-templates

React components for PDF-ready documents. The React Email of PDFs.

Install

npm install pigeon-templates

Quickstart

import { Invoice } from 'pigeon-templates'
import { renderToHTML } from 'pigeon-templates/server'
import { Pigeon } from 'pigeon-pdf'

const html = renderToHTML(
  <Invoice
    from={{ name: 'Acme Inc', email: '[email protected]' }}
    to={{ name: 'Jane Doe', email: '[email protected]' }}
    invoiceNumber="INV-001"
    issueDate="2024-03-15"
    dueDate="2024-04-15"
    items={[{ description: 'Consulting', quantity: 10, unitPrice: 150, amount: 1500 }]}
    subtotal={1500}
    tax={150}
    total={1650}
  />
)

const pigeon = new Pigeon({ apiKey: process.env.PIGEON_API_KEY })
const { url } = await pigeon.render({ html })
console.log(url) // https://cdn.usepigeon.dev/renders/xxx.pdf

Components

<Invoice>

Professional invoice with line items, totals, tax calculation, logo, and payment terms.

Props: from, to, invoiceNumber, issueDate, dueDate, items, subtotal, tax?, taxRate?, total, currency?, notes?, paymentTerms?, locale?

<Receipt>

Compact transaction confirmation with PAID indicator and payment method.

Props: from, to, receiptNumber, date, items, subtotal, tax?, total, currency?, paymentMethod?, transactionId?, notes?, locale?

<Contract>

Formal legal document with numbered clauses, party definitions, and signature blocks.

Props: title, parties, effectiveDate, clauses, signatureBlocks, governingLaw?, notes?, locale?

<Report>

Multi-page report with cover page, numbered sections, and page numbers.

Props: title, subtitle?, author?, date, logo?, sections, footer?, locale?

<Certificate>

Award or completion certificate in landscape orientation.

Props: title, recipientName, description, date, issuerName, issuerTitle?, issuerOrganization?, logo?, certificateId?, locale?

<OfferLetter>

Employment offer letter with terms, salary, benefits, and company letterhead.

Props: companyName, companyLogo?, companyAddress?, candidateName, candidateAddress?, date, position, department?, startDate, salary, salaryFrequency?, benefits?, reportingTo?, location?, expirationDate?, additionalTerms?, signatureBlock, locale?

CJK Support

All components accept a locale prop: en, zh-CN, zh-TW, ja, ko.

Built-in CJK typography defaults:

• Font stacks: Noto Sans SC/TC/JP/KR with system fallbacks
• line-height: 1.7 — correct for CJK mixed content
• line-break: strict — full kinsoku shori for Japanese
• word-break: keep-all on Korean — word-level breaks

Full CJK locale data (translated labels, date formats) coming in Phase 2.

Works Without Pigeon

pigeon-templates outputs standard HTML. Use it with any HTML-to-PDF service:

import { renderToHTML } from 'pigeon-templates/server'
import { Invoice } from 'pigeon-templates'

const html = renderToHTML(<Invoice {...data} />)
// Use with Puppeteer, Playwright, wkhtmltopdf, or any HTML-to-PDF tool

pigeon.render() is the easiest path — one env var, one function call.

Custom Templates

Use DocumentLayout and baseStyles to build your own:

import { DocumentLayout, baseStyles } from 'pigeon-templates'

function MyTemplate({ data }) {
  return (
    <DocumentLayout locale="en" title="My Document">
      <h1>{data.title}</h1>
      <p>{data.content}</p>
    </DocumentLayout>
  )
}

Links

• Pigeon Documentation
• pigeon-pdf SDK
• pigeon-mcp MCP Server

License

MIT