When opening the TTA module you will see the following: Here you can see all templates and you can create new ones.

On the top right you can click on the add button.

Here you can fill in a form to create a new template.

After this you can click on a template and it will open up the editor: The toolbar has the following actions (from left to right):

• Edit template properties, edit the format/name ect here
• Preview mode (dropdown), see below for explaination
• Question mark, when hovering over you will have an explanation about the preview mode options
• Align your code (using html-format)
• Save, save the template
• Resizer, resizes the editor + preview window
• Close, close the template editor

The editor on the left allows you to use HTML to style your PDF. The dropdown allows you to switch between Header/Body/Footer/Test input. The header/footer will be repeated for every page.

It also allows you to use LiquidJS for any conditions/loops ect.

The preview mode has 4 modes:

• HTML - preview as webpage
• PDF (Preview) - watermarked, free
• PDF - final version, without watermark
• Code - preview without test input While the HTML and Code refresh the preview instantly, the PDF preview will require a button. The watermarked version is free to generate (check your plan on the limitations). While the final version might charge you depending on your plan.

The test input allows you to define a payload for the "preview" mode. It will allow you to easily see the results of the template that you write. The preview/input will be rerendered on every change

The input on the bottom will expect a JSON object:

In this case the HTML template is: <h1>Hello {{name}}!</h1>

This option allows you to use the data thats being generated by a flow. It allows you to easily (re)use data between templates & development.

The header and footer have support for the following tags:

• date formatted print date
• title document title
• pageNumber current page number
• totalPages total pages in the document And can be used with .

Example: <span class="pageNumber"/>/<span class="totalPages"/>.

Keep in mind that there is no support for rendering images from an url right now.

You can embed images by using the Base64 format, you can use tools like Base64 Guru to convert your image into Base64.

You can use the template in Flows with the TTA operation:

The fields are self describing and allow for the flow tags {{}} to be used for any variables.

You can also generate PDF`s based on templates within Directus Hooks/Endpoints/Operations. This can be done trough globalThis.TTA.

An example usage:

const fileID = await globalThis.TTA.generatePDFFromTemplate({
  template: templateIDHere,
  templatevariables: { variableOne: "A", variableTwo: "B"}
});