# HTML

The HTML element allows you to merge any HTML and inline CSS into your form layout. HTML source data can be in either (or both) the data `model` or the field `scmema`

| Key            | Value(s)   | Type   | Description                                                                                                                                                                                                                                            |
| -------------- | ---------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| type           | html       | string |                                                                                                                                                                                                                                                        |
| html           |            | string | raw HTML. if both a model and `html` code are supplied, the `html` code goes first.                                                                                                                                                                    |
| model          |            | string | raw HTML (VueJS) code                                                                                                                                                                                                                                  |
| dataModelScope | {optional} | string | if defined, the scope of the `model` object within the html will root to this data model path. This is used when you are building things that edit other things and want live data rendering. This is used in the HTML builder page of the admin site. |

### Example

```yaml
// you can use either body or model or both keys for HTML source code

{
  "html": "<h1>This is some HTML!</h1> It will display ahead of the model HTML",
  "model": "mySourceHtml",
  "type": "html",
  "styleClasses": "col-md-12"
},
```

Use of the model key for this element is helpful if you have HTML content that you want to generate in FileMaker and push to the browser. Otherwise, it can be left out entirely and you can build your own HTML elements using the [HTML editor](#html-editor) and [VueJS Template syntax](https://github.com/DelfsEngineering/fm-betterforms/blob/master/guides/html-and-vuejs.md).

## HTML Editor

This powerful element allows you to add custom HTML and [VueJS Template syntax](https://github.com/DelfsEngineering/fm-betterforms/blob/master/guides/html-and-vuejs.md).

#### Opening the HTML Editor

!["Open HTML Editor button"](/files/-Ljraw7c-DEB2IKeYmps)

When using [VueJS Template syntax](https://github.com/DelfsEngineering/fm-betterforms/blob/master/guides/html-and-vuejs.md), you'll see your [development data model](/reference/form-settings/data-model.md) displayed in the preview and can edit it in the Data Model tab.

!["HTML Editor"](/files/tY6HVxzYLM06GqGPJybq)

This makes developing with custom code fast and easy.

{% hint style="info" %}
**Remember:** The HTML editor works wherever there is a "html" key in the schema! This expands beyond the HTML element to [modals](/reference/actions-processor/actions_overview/showmodal.md) and [slots](/reference/components-overview/common/tables2.md#slots) of a [data table](/reference/components-overview/common/tables2.md).
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.klai.studio/reference/components-overview/common/html.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.