# Interface: IHtmlConfig

Provides properties for the `html` widget.

You can use these properties in **params** of the [AuWidgetHtml](../classes/auwidgethtml.md) class.
```
{
  "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>
```

## Hierarchy

* **IHtmlConfig**

## Index

### Properties

* [data](ihtmlconfig.md#optional-data)
* [template](ihtmlconfig.md#template)

## Properties

### `Optional` data

• **data**? : *Array‹any› | any*

The content to display.

___

###  template

• **template**: *Array‹[ITemplateConfig](itemplateconfig.md)› | [ITemplateConfig](itemplateconfig.md)*

A markup template to format the content.