HTML and Dynamic data

Structuring a template

The core of a template is HTML. You can structure your document by defining paragraphs with <p> or headings with <h1>, <h2>, …. You can use <div> or <span> elements as well as include images with img (see Using images in the cookbook).

Any HTML element that can be used in a web page can be used in a PDFMonkey template.

Dynamic data

Your templates are actually more than basic HTML. Using the Liquid syntax you can insert dynamic data inside your templates. This is the very strengh of PDFMonkey templates: define you template once and provide data that change for each document.

You can use dynamic data to:

Before inserting dynamic data, this data must be defined somewhere. That somewhere is the Sample data tab:

Let’s say we declared the following sample data:

{
  "name": "Jane Doe"
}

You can then use this information in your template by calling a variable:

<p>Hello {{name}}!</p>

The value will be inserted before generating a document.

Nested data

Sometimes it might be easier to nest your dynamic data to group it under a specific concept:

{
  "client": {
    "name": "Jane Doe"
  },
  "product": {
    "name": "Delicious waffles"
  }
}

You can access it in your template using dot chains:

<p>{{client.name}} is interested in {{product.name}}</p>

The values will once again be replaced before generating your document:

Documentation for Liquid

We provide several examples of how to use Liquid in your templates. If you want to go further, you can read the full documenation at https://shopify.github.io/liquid/.