Editors

HTML Template Editor

This page will guide you through the process of creating a PDF template using our visual HTML editor. After reading this documentation, you'll be able to design an HTML template with custom styles and fonts as well as dynamic content using Twig templating.

Note

This documentation covers the most common Twig features. For a complete reference, check out the official Twig documentation.

Create a New Template

To create a new template, log in to your account and go to the "Templates" page. Here you can create a new template or edit an existing one. Click on the "Create template" and select "Blank HTML Template" to start from scratch.

Styles and Fonts

To add custom styles and fonts to your template, you can use standard HTML and CSS. You can include inline styles or link to external stylesheets. For example, you can use the following code to add a custom font to your template:

<html>
  <head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
    <style>
      body {
        font-family: "Open Sans"
      }
    </style>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

Dynamic Content

To include dynamic content in your template, you can use Twig variables. Variables in Twig are wrapped in double curly braces. For example, if you want to display a name, you can add it like this: {{ name }}. You can also access nested properties of an object using dot notation. For example, if you have a user object with an email property, you can access it using {{ user.email }}.

Common object properties you can access include:

Basic info: id, name, title, description, type, status
Contact info: email, phone, address
Business data: price, amount, currency, qty, total
Dates and URLs: date, url
Collections: items, data

<html>
  <body>
    <h1>{{ title }}</h1>
    <p>Status: {{ status }}</p>
    <p>Total Amount: {{ amount }} {{ currency }}</p>

    <h2>Contact Information</h2>
    <p>Email: {{ email }}</p>
    <p>Phone: {{ phone }}</p>
    <p>Address: {{ address }}</p>
  </body>
</html>

Control Structures

Loops

To display a list of items in your template, you can use Twig's for loop syntax:

<table>
  <thead>
    <tr>
      <th>Item Name</th>
      <th>Quantity</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    {% for item in items %}
      <tr>
        <td>{{ item.name }}</td>
        <td>{{ item.qty }}</td>
        <td>{{ item.price }}</td>
      </tr>
    {% endfor %}
  </tbody>
</table>

Conditional Blocks

You can include conditional blocks using if, else, and endif:

{% if status == 'paid' %}
  <div class="paid">Payment received</div>
{% else %}
  <div class="unpaid">Payment pending</div>
{% endif %}

{% if total > 1000 %}
  <div class="large-order">Large order detected!</div>
{% endif %}

With Blocks

Use with blocks to create a new variable scope:

{% with %}
    {% set foo = 42 %}
    {{ foo }} {# will output 42 #}
{% endwith %}
{{ foo }} {# will not be available #}

Filters

Twig provides many filters to modify variables. Here are the available filters:

Text Formatting

{{ name|upper }}           {# Convert to uppercase #}
{{ name|lower }}           {# Convert to lowercase #}
{{ name|capitalize }}      {# Capitalize first letter #}
{{ name|title }}          {# Capitalize Each Word #}
{{ content|trim }}        {# Remove whitespace #}
{{ content|nl2br }}       {# Convert newlines to <br> #}
{{ content|spaceless }}   {# Remove whitespace between HTML tags #}

Number Formatting

{{ price|number_format(2, '.', ',') }}   {# Format with 2 decimals #}
{{ number|round }}                       {# Round number #}
{{ number|abs }}                         {# Absolute value #}
{{ amount|currency }}                    {# Format as currency #}

Date Formatting

{{ date|date('Y-m-d') }}     {# Format date #}
{{ now()|date('H:i:s') }}    {# Current time #}

Array Operations

{{ array|length }}           {# Array length #}
{{ array|first }}           {# First element #}
{{ array|last }}            {# Last element #}
{{ array|reverse }}         {# Reverse array #}
{{ array|keys }}            {# Get array keys #}
{{ array|sort }}            {# Sort array #}
{{ array|merge(other) }}    {# Merge arrays #}
{{ array|join(', ') }}      {# Join array elements #}
{{ array|column('name') }}  {# Extract column from array #}
{{ array|batch(3) }}        {# Split array into batches #}

Data Transformation

{{ data|json_encode }}      {# Convert to JSON #}
{{ url|url_encode }}       {# URL-encode string #}
{{ "Hello %s"|format(name) }} {# Printf-style formatting #}

Math Operations

{{ max(1, 2, 3) }}         {# Maximum value #}
{{ min(1, 2, 3) }}         {# Minimum value #}
{{ random(1, 100) }}       {# Random number #}

Default Values

{{ user.name|default('Guest') }}  {# Use default if null #}

Custom Filters

Sum and Average

{{ items|sum('price') }}     {# Sum of prices #}
{{ items|avg('rating') }}    {# Average of ratings #}

QR Codes

{{ url|qrcode }}            {# Generate QR code with default size #}
{{ url|qrcode(300) }}       {# Generate QR code with custom size #}