FoxCLM

Appearance

Invoice Designer ​

The designer is a drag-drop tool for controlling exactly how your invoices look. It's the same designer used for payroll statements, expense reports, and payment reports.

Opening the designer ​

From the invoice editor, click Design to open the layout canvas.

Fields you can drop ​

The sidebar groups fields into categories:

Company info

  • Company name, logo, address, phone, email, website
  • Pulled from your Business Profile (Settings -> Business Profile)

Invoice data

  • Invoice number, order number, issue date, due date
  • Client name, address, email (when one or more clients are linked)

Line items table

  • Configurable table with column picker: text, description, start/end dates, duration, quantity, rate, amount
  • Groupable by client, date, or custom field

Totals

  • Subtotal, discount, tax, total, balance due

Custom fields

  • Any invoice custom fields you've defined

Visual elements

  • Text labels (free-form text)
  • Images (upload a logo, stamp, or decorative image)
  • Signatures (signature blocks for sign-off)
  • Watermarks (semi-transparent background text)
  • Page numbers and totals
  • Dividers and spacers

Placing fields ​

Drag a field from the sidebar to the canvas. Once placed:

  • Click to select it
  • Drag to move
  • Resize from the corners
  • Use the inspector panel to set font, colour, alignment, padding

Formula columns ​

Line item columns can be computed. Click a column header, pick Formula, and enter an expression like:

quantity * rate * 1.1

Formulas support basic arithmetic (+, -, *, /) and reference any line item field by name.

Styling ​

Global style:

  • Primary colour (headings and accents)
  • Font family and base size
  • Page margins
  • Paper size (A4, Letter, or custom)

Per-field style:

  • Colour, font size, weight
  • Background colour
  • Border
  • Alignment

AI restyle ​

Click AI Restyle to have DeepSeek regenerate the visual layout while keeping all your data intact. Describe the style you want ("clean minimalist", "bold gradient header", "classic serif") and FoxCLM generates a new layout for review.

HTML sandbox ​

Prefer to write raw HTML and CSS? Click Edit HTML. The template is a standard HTML document with placeholders for data interpolation (e.g. invoice number, client name) and repeating blocks for line items.

Example placeholders:

html
<h1>Invoice {{invoice.number}}</h1>
<p>For {{client.name}}</p>

<!-- Repeat over each line item -->
{{#line_items}}
  <tr>
    <td>{{text}}</td>
    <td>{{amount}}</td>
  </tr>
{{/line_items}}

The sandbox shows a live preview in an iframe. You have full control over layout, print styles, and page breaks.

Saving the design ​

Two save options:

  • Save to this invoice - applies only to this invoice
  • Save as template - adds it to your template library for future invoices (see Templates)

Reusing across document types ​

The designer also powers:

  • Payroll statements - for staff payroll payouts
  • Expense reports - for expense summaries
  • Payment receipts - for standalone receipts

Each has its own set of data fields, but the canvas, tooling, and template library are shared.

Next steps ​

FoxCLM Documentation