Templates

Templates define how your invoices and account statements look when rendered as PDF documents. You build them with HTML, CSS, and Jinja2 syntax — and docs101 renders them directly into pixel-perfect PDFs. Whether you pick a pre-built design from the library or create your own from scratch, you get full control over every detail: fonts, colors, spacing, layout, and content logic.

This means your documents match your brand exactly — no compromises, no "close enough." You control the HTML structure, write your own CSS, and use conditional logic to adapt the output to each invoice automatically.

What Are Templates?

A template is a reusable document design stored in docs101. Each template contains several editable sections:

• Header: Company logo, name, and branding shown at the top of every page
• Invoice Content: The main body — line items table, totals, customer details
• Account Statement Content: An alternative body used when generating account statements
• Footer: Payment terms, bank details, legal notices at the bottom of every page
• CSS: All styling — fonts, colors, spacing, layout
• Variables: JSON metadata that maps data fields (invoice, customer, company, positions) to template placeholders
• Translations: JSON-based translation keys for multi-language support

Template Types

docs101 supports two document types within a single template:

• Invoices: Professional invoices with line items, VAT breakdowns, totals, and payment information
• Account Statements: Customer transaction history with opening/closing balances and running totals

Each template has separate content sections for invoices and account statements, so one template can serve both purposes.

Key Features

Full Design Control

Unlike rigid template builders that limit you to drag-and-drop fields, docs101 gives you direct access to the HTML and CSS behind your documents. This means you can:

• Match your brand exactly — use your corporate fonts, colors, and layout down to the pixel
• Build smart templates — conditionally show or hide sections based on invoice data (e.g., reverse charge notices, discount tiers, VAT breakdowns for mixed tax rates)
• Control page layout — set custom margins, headers, and footers that repeat on every page, with automatic page numbering
• Format numbers your way — dates, currencies, and decimal formats adapt to your company settings
• Support multiple languages — built-in translation system renders the same template in English, German, or any language you configure

Template IDE

The built-in Template IDE provides a three-panel editing interface:

• Variables Sidebar (left): Browse and search available data fields organized by category — click a variable to insert it at the cursor position
• Code Editor (center): Edit HTML and CSS with CodeMirror syntax highlighting, organized into tabs for Header, Content, Footer, Account Statement Content, CSS, and Translations
• Live PDF Preview (right): See a rendered PDF preview that updates when you save changes

Jinja2 Template Syntax

Templates use Jinja2 for dynamic content:

• Variables: {{ company.name }}, {{ invoice.total }}
• Loops: {% for position in positions %}...{% endfor %}
• Conditionals: {% if customer.vat_id %}...{% endif %}
• Translation function: {{ t('invoice_title') }}

Orientation

Templates support both portrait and landscape orientation, selectable when creating or editing a template.

Guide Overview

This section covers everything you need to work with templates:

Choose a Template

Browse the template library, preview designs, and set a default template for your invoices.

Customize a Template

Use the Template IDE to modify HTML structure, CSS styling, insert variables, and work with Jinja2 conditionals and loops.

Template Translations

Add multi-language support using JSON-based translation keys and the t() function.

Create from Scratch

Build a complete template from the ground up — header, content, footer, CSS, variables, and translations.

Coming Soon: More Document Types

Currently, templates cover invoices and account statements. We are actively working on expanding template support to the full transaction lifecycle:

• Credit Notes / Cancellation Invoices — create professionally formatted credit notes that match your invoice design
• Quotes / Proposals — send branded quotes to prospects and convert them into invoices with one click

These additions will let you maintain a consistent visual identity across every document your business sends — from the first quote to the final statement.

Getting Started

If you are new to templates, start with Choose a Template to explore what is available. Then move to Customize a Template to adjust the design to your brand.

For a deep understanding of the template syntax and architecture, go directly to Create from Scratch.

Best Practices

Design

• Keep templates clean and focused on readability
• Use consistent fonts and colors that match your brand identity
• Provide enough whitespace for a professional appearance
• Test the rendered PDF in multiple PDF readers and on print

Code Quality

• Use semantic HTML tags for document structure
• Define reusable CSS classes instead of inline styles
• Use descriptive class names (e.g., .invoice-totals instead of .box1)
• Keep CSS organized by section with comments

Translations

• Translate all user-facing text — do not mix languages in a single document
• Use consistent, descriptive translation key names
• Test with customers in each supported language before deploying

Common Tasks

Task	Guide
Browse and select a template	Choose a Template
Change colors, fonts, or layout	Customize a Template
Add multi-language support	Template Translations
Build a custom design from scratch	Create from Scratch

---

Ready to get started? Begin with Choose a Template and explore what is possible.