Generate invoice images
from HTML templates

import { renderInvoice } from './invoiceTemplate.js'

export async function generateInvoicePng(invoice) {
  const html = renderInvoice(invoice) // your HTML template function

  const res = await fetch('https://api.renderpix.dev/v1/render', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${process.env.RENDERPIX_API_KEY}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      html,
      width:  794,  // A4 at 96 dpi
      height: 1123, // A4 at 96 dpi
      format: 'png',
    }),
  })

  const { url } = await res.json()
  const png = await fetch(url)
  return Buffer.from(await png.arrayBuffer())
  // → save to S3, attach to email, or stream to browser
}

import requests
from jinja2 import Environment, FileSystemLoader

env = Environment(loader=FileSystemLoader("templates"))

def generate_invoice_png(invoice: dict) -> bytes:
    # Render Jinja2 template to HTML string
    template = env.get_template("invoice.html")
    html = template.render(**invoice)

    resp = requests.post(
        "https://api.renderpix.dev/v1/render",
        headers={"Authorization": f"Bearer {API_KEY}"},
        json={
            "html":   html,
            "width":  794,   # A4 at 96 dpi
            "height": 1123,  # A4 at 96 dpi
            "format": "png",
        },
        timeout=30,
    )
    image_url = resp.json()["url"]
    return requests.get(image_url).content

<!-- templates/invoice.html — works with Jinja2, Handlebars, EJS, etc. -->
<div style="width:794px;min-height:1123px;background:white;
  padding:64px;font-family:'Inter',sans-serif;color:#1e293b">

  <!-- Header -->
  <div style="display:flex;justify-content:space-between;margin-bottom:48px">
    <div>
      <div style="font-size:28px;font-weight:800;color:#0f172a">{{ company_name }}</div>
      <div style="color:#64748b;margin-top:4px">{{ company_address }}</div>
    </div>
    <div style="text-align:right">
      <div style="font-size:22px;font-weight:700">INVOICE</div>
      <div style="color:#64748b">#{{ invoice_number }}</div>
      <div style="color:#64748b">Due: {{ due_date }}</div>
    </div>
  </div>

  <!-- Line items -->
  <table style="width:100%;border-collapse:collapse">
    {% for item in line_items %}
    <tr style="border-bottom:1px solid #e2e8f0">
      <td style="padding:12px 0">{{ item.description }}</td>
      <td style="text-align:right;font-weight:600">{{ item.amount }}</td>
    </tr>
    {% endfor %}
  </table>

  <!-- Total -->
  <div style="text-align:right;margin-top:32px;font-size:22px;font-weight:700">
    Total: {{ total }}
  </div>
</div>