> For the complete documentation index, see [llms.txt](https://normal-tangerine8609.gitbook.io/html-widget/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://normal-tangerine8609.gitbook.io/html-widget/template/mapping-validation-and-updating.md).

# Mapping

Mapping - the validation of attributes and styles

### Mapping

```javascript
const tagName = {
  mapping: {},
  async render(template, styles, attrs, innerText) {
    await template(``);
  },
};
```

The mapping object defines the valid attributes, valid styles, and their types. Before the render function is run, the attributes and styles will all be validated using the mapping object. This ensures that in case of a wrong type, a useful error will appear instead of a difficult scriptable error. The object should have the camelCase attribute or property names leading to the type of the valid values (see [types](/html-widget/about/types.md)) or an array of the types.

Here is an example of the mapping JSON used for the `<stack>` element.

```json
{
  background: ["gradient", "image", "colour"],
  spacing: "posInt",
  url: "url",
  padding: "padding",
  borderColor: "colour",
  borderWidth: "posInt",
  size: "size",
  cornerRadius: "posInt",
  alignContent: "alignContent",
  layout: "layout"
}
```
