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.

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>

In this example, we are downloading the "Open Sans" font from Google Fonts and applying it to the entire document.

Dynamic Content

To include dynamic content in your template, you can use variables. Variables are placeholders that will be replaced with actual data when generating the PDF. You can define variables by prefixing the variable name with a percent sign and wrapping it in curly braces. For example, if you want to display a name, you can add a variable named "name" to your template 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}.

<html>
  <body>
    <h1>Hello, {%name}!</h1>

    <p>Your email address is: {%user.email}</p>
  </body>
</html>

You can also use variables in HTML attributes, such as the src attribute of an image tag:

<html>
  <body>
    <img src="{%avatar_url}" alt="User Avatar">
  </body>
</html>

Loops

If you want to display a list of items in your template, you can use loops. Loops allow you to repeat a section of your template for each item in a list. You can define a loop by using the special <loop> tag. For example, if you have a list of items, you can use the following code to display each item in a table:

<html>
  <body>
    <table>
      <thead>
        <tr>
          <th>Item Name</th>
          <th>Quantity</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
        <loop on="%items" as="%item">
          <tr>
            <td>{%item.name}</td>
            <td>{%item.qty}</td>
            <td>{%item.price}</td>
          </tr>
        </loop>
      </tbody>
    </table>
  </body>
</html>

In this example, the <loop> tag iterates over the items list and creates a new table row for each item. Inside the loop, you can access the current item using the item variable and access its properties using dot notation.

Warning

Variables used in special tags (loop, if, unless) must not be wrapped in curly braces because the loop tag already handles the variable evaluation. Curly braces are only used to output the variable's value.

Conditional Blocks

You can also include conditional blocks in your template to show or hide content based on certain conditions. You can define a conditional block using the special <if> and <unless> tags. For example, if you want to display a message only if a certain condition is met, you can use the following code:

<html>
  <body>
    <if condition="%show_message">
      <p>This message will only be displayed if the "show_message" variable is true.</p>
    </if>

    <if condition="%show_message == 'yes'">
      <p>This message will only be displayed if the "show_message" variable is equal to 'yes'.</p>
    </if>

    <if condition="%a + %b > 10">
      <p>This message will only be displayed if the sum of "a" and "b" is greater than 10.</p>
    </if>

    <unless condition="%hide_message">
      <p>This message will only be displayed if the "hide_message" variable is false.</p>
    </unless>
  </body>
</html>

In this example, the <if> and <unless> tags check the value of the specified variable and display the content inside the block if the condition is met. Every variable must be wrapped in curly braces to be evaluated, and you can use comparison operators such as ==, >, <, >=, <=, and !=.

Helper Functions

You can use helper functions to format and manipulate data in your template. Helper functions are predefined functions that you can use to perform common tasks such as formatting and calculating values. You can use helper functions by wrapping the function name and its arguments in curly braces and prefixing it with an equal sign. Here are some examples of how to use helper functions:

<html>
  <body>
    <p>The sum of all items price: {=SUM(%items, 'price')}</p>
    <p>The average of all items price: {=AVG(%items, 'price')}</p>
    <p>Rounded number: {=ROUND(%amount, 2)}</p>
    <p>Formatted date: {=DATE(%date, 'Y-m-d')}</p>
    <p>Uppercase: {=UPPER(%name)}</p>
    <p>Lowercase: {=LOWER(%name)}</p>
    <p>Capitalize: {=CAPITALIZE(%name)}</p>
  </body>
</html>

QR Codes

You can also include QR codes in your template to generate dynamic QR codes based on variables. You can define a QR code by using the special <qr-code> tag. For example, if you want to display a QR code with a URL, you can use the following code:

<html>
  <body>
    <qr-code content="{url}" size="100"></qr-code>
  </body>
</html>

The <qr-code> tag accepts three attributes: data, width and shape. The data attribute is the content of the QR code, and the width attribute is the width and height of the QR code in pixels. The shape attribute is optional and can be set to "square" or "dot" to change the shape of the QR code.

Important

Special tags are custom HTML tags and must not be self-closed. You should always use an opening and closing tag for special tags. <qr-code data="123" /> will not work, you should use <qr-code data="123"></qr-code> instead.

Charts (using Chart.js)

You can also include charts in your template to visualize data. You can define a chart by using the special <chart-js> tag. For example, if you want to display a bar chart with some data, you can use the following code:

<html>
  <body>
    <chart-js
        type="bar"
        :data="{
            labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
            datasets: [{
                label: '# of Votes',
                data: [12, 19, 3, 5, 2, 3],
                borderWidth: 1
            }]
        }"
        :options="{
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }"
    ></chart-js>
  </body>
</html>

The <chart-js> tag accepts three attributes: type, data and options. You can read more about the available chart types and the data and options formats in the Chart.js documentation.

You can also use variables to define the chart data and options. For example, you can use the following code to display a bar chart with dynamic data:

<html>
  <body>
    <!-- Send the entire data object -->
    <chart-js type="bar" :data="{=JSON(%data)}"></chart-js>

    <!-- Only part of the data object -->
    <chart-js
        type="bar"
        :data="{
            labels: {=JSON(%labels)},
            datasets: [
                { label: 'Sales', data: {=JSON(%sales)}
            }]
        }"
    ></chart-js>
  </body>
</html>

In this example, the data attribute is set to a JSON object that is generated by the JSON helper function. The JSON function converts the variable value to a JSON string, which is then parsed by the chart component.