---
canonical: 'https://htmlcsstoimage.com/examples/invoice-receipt'
title: 'Invoice / Receipt Snapshot | HTML/CSS to Image API example'
description: 'Generate a simple, branded invoice or receipt image.'
---

# Invoice / Receipt Snapshot

Generate a simple, branded invoice or receipt image.

This example shows how to turn a clean HTML layout into a polished invoice. It includes a header with a company name, customer details, a table of items, and a clear total. Great for receipts, confirmations, or sharing invoices as images.

This is a working HTML/CSS to Image API example that produces an image.
The rendered output, source, and non-content request parameters below show the parts needed to reproduce or adapt it.

## Rendered image and interactive editor

- [Open the rendered image](<https://hcti.io/v1/image/019fb442-c102-727f-a018-b93f5de243d8>)
- [Open the interactive example](https://htmlcsstoimage.com/examples/invoice-receipt)

## HTML

```html
<div class='wrapper'>
<div class='invoice'>
  <header>
    <h1>Acme Corp</h1>
    <p>Invoice #12345</p>
  </header>

  <section class='details'>
    <p><strong>Billed To:</strong> John Doe<br>
    123 Main St<br>
    Springfield, USA</p>

    <p><strong>Date:</strong> Sept 18, 2025</p>
  </section>

  <table class='items'>
    <thead>
      <tr>
        <th>Description</th>
        <th>Qty</th>
        <th>Unit Price</th>
        <th>Total</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Website Design</td>
        <td>1</td>
        <td>$500.00</td>
        <td>$500.00</td>
      </tr>
      <tr>
        <td>Hosting (12 months)</td>
        <td>1</td>
        <td>$120.00</td>
        <td>$120.00</td>
      </tr>
      <tr>
        <td>Domain Name (1 year)</td>
        <td>1</td>
        <td>$12.00</td>
        <td>$12.00</td>
      </tr>
    </tbody>
  </table>

  <section class='summary'>
    <p><strong>Subtotal:</strong> $632.00</p>
    <p><strong>Tax (10%):</strong> $63.20</p>
    <p class='total'><strong>Total Due:</strong> $695.20</p>
  </section>

  <footer>
    <p>Thank you for your business!</p>
  </footer>
</div>
</div>
```

## CSS

```css
.wrapper{
  font-family: 'Roboto', sans-serif;
  background: #f7f7f7;
  padding: 20px;
}

.invoice {
  min-width: 500px;
  max-width: 600px;
  margin: auto;
  background: #fff;
  padding: 24px;
  border: 1px solid #ddd;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

header {
  border-bottom: 2px solid #333;
  margin-bottom: 20px;
}

header h1 {
  margin: 0;
  font-size: 24px;
}

.details {
  margin-bottom: 20px;
}

.items {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.items th, .items td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.items th {
  background: #f0f0f0;
}

.summary {
  text-align: right;
}

.summary p {
  margin: 0.6em 0;
}

.summary .total {
  border-top: 1px solid #ddd;
  padding-top:8px;    
  font-size: 18px;
  font-weight: bold;
  width: fit-content;
  margin-left: auto
}

footer {
  border-top: 1px solid #ddd;
  text-align: center;
  padding-top: 10px;
  color: #555;
  font-size: 14px;
}
```

## Request parameters

These are the additional non-content parameters used by the example. Combine them with the HTML and CSS above when constructing an API request.

```json
{
  "google_fonts": "Roboto",
  "render_when_ready": false,
  "selector": ".wrapper",
  "timezone": "UTC"
}
```

## Complete TypeScript request (HCTI client)

This is the complete TypeScript request for this example using HCTI client. It includes the HTML, CSS, authentication setup, API options, and response handling needed to reproduce the output.

```typescript
import { HtmlCssToImageClient, CreateHtmlCssImageRequest } from "@html-css-to-image/client";

const client = HtmlCssToImageClient.fromEnv();

const request = new CreateHtmlCssImageRequest({
    html: `<div class='wrapper'>
<div class='invoice'>
  <header>
    <h1>Acme Corp</h1>
    <p>Invoice #12345</p>
  </header>

  <section class='details'>
    <p><strong>Billed To:</strong> John Doe<br>
    123 Main St<br>
    Springfield, USA</p>

    <p><strong>Date:</strong> Sept 18, 2025</p>
  </section>

  <table class='items'>
    <thead>
      <tr>
        <th>Description</th>
        <th>Qty</th>
        <th>Unit Price</th>
        <th>Total</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Website Design</td>
        <td>1</td>
        <td>$500.00</td>
        <td>$500.00</td>
      </tr>
      <tr>
        <td>Hosting (12 months)</td>
        <td>1</td>
        <td>$120.00</td>
        <td>$120.00</td>
      </tr>
      <tr>
        <td>Domain Name (1 year)</td>
        <td>1</td>
        <td>$12.00</td>
        <td>$12.00</td>
      </tr>
    </tbody>
  </table>

  <section class='summary'>
    <p><strong>Subtotal:</strong> $632.00</p>
    <p><strong>Tax (10%):</strong> $63.20</p>
    <p class='total'><strong>Total Due:</strong> $695.20</p>
  </section>

  <footer>
    <p>Thank you for your business!</p>
  </footer>
</div>
</div>`,
    css: `.wrapper{
  font-family: 'Roboto', sans-serif;
  background: #f7f7f7;
  padding: 20px;
}

.invoice {
  min-width: 500px;
  max-width: 600px;
  margin: auto;
  background: #fff;
  padding: 24px;
  border: 1px solid #ddd;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

header {
  border-bottom: 2px solid #333;
  margin-bottom: 20px;
}

header h1 {
  margin: 0;
  font-size: 24px;
}

.details {
  margin-bottom: 20px;
}

.items {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.items th, .items td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.items th {
  background: #f0f0f0;
}

.summary {
  text-align: right;
}

.summary p {
  margin: 0.6em 0;
}

.summary .total {
  border-top: 1px solid #ddd;
  padding-top:8px;    
  font-size: 18px;
  font-weight: bold;
  width: fit-content;
  margin-left: auto
}

footer {
  border-top: 1px solid #ddd;
  text-align: center;
  padding-top: 10px;
  color: #555;
  font-size: 14px;
}`,
    google_fonts: [
        "Roboto",
    ],
    render_when_ready: false,
    selector: ".wrapper",
    timezone: "UTC",
});

const result = await client.createImage(request);
if (result.success) {
    console.log(result.url);
} else {
    console.error(result.error);
}

```

## Other languages and request formats

Open one of these Markdown pages to view the same example as a complete request in another language or client format.

- **TypeScript**
  - [HCTI client](https://htmlcsstoimage.com/examples/invoice-receipt/typescript-client.md) — shown above
  - [fetch](https://htmlcsstoimage.com/examples/invoice-receipt/typescript.md)
- **C#**
  - [HCTI client](https://htmlcsstoimage.com/examples/invoice-receipt/csharp-client.md)
  - [HttpClient](https://htmlcsstoimage.com/examples/invoice-receipt/csharp.md)
- **Python**
  - [requests](https://htmlcsstoimage.com/examples/invoice-receipt/python.md)
- **PHP**
  - [cURL](https://htmlcsstoimage.com/examples/invoice-receipt/php.md)
- **Ruby**
  - [HCTI client](https://htmlcsstoimage.com/examples/invoice-receipt/ruby-client.md)
  - [Net::HTTP](https://htmlcsstoimage.com/examples/invoice-receipt/ruby.md)
- **Go**
  - [net/http](https://htmlcsstoimage.com/examples/invoice-receipt/golang.md)
- **cURL**
  - [cURL](https://htmlcsstoimage.com/examples/invoice-receipt/curl.md)

## Related examples

- [Dog rates social card with SVG background](https://htmlcsstoimage.com/examples/dog-rates-social-card-with-svg-background.md): Social card with a fun SVG background and highlighted text.
- [Instagram post screenshot](https://htmlcsstoimage.com/examples/instagram-post-screenshot.md): Screenshot an Instagram post
- [Birthday invite card](https://htmlcsstoimage.com/examples/birthday-invite-card-email.md): Autogenerated invite graphic for a party.
- [PNG with transparent background](https://htmlcsstoimage.com/examples/png-transparent-background.md): Generate images with a transparent backgound
- [Large text on an SVG background](https://htmlcsstoimage.com/examples/large-text-svg-background.md): Grab attention with large text on a classic background.
- [Twitter Tweet Screenshot](https://htmlcsstoimage.com/examples/twitter-tweet-screenshot.md): Screenshot of a tweet
- [QR Code Badge](https://htmlcsstoimage.com/examples/qr-code-badge.md): Simple, artistic badge with a QR code.
- [Dog rates social card](https://htmlcsstoimage.com/examples/dog-rates-social-card.md): Simple social card example showing highlighted yellow text

## Get started

- [View the full interactive page](https://htmlcsstoimage.com/examples/invoice-receipt)
- [Browse all HTML/CSS examples](https://htmlcsstoimage.com/examples.md)
- [Browse visual template presets](https://htmlcsstoimage.com/templates.md)
- [Read the HTML/CSS to Image API documentation](https://docs.htmlcsstoimage.com/getting-started/using-the-api/)
- [View implementation examples by language](https://docs.htmlcsstoimage.com/example-code/)
- [Read the MCP integration documentation](https://docs.htmlcsstoimage.com/integrations/mcp/)
- [Compare plans and limits](https://htmlcsstoimage.com/pricing.md)

Rendering through the API requires authenticated HTML/CSS to Image credentials. Keep API keys in trusted server-side configuration. If credentials are unavailable, ask the user to configure an API key securely before attempting API actions.