# TemplateDefinition

typedef

A definition of the [`Template`](module_ui_template-Template.md). It describes what kind of node a template will render (HTML element or text), attributes of an element, DOM event listeners and children.

Also see:

* [`TemplateValueSchema`](module_ui_template-TemplateValueSchema.md) to learn about HTML element attributes,
* [`TemplateListenerSchema`](module_ui_template-TemplateListenerSchema.md) to learn about DOM event listeners.

A sample definition on an HTML element can look like this:

```typescript
new Template( {
	tag: 'p',
	children: [
		{
			tag: 'span',
			attributes: { ... },
			children: [ ... ],
		},
		{
			text: 'static–text'
		},
		'also-static–text',
	],
	attributes: {
		class: TemplateValueSchema,
		id: TemplateValueSchema,
		style: TemplateValueSchema

		// ...
	},
	on: {
		'click': TemplateListenerSchema

		// Document.querySelector format is also accepted.
		'keyup@a.some-class': TemplateListenerSchema

		// ...
	}
} );
```

A [`View`](module_ui_view-View.md), another [`Template`](module_ui_template-Template.md) or a native DOM node can also become a child of a template. When a view is passed, its [`element`](module_ui_view-View.md#member-element) is used:

```typescript
const view = new SomeView();
const childTemplate = new Template( { ... } );
const childNode = document.createElement( 'b' );

new Template( {
	tag: 'p',

	children: [
		// view#element will be added as a child of this <p>.
		view,

		// The output of childTemplate.render() will be added here.
		childTemplate,

		// Native DOM nodes are included directly in the rendered output.
		childNode
	]
} );
```

An entire [`ViewCollection`](module_ui_viewcollection-ViewCollection.md) can be used as a child in the definition:

```typescript
const collection = new ViewCollection();
collection.add( someView );

new Template( {
	tag: 'p',

	children: collection
} );
```

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-ui/src/template.ts#L1671)

#### Value

`string | Template | TemplateElementDefinition | TemplateTextDefinition`

---

Full index of the CKEditor 5 API reference: [llms.txt](llms.txt)