> 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/v1/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                                                                                                                                |

TODO add support for options {}

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