Skip to content

Help center

Invoice Generator Documentation

Guides for creating invoices, managing invoice data, and building custom templates.

Customizing Your Invoice Template

Use HTML, CSS, and supported placeholders to create your own invoice design.

What is an Invoice Template?

An invoice template is an HTML file that defines the design and layout of your invoice. You can fully customize it with your own branding, styles, and layout while using special placeholders to insert dynamic invoice data.

How Placeholders Work

Placeholders are special tags inside your HTML that get replaced automatically with your actual invoice data when generating the final invoice. For example:

Template HTML

html
<p>Invoice Number: [[invoice_number]]</p>

When rendered, this becomes:

Rendered HTML

html
<p>Invoice Number: INV-001</p>

Available Placeholders

Here is a complete list of supported placeholders you can use in your HTML template:

  • [[invoice_number]] – Invoice number
  • [[invoice_date]] – Invoice date (formatted)
  • [[payment_due_date]] – Payment due date (formatted)
  • [[customer_name]] – Customer's name
  • [[customer_address]] – Customer's address
  • [[customer_phone]] – Customer's phone
  • [[customer_email]] – Customer's email
  • [[org_name]] – Your organization name
  • [[org_address]] – Your organization address
  • [[org_phone]] – Your organization phone
  • [[org_email]] – Your organization email
  • [[org_authority_name]] – Authorized signatory name
  • [[org_authority_designation]] – Authorized signatory designation
  • [[account_number]] – Bank account number
  • [[account_name]] – Bank account holder name
  • [[bank_name]] – Bank name
  • [[terms_and_conditions]] – Terms and conditions text
  • [[notes]] – Additional invoice notes
  • [[itemtotal]] – Total of item prices before discount
  • [[discount]] – Discount amount
  • [[subtotal]] – Subtotal after discount
  • [[tax_amount]] – Total tax amount
  • [[roundoff]] – Round off value
  • [[grand_total]] – Grand total amount
  • [[grand_total_inwords]] – Grand total in words
  • [[logo_small_src]] – Small logo image source URL
  • [[logo_large_src]] – Large logo image source URL
  • [[currency_symbol]] – Currency symbol (e.g. $ for USD, ₹ for INR)

Item Table Placeholders

For listing multiple items, use a special block between [[items_start]] and [[items_end]]. Your template should include a repeating row template like this:

Repeating item rows

html
<table>
  <thead>
    <tr>
      <th>Item</th>
      <th>Quantity</th>
      <th>Price</th>
      <th>CGST</th>
      <th>SGST</th>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody>
    [[items_start]]
    <tr>
      <td>[[item_name]]</td>
      <td>[[item_quantity]]</td>
      <td>[[item_price]]</td>
      <td>[[item_cgst]]</td>
      <td>[[item_sgst]]</td>
      <td>[[item_amount]]</td>
    </tr>
    [[items_end]]
  </tbody>
</table>

When generating the invoice, all items will be inserted between [[items_start]] and [[items_end]] using the row template inside.

The following placeholders can be used within each repeating item row:

  • [[items_start]] – Marks the start of the repeating line items block
  • [[items_end]] – Marks the end of the repeating line items block
  • [[item_name]] – Item name or description
  • [[item_quantity]] – Quantity of the item
  • [[item_price]] – Unit price of the item
  • [[item_cgst]] – CGST tax amount for the item
  • [[item_sgst]] – SGST tax amount for the item
  • [[item_igst]] – IGST tax amount for the item
  • [[item_amount]] – Total calculated amount for the item

Tips for Designing Your Template

  • Use CSS to style your invoice as you like.
  • Include your logo with [[logo_small_src]] or [[logo_large_src]].
  • Keep the [[items_start]] and [[items_end]] block intact for item listing.
  • Use base-64 encoded values if you want to use images in your template.
  • Test your template by generating sample invoices.

Need Help?

If you have any questions about customizing your template or using placeholders, reach out to us at prince.francis@tociva.com.