# TemplateValueSchema

typedef

Describes a value of an HTML element attribute or `textContent`. It allows combining multiple data sources like static values and [`Observable`](module_utils_observablemixin-Observable.md) attributes.

Also see:

* [`TemplateDefinition`](module_ui_template-TemplateDefinition.md) to learn where to use it,
* [`bind`](module_ui_template-Template.md#static-function-bind) to learn how to configure [`Observable`](module_utils_observablemixin-Observable.md) attribute bindings,
* [`render`](module_ui_template-Template.md#function-render) to learn how to render a template,
* [`to()`](module_ui_template-BindChain.md#function-to:ATTRIBUTE) and [`if()`](module_ui_template-BindChain.md#function-if) methods to learn more about bindings.

Attribute values can be described in many different ways:

```typescript
// Bind helper will create bindings to attributes of the observable.
const bind = Template.bind( observable, emitter );

new Template( {
	tag: 'p',
	attributes: {
		// A plain string schema.
		'class': 'static-text',

		// An object schema, binds to the "foo" attribute of the
		// observable and follows its value.
		'class': bind.to( 'foo' ),

		// An array schema, combines the above.
		'class': [
			'static-text',
			bind.to( 'bar', () => { ... } ),

			// Bindings can also be conditional.
			bind.if( 'baz', 'class-when-baz-is-true' )
		],

		// An array schema, with a custom namespace, e.g. useful for creating SVGs.
		'class': {
			ns: 'http://ns.url',
			value: [
				bind.if( 'baz', 'value-when-true' ),
				'static-text'
			]
		},

		// An object schema, specific for styles.
		style: {
			color: 'red',
			'--color': 'red',
			backgroundColor: bind.to( 'qux', () => { ... } )
		}
	}
} );
```

Text nodes can also have complex values:

```typescript
const bind = Template.bind( observable, emitter );

// Will render a "foo" text node.
new Template( {
	text: 'foo'
} );

// Will render a "static text: {observable.foo}" text node.
// The text of the node will be updated as the "foo" attribute changes.
new Template( {
	text: [
		'static text: ',
		bind.to( 'foo', () => { ... } )
	]
} );
```

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

#### Value

`ArrayOrItem<TemplateSimpleValueSchema | NamespacedValue<TemplateSimpleValueSchema>> | Record<string, TemplateSimpleValueSchema>`

---

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