---
title: "au-widget-html/IHtmlConfig | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-html.IHtmlConfig/"
---

# au-widget-html/IHtmlConfig

> Provides properties for the `html` widget.

## Interfaces

### IHtmlConfig

You can use these properties in **params** of the `AuWidgetHtml` class.
```json
{
  "widgets": [
    {
      "name": "data-based",
      "type": "html",
      "title": "HTML with data",
      "params": {
        "data": [
          {
            "title": "Color",
            "value": "Space Gray"
          },
          {
            "title": "Shape",
            "value": "Rounded Rect"
          }
        ],
        "template": {
          "<>": "div",
          "html": [
            {
              "<>": "span",
              "text": "${title}: ",
              "style": "font-weight: bold"
            },
            {
              "<>": "span",
              "text": "${value}"
            }
          ]
        }
      }
    }
  ]
}
```
This will result in:
``` html
<div>
    <span style="font-weight: bold">Color: </span>
    <span>Space Gray</span>
</div>
<div>
    <span style="font-weight: bold">Shape: </span>
    <span>Rounded Rect</span>
</div>
```

#### Properties

##### data?

```ts
optional data?: any;
```

The content to display.

##### template

```ts
template: 
  | ITemplateConfig
  | ITemplateConfig[];
```

A markup template to format the content.

***

### ITemplateConfig

Provides markup elements to format an HTML page.

#### Properties

##### \<\>?

```ts
optional <>?: string;
```

A nested element.

##### class?

```ts
optional class?: string;
```

A CSS class.

##### html?

```ts
optional html?: ITemplateConfig;
```

An inner HTML code.

##### id?

```ts
optional id?: string;
```

An ID of a DOM element.

##### style?

```ts
optional style?: string;
```

An inline style.

##### text?

```ts
optional text?: string;
```

A text node.