> For the complete documentation index, see [llms.txt](https://docs.klai.studio/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.klai.studio/reference/components-overview/misc-elements/aceeditor.md).

# 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"
}
```