---
url: https://gudhub.com/docs/gh-elements/code-editor/
title: "Code Editor\n                #"
description: "Code Editor is a gh element that allows to enter, save, and edit code. It is a useful tool for work with code in your application. !Using the code editor The en"
lang: uk
updated: 2026-09-11T20:50:34.931Z
---

# Code Editor [#](https://gudhub.com/docs/gh-elements/code-editor/#code-editor)

**Code Editor** is a gh-element that allows to enter, save, and edit code. It is a useful tool for work with code in your application.

![Using the code editor](https://bitbucket.org/AAtlas/gudhub-documentation/raw/master/Gh_Elements/gh-elements/code-editor-element-use.gif "Entering the code")

The entered code will be highlighted depending on its syntax. This will help you work with the code.

> Please note that this element only supports HTML and JS syntax. And for each of them, you need to use a [different mode](#code-mode).

![Increase the number of lines after adding a code](https://bitbucket.org/AAtlas/gudhub-documentation/raw/master/Gh_Elements/gh-elements/code-editor-lines.gif "Adding lines")

By default, the text editor has 17 lines. But if the code is longer, additional lines will be added.

## Functional Characteristics [#](https://gudhub.com/docs/gh-elements/code-editor/#functional-characteristics)

The main ways to use this element are quite obvious. The **Code Editor** is used to save and edit code. The saved code can be extracted and used in other [automation elements](https://gudhub.com/docs/understanding-gudhub/automation/automation-overview/) or processes. In fact, it copies the classic code editor. So if you know how it works, you won't have any problems using it.

## Element Options [#](https://gudhub.com/docs/gh-elements/code-editor/#element-options)

The code editor element has not a big number of settings that can configure it and all of them are contained in one group.

### Field Settings [#](https://gudhub.com/docs/gh-elements/code-editor/#field-settings)

The only configuration settings of the code editor consist two [standard](https://gudhub.com/docs/understanding-gudhub/gh-elements-structure/setting-overview/) and one additional options.

![Settings of code editor field](https://bitbucket.org/AAtlas/gudhub-documentation/raw/master/Gh_Elements/gh-elements/code-editor-field-settings.jpg "Code editor field settings")

| Name | Description |
| :-- | :-- |
| Code Mode | allows to select the operating mode of the element |

#### **Code Mode** [#](https://gudhub.com/docs/gh-elements/code-editor/#code-mode)

The **Code Editor** can work with two types of code. This element has different work modes for both of those types:

-   HTML
-   JavaScript

After selecting one of the modes, the entered code will be highlighted according to the code syntax.

![Change the mode](https://bitbucket.org/AAtlas/gudhub-documentation/raw/master/Gh_Elements/gh-elements/code-editor-modes.gif "Modes")

This allows you to work comfortably with the code.

## Element Style [#](https://gudhub.com/docs/gh-elements/code-editor/#element-style)

Element style of the code editor does not have any additional options. It can only be configured using [standard settings](https://gudhub.com/docs/understanding-gudhub/gh-elements-structure/setting-overview/). The single interpretation type is shown in [the end of the article](#interpretation).

![Style of code editor element](https://bitbucket.org/AAtlas/gudhub-documentation/raw/master/Gh_Elements/gh-elements/code-editor-element-style.jpg "Code editor element style")

## Filtration [#](https://gudhub.com/docs/gh-elements/code-editor/#filtration)

This element cannot be filtered out.

## Interpretation [#](https://gudhub.com/docs/gh-elements/code-editor/#interpretation)

The only interpretation type allows the element to be displayed the space where the code is entered and where it could be updated.

![Types of code editor interpretation](https://bitbucket.org/AAtlas/gudhub-documentation/raw/master/Gh_Elements/gh-elements/code-editor-interpretation-types.jpg "Code editor interpretation types")

## Value Format [#](https://gudhub.com/docs/gh-elements/code-editor/#value-format)

When the user enters the code, GudHub creates a new file where this code is saved. And exactly the ID of that file is a field value of the code editor element.

Copy

```json
{
    "field_value": "940407"
}
```

All such files are contained in the file list of the application where the element is located.

## Data Model [#](https://gudhub.com/docs/gh-elements/code-editor/#data-model)

The half of properties in the data model cannot be configured. They have a constant default value.

Copy

```json
{
    "data_model": {
        "code_mode": "htmlmixed",
        "interpretation": [],
        "save_file": true,
        "theme": "default"
    }
}
```

| Name | Type | Description |
| :-- | :-- | :-- |
| code\_mode | `string` | _contains selected code mode_ |
| interpretation | `array` | _contains all element interpretation types_ |
| save\_file | `boolean` | _shows whether the file will be saved or not_ |
| theme | `string` | _contains the element theme_ |