Invoice Image Generator API — Generate Invoice Images from HTML

Why Image Invoices

When you need invoices as images, not PDFs

📩

Email previews

Embed invoice images directly in emails. No attachments, no "click to download" — recipients see the invoice immediately in their inbox.

💬

Slack & chat notifications

Send invoice images to Slack channels or chat apps for instant team visibility. "New invoice: $2,400" with a visual preview attached.

📷

Social proof & testimonials

Turn payment confirmations into shareable images. Great for freelancers showing revenue milestones or SaaS companies sharing growth metrics.

🗃

Archival & thumbnails

Generate thumbnail images of invoices for dashboards, search results, or document management systems. Quick visual scan without opening each file.

How It Works

Your invoice template, our rendering engine

generate-invoice.js

// Generate an invoice image from your HTML template
const html = `
  <div style="width:800px;padding:48px;background:white;font-family:sans-serif">
    <div style="display:flex;justify-content:space-between;margin-bottom:40px">
      <div>
        <div style="font-size:24px;font-weight:bold;color:#0f172a">INVOICE</div>
        <div style="color:#64748b;margin-top:4px">#${invoice.number}</div>
      </div>
      <div style="text-align:right;color:#64748b;font-size:14px">
        ${invoice.company}<br>${invoice.date}
      </div>
    </div>
    <table style="width:100%;border-collapse:collapse;font-size:14px">
      <tr style="border-bottom:2px solid #e2e8f0">
        <th style="text-align:left;padding:12px 0;color:#64748b">Item</th>
        <th style="text-align:right;padding:12px 0;color:#64748b">Amount</th>
      </tr>
      ${invoice.items.map(i => \`
        <tr style="border-bottom:1px solid #f1f5f9">
          <td style="padding:12px 0">\${i.name}</td>
          <td style="text-align:right;padding:12px 0">$\${i.amount}</td>
        </tr>
      \`).join('')}
      <tr>
        <td style="padding:16px 0;font-weight:bold;font-size:18px">Total</td>
        <td style="text-align:right;padding:16px 0;font-weight:bold;font-size:18px;
          color:#22d3ee">$${invoice.total}</td>
      </tr>
    </table>
  </div>
`;

const res = await fetch('https://renderpix.dev/v1/render', {
  method: 'POST',
  headers: { 'X-API-Key': 'rpx_your_key', 'Content-Type': 'application/json' },
  body: JSON.stringify({ html, width: 800, height: 600, format: 'png' })
});

Integrations

Works with your billing stack

⚡

Stripe

Webhook → image

📦

Node.js

npm install & go

🐍

Python

requests.post()

⚙

Any HTTP

cURL, REST, webhook

New in June 2026

Now with batch rendering & template variables

Automate at scale without writing a loop.

Batch Rendering

Render up to 50 images in a single API call (Pro plan). Generate an entire week's content in one request.

Generate invoice images for your entire billing run at month-end. 50 invoices per batch request.

Template Variables

Use {{placeholders}} in your HTML. Inject names, dates, titles dynamically — no string manipulation in your code.

{{company}}, {{invoice_number}}, {{amount}}, {{due_date}} — one template for every customer.

Async Callbacks

Fire-and-forget rendering with callback_url. Your app doesn't wait — RenderPix calls you back when the image is ready. (Pro+)

Fire invoice render on payment webhook. Customer receives their receipt image the moment it's ready.

invoice-vars.js

// Generate invoice with template variables
const response = await fetch('https://renderpix.dev/v1/render', {
  method: 'POST',
  headers: { 'X-API-Key': 'rpx_your_key', 'Content-Type': 'application/json' },
  body: JSON.stringify({
    html: `<div style="width:800px;background:white;padding:48px;font-family:sans-serif">
      <div style="display:flex;justify-content:space-between;margin-bottom:40px">
        <div style="font-size:28px;font-weight:800;color:#0f172a">INVOICE</div>
        <div style="text-align:right;color:#64748b">
          <div style="font-weight:600;color:#0f172a">{{company}}</div><div>{{date}}</div>
        </div>
      </div>
      <div style="border-top:2px solid #e2e8f0;padding-top:24px">
        <div style="display:flex;justify-content:space-between;margin-bottom:12px">
          <div style="color:#64748b">{{item}}</div><div style="font-weight:600">{{amount}}</div>
        </div>
        <div style="border-top:1px solid #e2e8f0;margin-top:24px;padding-top:16px;
          display:flex;justify-content:space-between">
          <div style="font-weight:700">Total</div>
          <div style="font-weight:800;font-size:20px">{{amount}}</div>
        </div>
      </div>
    </div>`,
    vars: { company: invoice.customerName, date: invoice.date, item: invoice.description, amount: invoice.total },
    width: 800, height: 600, format: 'png'
  })
});

Generate Invoice Images via API

When you need invoices as images, not PDFs

Your invoice template, our rendering engine

Works with your billing stack

First invoice image in 2 minutes

Now with batch rendering & template variables

More ways to use RenderPix

OG / Social Cards

Certificates

Social Media Automation

Full-Page Screenshots