> ## Documentation Index
> Fetch the complete documentation index at: https://docs.pdfnoodle.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Template builder

### What is the template builder?

The Template Builder is your go-to tool for creating reusable templates to generate PDFs and images at scale. With our user-friendly interface, you can build your template in just minutes using a variety of components and AI Agents.

<Success>
  Need help along the way? Check out our [**detailed guide on how to use each component**](https://docs.pdforge.com/knowledge-base/components).
</Success>

### How to start creating my template?

<img src="https://mintcdn.com/pdforge/vhgKnJpK1U2pPKtX/images/platform/how-to-start-creating-my-template-1.png?fit=max&auto=format&n=vhgKnJpK1U2pPKtX&q=85&s=458bfb276e9d3f00920f1b0fb548c115" alt="" width="592" height="424" data-path="images/platform/how-to-start-creating-my-template-1.png" />

Whenever you start a new template, you have two options:

1\. Build from Scratch: Manually add and modify each component to tailor your template exactly the way you want.

2\. Let Our AI Agent Help: Have our AI Agent do the heavy lifting and create your first template for you. 💡

<Success>
  Don’t worry—**if you choose the AI option,** you’ll still be able to edit and fine-tune the template afterward.
</Success>

### How does the template builder work?

The template builder is divided into 5 sections:

* Navbar
* Template details
* Component tree
* Preview Canvas
* Properties layer

<img src="https://mintcdn.com/pdforge/vhgKnJpK1U2pPKtX/images/platform/how-does-the-template-builder-work-1.png?fit=max&auto=format&n=vhgKnJpK1U2pPKtX&q=85&s=d5d4b15d26a95cefbf3ec3e5f7071885" alt="" width="1920" height="1003" data-path="images/platform/how-does-the-template-builder-work-1.png" />

#### Navbar

<img src="https://mintcdn.com/pdforge/vhgKnJpK1U2pPKtX/images/platform/-navbar-1.png?fit=max&auto=format&n=vhgKnJpK1U2pPKtX&q=85&s=d8ea16c82295f588da862b0efc90b683" alt="" width="1655" height="58" data-path="images/platform/-navbar-1.png" />

In the Navbar, you can generate PDF samples, save your template, or cancel your edits. To generate a PDF sample, simply fill out the template’s variables, and you’re all set!

<img src="https://mintcdn.com/pdforge/vhgKnJpK1U2pPKtX/images/platform/-navbar-1.gif?s=b4109f4bdd380cc3c65c24f50cca5e7c" alt="" width="792" height="720" data-path="images/platform/-navbar-1.gif" />

**We recommend using our AI Agent to fill all the variables for you.** 😉

<Success>
  **Generating PDF samples won't impact your plan's usage**, so you can use it how many times you'd like without having to worry about it.
</Success>

#### Template details

<img src="https://mintcdn.com/pdforge/vhgKnJpK1U2pPKtX/images/platform/-template-details-1.png?fit=max&auto=format&n=vhgKnJpK1U2pPKtX&q=85&s=6d34668b84f05938fa6163d617520622" alt="" width="236" height="182" data-path="images/platform/-template-details-1.png" />

On the Template Details screen, you’ll need to provide a template name and a unique template ID. The template ID is used to identify this template during API calls and within our no-code integrations.

#### Component tree

<img src="https://mintcdn.com/pdforge/vhgKnJpK1U2pPKtX/images/platform/-component-tree-2.gif?s=83ba2efee99f12f878a8bc2bdcb67b50" alt="" width="384" height="941" data-path="images/platform/-component-tree-2.gif" />

On the component tree, you'll be able to add new components or re-order, duplicate ou delete In the Component Tree, you can add new components, re-order them, rename, duplicate, or delete components as needed.

<Warning>
  O**nce you delete a component, you can undo this action**, so be careful on this action.
</Warning>

When reordering components, please note that only the Container component accepts child components. All other components can only be moved vertically.

<img src="https://mintcdn.com/pdforge/vhgKnJpK1U2pPKtX/images/platform/-component-tree-3.gif?s=c3139996fb1fee684f71667b6b10e3ab" alt="" width="204" height="192" data-path="images/platform/-component-tree-3.gif" />

<Info>
  **Hint:** If you’re trying to insert a component inside a container, try moving it slightly to the right. This will indicate that it’s indented within the container, rather than appearing below it.
</Info>

#### Preview canvas

<img src="https://mintcdn.com/pdforge/vhgKnJpK1U2pPKtX/images/platform/-preview-canvas-1.gif?s=46ca299cb2e916944074a143832ccdb7" alt="" width="1654" height="886" data-path="images/platform/-preview-canvas-1.gif" />

On the On the Preview Canvas, you’ll see a real-time preview of how your final PDF will look.

<Info>
  You can also edit some information directly on the Canvas, if you're using the Text Component or double-clicking on the HTML component.
</Info>

#### Properties layer

<img src="https://mintcdn.com/pdforge/vhgKnJpK1U2pPKtX/images/platform/-properties-layer-1.gif?s=13bd701e910c281fb9c42a475d26896b" alt="" width="1401" height="880" data-path="images/platform/-properties-layer-1.gif" />

When you click on a component, you’ll gain access to its custom properties in the Properties Layer. Modify any of these properties and see the changes reflected in real time on the Preview Canvas.

<Info>
  To better understand what each property do, you should take a look at the [Components Section.](https://docs.pdforge.com/knowledge-base/components)
</Info>