Skip to main content
The Fileloom Template Editor is a powerful visual environment for creating PDF templates. Access it by clicking any template or creating a new one from the Templates page.

​
Editor Layout

The template editor consists of three main areas:
AreaDescription
Settings PanelTemplate name, output settings, paper configuration (left side)
Code TabsHTML, CSS, and Test Data editors (center)
Live PreviewReal-time PDF preview (right side)

​
Settings Panel

The left panel contains template configuration:
  • Template Name — Identifying name for the template
  • Output Name — Dynamic filename pattern (supports Handlebars)
  • Print Background — Include background colors/images
  • Orientation — Portrait or Landscape
  • Paper Size — A4, Letter, Legal, and more
  • Margins — Top, right, bottom, left (in millimeters)
  • Header/Footer — Enable and configure page headers/footers
See Settings for detailed configuration options.

​
Code Tabs

The editor provides three tabs for template content:

​
HTML Tab

Write your template markup with Handlebars syntax: 
<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>

​
CSS Tab

Style your template with CSS: 
.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;
}
CSS is automatically injected into your HTML. You don’t need to add <style> tags — just write pure CSS.

​
Test Data Tab

Enter sample JSON to test your template: 
{
  "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
}

​
Live Preview

The right panel shows a real-time preview of your PDF:
  • Automatic Updates — Preview refreshes as you type
  • Actual Rendering — Uses the same Handlebars engine as the API
  • Page Simulation — Shows background, headers, and footers
  • Zoom Controls — Zoom in/out to inspect details
The preview uses the same rendering engine as the API, so what you see is exactly what you’ll get.

​
Auto-Save & Publishing

​
Auto-Save (Drafts)

Your work is automatically saved as a draft:
  • Changes save every few seconds
  • “Draft” indicator shows unsaved changes
  • Drafts are not available via API

​
Publishing

Click Publish to make your template available via API:
  • Creates a new version
  • Previous versions are preserved
  • Published templates can be used immediately
See Version History for version management.

​
Next Steps

Settings

Configure paper size, margins, and output options

Headers & Footers

Add page numbers and repeated content

Version History

Manage template versions

Handlebars Basics

Learn template syntax