Overview

<div class="invoice">
  <header>
    <h1>Invoice #{{invoiceNumber}}</h1>
    <p>Date: {{formatDate date "MMMM D, YYYY"}}</p>
  </header>
  
  <section class="customer">
    <h2>Bill To:</h2>
    <p>{{customer.name}}</p>
    <p>{{customer.address}}</p>
  </section>
  
  <table class="items">
    <thead>
      <tr>
        <th>Item</th>
        <th>Qty</th>
        <th>Price</th>
        <th>Total</th>
      </tr>
    </thead>
    <tbody>
      {{#each items}}
      <tr>
        <td>{{this.name}}</td>
        <td>{{this.quantity}}</td>
        <td>{{currency this.price "USD"}}</td>
        <td>{{currency (multiply this.price this.quantity) "USD"}}</td>
      </tr>
      {{/each}}
    </tbody>
  </table>
  
  <footer>
    <p class="total">Total: {{currency total "USD"}}</p>
  </footer>
</div>

.invoice {
  font-family: 'Inter', sans-serif;
  max-width: 800px;
  margin: 0 auto;
  padding: 40px;
}

header {
  border-bottom: 2px solid #000;
  padding-bottom: 20px;
  margin-bottom: 30px;
}

h1 {
  font-size: 28px;
  margin: 0;
}

.items {
  width: 100%;
  border-collapse: collapse;
  margin: 30px 0;
}

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

.items th {
  background: #f5f5f5;
  font-weight: 600;
}

.total {
  font-size: 24px;
  font-weight: bold;
  text-align: right;
}

{
  "invoiceNumber": "INV-2024-001",
  "date": "2024-12-15",
  "customer": {
    "name": "Acme Corporation",
    "address": "123 Business Ave, Suite 100, San Francisco, CA 94102"
  },
  "items": [
    {"name": "Web Development", "quantity": 40, "price": 150},
    {"name": "UI Design", "quantity": 20, "price": 125},
    {"name": "Consulting", "quantity": 10, "price": 200}
  ],
  "total": 10500
}