---
url: https://gudhub.com/docs/gh-elements/json-editor/
title: "JSON Editor\n                #"
description: "JSON Editor is a gh element that allows enter, edit, and save any JSON code. The current element provides users a full fledged editor for work this JSON. It all"
lang: uk
updated: 2026-09-08T15:54:52.028Z
---

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

**JSON Editor** is a gh-element that allows enter, edit, and save any JSON code.

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

The current element provides users a full-fledged editor for work this JSON. It allows you to create or paste the document and save where all entered code, edit, filter, and copy it.

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

This element have no field value.

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

JSON editor has only one group of settings.

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

This is a group that consists of [standard options](https://gudhub.com/docs/understanding-gudhub/gh-elements-structure/setting-overview/) and one additional option.

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

| Name | Description |
| :-- | :-- |
| Mode | allows to select the mode of the editor |

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

The JSON editor has four modes. They have different properties.

-   Tree
    
    ![Tree mode of JSON editor](https://bitbucket.org/AAtlas/gudhub-documentation/raw/master/Gh_Elements/gh-elements/json-editor-tree.jpg "Tree mode")
    
-   Form
    
    ![Form mode of JSON editor](https://bitbucket.org/AAtlas/gudhub-documentation/raw/master/Gh_Elements/gh-elements/json-editor-form.jpg "Form mode")
    
-   Code
    
    ![Code mode of JSON editor](https://bitbucket.org/AAtlas/gudhub-documentation/raw/master/Gh_Elements/gh-elements/json-editor-code.jpg "Code mode")
    
-   Text
    
    ![Text mode of JSON editor](https://bitbucket.org/AAtlas/gudhub-documentation/raw/master/Gh_Elements/gh-elements/json-editor-text.jpg "Text mode")
    

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

The style of the JSON editor is customizable using the [standard options](https://gudhub.com/docs/understanding-gudhub/gh-elements-structure/setting-overview/). Also, it has a few [interpretation types](#interpretation) in this set of options.

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

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

Despite its look, the JSON editor has a small data model.

Copy

```json
{
    "data_model": {
        "interpretation": [],
        "mode": "text"
    }
}
```

| Name | Type | Description |
| :-- | :-- | :-- |
| interpretation | `array` | _contains all interpretation types_ |
| mode | `string` | _contains current mode of the editor_ |

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

This element cannot be used for item filtration.

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

There are only two types of interpretation to display the editor:

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

### JSON [#](https://gudhub.com/docs/gh-elements/json-editor/#json)

This type allows to display the element as a space for entering and editing JSON code. This is a full-fledged editor with all the buttons available to work with the code.

### Default [#](https://gudhub.com/docs/gh-elements/json-editor/#default)

This is the interpretation type that displays the icon instead of full editor.