# Plain Text / Code Editor

The `aceeditor` element is great for editing HTML, CSS, JSON, or any other type of code in your app. This is the same element that is used by throughout the BetterForms interface.

|           Key |   Value(s)  |            Type           | Description                                                                                                                                                 |
| ------------: | :---------: | :-----------------------: | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
|        `type` | `aceeditor` |          *string*         |                                                                                                                                                             |
|        `lang` |             |          *string*         | code language options: html, javascript, markdown, plain\_text, css, json                                                                                   |
|       `model` |             | *string, object or array* | the field or JSON node of the model used for the source                                                                                                     |
|   `getAsJSON` |  *optional* |         *boolean*         | if true, the model is stringified for editing. This allows you to edit the JSON directly in the MODEL (vs it being stored as a string (all other languages) |
|      `height` |  *optional* |          *string*         | default of 700px else element height can be specified `300px`, `70%` are valid values.                                                                      |
|       `theme` |  *optional* |          *string*         | The theme used in the editor                                                                                                                                |
|    `readOnly` |  *optional* |         *boolean*         | If true, the editor content cannot be edited.                                                                                                               |
|   `foldDepth` |  *optional* |          *number*         | Applies code folding when the editor first loads.                                                                                                           |
| `gutterclick` |  *optional* |         *function*        | Callback fired when the gutter is clicked and the current line can be parsed as a JSON key/value pair.                                                      |

Notes:

* Supported languages in the component include `html`, `javascript`, `markdown`, `plain_text`, `css`, and `json`.
* Built-in themes loaded by BetterForms include `chrome`, `solarized_light`, and `dracula`.
* When `getAsJSON` is `true`, the editor reads and writes the model as parsed JSON rather than a plain string.

## Example

```yaml
// Sample JSON editor ( will put stringified json text into the model field )
{
  "getAsJSON": false,
  "height": "500px",
  "label": "EDIT Some JSON",
  "lang": "json",
  "model": "sourceCode",
  "styleClasses": "col-md-12",
  "type": "aceeditor"
}
```


---

# 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/misc-elements/aceeditor.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.