---
title: "Template Definition"
slug: "template-definition"
updated: 2025-02-13T13:09:01Z
published: 2025-02-13T13:09:01Z
canonical: "learn.servitly.com/template-definition"
---

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

# Template Definition

The content of the page can be defined using templates, within which you can place widgets that will then load and display the data.

A template is based on HTML and uses Angular as rendering framework. Servitly provides a visual editor helping you in defining templates without coding.

## Creating a Template

To add a new *Template*, you should:

1. Enter the *Interfaces / Templates* page.
2. Select whether you need to create a General template or a Thing Definition specific template.
3. In case of Thing Definition, select the target *Thing Definition*.
4. Press the *Add Template* button.
5. Provide the template name.
6. Press the Save button.

![](https://cdn.document360.io/6759e9c9-3ce3-49df-965a-7231d2d9a10a/Images/Documentation/image(233).png?sv=2026-02-06&spr=https&st=2026-10-16T18%3A02%3A12Z&se=2026-10-16T19%3A02%3A12Z&sr=c&sp=r&sig=wiy4QUjaSZjCSEtnI67E6xhDdy0ZA1Y0FTuWrYLejx8%3D)

The name of the template must not contain spaces nor special characters, and once saved it cannot be changed.

## Editing a Template

To edit a template, you can use the Servitly Visual Editor, which is composed by:

- **Design View**: a synthetic representation of the template, that you can edit without coding.
- **Code View**: a text editing area, where you can edit the source code of the template and do everything you want.

Note that custom content may not be recognized by the Design View; in this case a gray box is displayed, and you must keep using the Code View to edit this item.

For more details about editing templates, refer to the [Template Editor](/docs/template-editor) article.

## Override a Template

In the template list of a thing definition, you can see all the templates defined for that thing definition, as well as all the templates recursively inherited from the super thing definition. If necessary, you can override an inherited template to customize the page content for the specific thing definition.

![](https://cdn.document360.io/6759e9c9-3ce3-49df-965a-7231d2d9a10a/Images/Documentation/image(661).png?sv=2026-02-06&spr=https&st=2026-10-16T18%3A02%3A12Z&se=2026-10-16T19%3A02%3A12Z&sr=c&sp=r&sig=wiy4QUjaSZjCSEtnI67E6xhDdy0ZA1Y0FTuWrYLejx8%3D)

You can also override templates provided by installed [components](/docs/components) of type *Template*. In the list you can recognize these special templates in a different way, the row is gray and on the right side you can see the inheritance icon with the name of the element that provides the template, for example *Connection (Component)*.

![](https://cdn.document360.io/6759e9c9-3ce3-49df-965a-7231d2d9a10a/Images/Documentation/image(250).png?sv=2026-02-06&spr=https&st=2026-10-16T18%3A02%3A12Z&se=2026-10-16T19%3A02%3A12Z&sr=c&sp=r&sig=wiy4QUjaSZjCSEtnI67E6xhDdy0ZA1Y0FTuWrYLejx8%3D)

Note that if you choose to overwrite a component template, you will lose any updates or bug fixes made to the component, but you can restore the default template at any time.

![](https://cdn.document360.io/6759e9c9-3ce3-49df-965a-7231d2d9a10a/Images/Documentation/image(251).png?sv=2026-02-06&spr=https&st=2026-10-16T18%3A02%3A12Z&se=2026-10-16T19%3A02%3A12Z&sr=c&sp=r&sig=wiy4QUjaSZjCSEtnI67E6xhDdy0ZA1Y0FTuWrYLejx8%3D)