diff --git a/docs/en_US/editgrid.rst b/docs/en_US/editgrid.rst
index 37c462e1b..749ba2c14 100644
--- a/docs/en_US/editgrid.rst
+++ b/docs/en_US/editgrid.rst
@@ -107,6 +107,86 @@ properties of the geometries directly in map, just click the specific geometry:
     - *Internet access:* An internet connection is required for the Geometry Viewer
       to function correctly.
 
+
+**JSON Data Editor**
+
+A built in json editor is provided for *JSON/JSONB Data*.Double clicking on json/jsonb
+data type cell in data grid will open JSON Editor.Editor provides different mode to
+view and edit json data.
+
+
+.. image:: images/json_editor_modes.png
+    :alt: Json Editor
+    :align: center
+
+*Code Mode*:
+Provides way to format & compact json data.Also provides ability to repair json data
+by fixing quotes and escape characters, removing comments and JSONP notation and
+turn JavaScript objects into JSON.
+
+*Tree Mode*:
+Enabled to change, add, move, remove, and duplicate fields and values.Provides ability
+to searh & hilight data.
+
+*Form Mode*:
+Allows only to edit values in json data there by providing ability to keep data structure
+unchanged while editing.
+
+*Preview Mode*:
+Provides ability to check data before saving and also shows size of current json data.
+Format and compact json data as well.
+
+
+*Editor Toolbar*
+
+Different options are provided to manipulate json data.
+
+Code/Preview mode:
+
+.. image:: images/json_editor_code_preview_tool_bar.png
+    :alt: Json Editor Code/Preview mode Tool Bar
+    :align: center
+
+
+Tree/Form mode:
+
+.. image:: images/json_editor_tree_form_mode_tool_bar.png
+    :alt: Json Editor Tree/Form mode Tool Bar
+    :align: center
+
+
+.. table::
+   :class: longtable
+   :widths: 1 3 2
+
+   +----------------------+----------------------------------------------------------------------------------------+---------------------------+
+   | Icon                 | Behavior                                                                               | Available in mode         |
+   +======================+========================================================================================+===========================+
+   | *Format Json*        | Click to *Format Json* format json data with proper indentation.                       | Code, Preview             |
+   +----------------------+----------------------------------------------------------------------------------------+---------------------------+
+   | *Compact Json*       | Click to *Compact Json* get compacted json data.                                       | Code, Preview             |
+   +----------------------+----------------------------------------------------------------------------------------+---------------------------+
+   | *Sort*               | Click to *Sort* icon to set sorting criteria for the data using file values.           | Code, Preview, Tree       |
+   +----------------------+----------------------------------------------------------------------------------------+---------------------------+
+   | *Transform*          | Click to *Transform*  to filter data  using JSME query language.                       | Code, Preview, Tree       |
+   +----------------------+----------------------------------------------------------------------------------------+---------------------------+
+   | *Undo*               | Click to *Undo* to undo last action performed on data .                                | Code, Preview, Tree, From |
+   +----------------------+----------------------------------------------------------------------------------------+---------------------------+
+   | *Redo*               | Click to *Redo* to repat last action performed on data .                               | Code, Preview, Tree, From |
+   +----------------------+----------------------------------------------------------------------------------------+---------------------------+
+   | *Mode*               | Click to *Mode* dropdown to change dipaly mode of editor.Different modes avaialble     | Code, Tree, From, Preview |
+   |                      | are Code, Preview, Tree, From.                                                         |                           |
+   +----------------------+----------------------------------------------------------------------------------------+---------------------------+
+   | *Expand All*         | Click to *Expand All* to expand json data.                                             | Tree, From                |
+   +----------------------+----------------------------------------------------------------------------------------+---------------------------+
+   | *Collapse All*       | Click to *Redo* to collapse json data.                                                 | Tree, From                |
+   +----------------------+----------------------------------------------------------------------------------------+---------------------------+
+   | *Search Box*         | Enter partial/complete string to search in data.                                       | Tree, From                |
+   +----------------------+----------------------------------------------------------------------------------------+---------------------------+
+
+
+
+
 Sort/Filter options dialog
 **************************
 
diff --git a/docs/en_US/images/json_editor_code_preview_tool_bar.png b/docs/en_US/images/json_editor_code_preview_tool_bar.png
new file mode 100644
index 0000000000000000000000000000000000000000..003605772e81cf1e6fb88de636267123612481c7
GIT binary patch
diff --git a/docs/en_US/images/json_editor_modes.png b/docs/en_US/images/json_editor_modes.png
new file mode 100644
index 0000000000000000000000000000000000000000..964e3725e53b4c0ff2e77aa9e016abcaab4e7e0e
GIT binary patch
diff --git a/docs/en_US/images/json_editor_tree_form_mode_tool_bar.png b/docs/en_US/images/json_editor_tree_form_mode_tool_bar.png
new file mode 100644
index 0000000000000000000000000000000000000000..47b18c1852b2cf37b8b923cf919f7cdc9d0d3a4d
GIT binary patch
diff --git a/web/package.json b/web/package.json
index a3cd1de72..7fa2f7c3f 100644
--- a/web/package.json
+++ b/web/package.json
@@ -100,6 +100,7 @@
     "jquery-contextmenu": "^2.9.2",
     "jquery-ui": "^1.12.1",
     "json-bignumber": "^1.0.1",
+    "jsoneditor": "^9.5.1",
     "karma-coverage": "^2.0.3",
     "leaflet": "^1.5.1",
     "lodash": "4.*",
diff --git a/web/pgadmin/feature_tests/view_data_dml_queries.py b/web/pgadmin/feature_tests/view_data_dml_queries.py
index f26894aba..6e38036ce 100644
--- a/web/pgadmin/feature_tests/view_data_dml_queries.py
+++ b/web/pgadmin/feature_tests/view_data_dml_queries.py
@@ -241,13 +241,34 @@ CREATE TABLE public.nonintpkey
             else:
                 ActionChains(self.driver).send_keys(value). \
                     send_keys(Keys.ENTER).perform()
-        elif cell_type in ['text', 'json', 'text[]', 'boolean[]']:
+        elif cell_type in ['text', 'text[]', 'boolean[]']:
             text_area_ele = self.page.find_by_css_selector(
                 QueryToolLocators.row_editor_text_area_css)
             text_area_ele.clear()
             text_area_ele.click()
             text_area_ele.send_keys(value)
-
+            # Click on editor's Save button
+            self.page.find_by_css_selector(
+                QueryToolLocators.text_editor_ok_btn_css).click()
+        elif cell_type in ['json', 'jsonb']:
+            jsoneditor_area_ele = self.page.find_by_css_selector(
+                QueryToolLocators.json_editor_text_area_css)
+            if not value == "":
+                actions = ActionChains(self.driver)
+                platform = 'mac'
+                if "platform" in self.driver.capabilities:
+                    platform = (self.driver.capabilities["platform"]).lower()
+                elif "platformName" in self.driver.capabilities:
+                    platform = \
+                        (self.driver.capabilities["platformName"]).lower()
+                if 'mac' in platform:
+                    key_to_press = Keys.COMMAND
+                else:
+                    key_to_press = Keys.CONTROL
+                ActionChains(self.driver).key_down(key_to_press)\
+                    .send_keys('a').key_up(key_to_press)\
+                    .send_keys(Keys.DELETE).perform()
+                ActionChains(self.driver).send_keys(value) .perform()
             # Click on editor's Save button
             self.page.find_by_css_selector(
                 QueryToolLocators.text_editor_ok_btn_css).click()
diff --git a/web/pgadmin/static/css/style.css b/web/pgadmin/static/css/style.css
index 5b4a9f2d1..886eb5ee0 100644
--- a/web/pgadmin/static/css/style.css
+++ b/web/pgadmin/static/css/style.css
@@ -23,3 +23,5 @@
 @import '../vendor/backgrid/backgrid-select-all.css';
 
 @import 'node_modules/xterm/css/xterm.css';
+
+@import 'node_modules/jsoneditor/dist/jsoneditor.min.css';
diff --git a/web/pgadmin/static/js/slickgrid/editors.js b/web/pgadmin/static/js/slickgrid/editors.js
index b337d46e4..74b036489 100644
--- a/web/pgadmin/static/js/slickgrid/editors.js
+++ b/web/pgadmin/static/js/slickgrid/editors.js
@@ -44,6 +44,11 @@ import gettext from 'sources/gettext';
     return $('<textarea class=\'pg-textarea text-12\' hidefocus rows=5\'>');
   }
 
+  // return json editor element
+  function getJsonEditor() {
+    return $('<div id=\'pg-json-editor\' hidefocus\'>');
+  }
+
   // Generate and return editor buttons
   function getButtons(editable) {
     var $buttons = $('<div class=\'pg_buttons\' />'),
@@ -293,15 +298,16 @@ import gettext from 'sources/gettext';
 
   // JSON data type editor
   function JsonTextEditor(args) {
-    var $input, $wrapper, $buttons;
-    var defaultValue;
+    var $input, $wrapper, $buttons, $editor;
+    var defaultValue, tmpdata;
     var scope = this;
+    var editorInitialized = false;
 
     this.init = function() {
       var $container = $('body');
 
       $wrapper = getWrapper().appendTo($container);
-      $input = getTextArea().appendTo($wrapper);
+      $input = getJsonEditor().appendTo($wrapper);
       $buttons = getButtons(true).appendTo($wrapper);
 
       $buttons.find('button:first').on('click', this.cancel);
@@ -309,7 +315,6 @@ import gettext from 'sources/gettext';
       $input.on('keydown', this.handleKeyDown);
 
       scope.position(args.position);
-      $input.trigger('focus').trigger('select');
     };
 
     this.handleKeyDown = function(e) {
@@ -318,12 +323,6 @@ import gettext from 'sources/gettext';
       } else if (e.which == $.ui.keyCode.ESCAPE) {
         e.preventDefault();
         scope.cancel();
-      } else if (e.which == $.ui.keyCode.TAB && e.shiftKey) {
-        e.preventDefault();
-        args.grid.navigatePrev();
-      } else if (e.which == $.ui.keyCode.TAB) {
-        e.preventDefault();
-        args.grid.navigateNext();
       }
     };
 
@@ -332,7 +331,6 @@ import gettext from 'sources/gettext';
     };
 
     this.cancel = function() {
-      $input.val(defaultValue);
       args.cancelChanges();
     };
 
@@ -352,15 +350,24 @@ import gettext from 'sources/gettext';
     };
 
     this.destroy = function() {
+      $editor.destroy();
       $wrapper.remove();
     };
 
     this.focus = function() {
-      $input.trigger('focus');
+      $editor.focus();
     };
 
     this.loadValue = function(item) {
       var data = defaultValue = item[args.column.field];
+      /* Can be useful until JSON editor loads */
+      tmpdata = data;
+
+      if ( _.isUndefined(data) || _.isNull(data)){
+        defaultValue = '{}';
+        data = '{}';
+      }
+
       /* If jsonb or array */
       if(args.column.column_type_internal === 'jsonb' && !Array.isArray(data) && data != null) {
         data = JSONBigNumber.stringify(JSONBigNumber.parse(data), null, 4);
@@ -375,20 +382,60 @@ import gettext from 'sources/gettext';
         });
         data = '[' + temp.join() + ']';
       }
-      /* if json take as is */
-      $input.val(data);
-      $input.trigger('select');
+      /* if data is string then convert to json*/
+      if ( data != '' && typeof data === 'string'){
+        data = JSON.parse(data);
+      }
+
+      /* Create editor if required & set data*/
+      if ($editor){
+        $editor.set(data);
+        $editor.focus();
+      }else{
+        editorInitialized = true;
+        require.ensure(['jsoneditor'], function(require) {
+          var JSONEditor = require('jsoneditor');
+          var jsonContainer = document.getElementById('pg-json-editor');
+          var options = { modes: ['code', 'form', 'tree','preview']};
+          $editor = new JSONEditor(jsonContainer, options);
+          $editor.set(data);
+          $editor.focus();
+        }, function(error){
+          throw(error);
+        }, 'jsoneditorchunk');
+      }
     };
 
     this.serializeValue = function() {
-      if ($input.val() === '') {
-        return null;
+      /* Create editor if data is null/new data entry */
+      if( !editorInitialized) {
+        require.ensure(['jsoneditor'], function(require) {
+          var JSONEditor = require('jsoneditor');
+          var jsonContainer = document.getElementById('pg-json-editor');
+          var options = {modes: ['code', 'form', 'tree','preview']};
+          if(jsonContainer) {
+            $editor = new JSONEditor(jsonContainer, options);
+            $editor.focus();
+            return null;
+          }
+        }, function(error){
+          throw(error);
+        }, 'jsoneditorchunk');}
+
+      if($editor){
+        let data = $editor.getText();
+        if (data === '') {
+          return null;
+        }
+        return data;
+      }else{
+        // The loader is not loaded yet ?
+        return tmpdata;
       }
-      return $input.val();
     };
 
     this.applyValue = function(item, state){
-      if(args.column.column_type_internal === 'jsonb') {
+      if(args.column.column_type_internal === 'jsonb' || args.column.column_type_internal === 'json') {
         setValue(args, item, state, 'jsonb');
       } else {
         setValue(args, item, state, 'text');
@@ -396,19 +443,24 @@ import gettext from 'sources/gettext';
     };
 
     this.isValueChanged = function() {
-      if ($input.val() == '' && _.isUndefined(defaultValue)) {
+      let data = $editor.getText();
+      if (data == '' && (_.isUndefined(defaultValue) || _.isNull(defaultValue) )) {
         return false;
       } else {
-        return (!($input.val() == '' && _.isNull(defaultValue))) && ($input.val() != defaultValue);
+        if(! _.isUndefined(defaultValue) && defaultValue != '{}'){
+          defaultValue = JSON.stringify(JSON.parse(defaultValue), null,2);
+        }
+        return (!( data == '' && _.isNull(defaultValue)) && (data != defaultValue));
       }
     };
 
     this.validate = function() {
       if(args.column.column_type_internal === 'jsonb' ||
           args.column.column_type_internal === 'json') {
+        let data = $editor.getText();
         try {
-          if($input.val() != ''){
-            JSON.parse($input.val());
+          if(data != '{}'){
+            JSON.parse(data);
           }
         } catch(e) {
           $input.addClass('pg-text-invalid');
@@ -418,7 +470,6 @@ import gettext from 'sources/gettext';
           };
         }
       }
-      $input.removeClass('pg-text-invalid');
       return {
         valid: true,
         msg: null,
@@ -529,22 +580,22 @@ import gettext from 'sources/gettext';
 
   // JSON data type editor
   function ReadOnlyJsonTextEditor(args) {
-    var $input, $wrapper, $buttons;
+    var $input, $wrapper, $buttons, $editor;
     var defaultValue;
     var scope = this;
+    var tmpdata;
 
     this.init = function() {
       var $container = $('body');
 
       $wrapper = getWrapper().appendTo($container);
-      $input = getTextArea().appendTo($wrapper);
+      $input = getJsonEditor().appendTo($wrapper);
       $buttons = getButtons(false).appendTo($wrapper);
 
       $buttons.find('button:first').on('click', this.cancel);
       $input.on('keydown', this.handleKeyDown);
 
       scope.position(args.position);
-      $input.trigger('focus').trigger('select');
     };
 
     this.handleKeyDown = function(e) {
@@ -553,14 +604,6 @@ import gettext from 'sources/gettext';
       } else if (e.which == $.ui.keyCode.ESCAPE) {
         e.preventDefault();
         scope.cancel();
-      } else if (e.which == $.ui.keyCode.TAB && e.shiftKey) {
-        scope.cancel();
-        e.preventDefault();
-        args.grid.navigatePrev();
-      } else if (e.which == $.ui.keyCode.TAB) {
-        scope.cancel();
-        e.preventDefault();
-        args.grid.navigateNext();
       }
     };
 
@@ -585,15 +628,17 @@ import gettext from 'sources/gettext';
     };
 
     this.destroy = function() {
+      $editor.destroy();
       $wrapper.remove();
     };
 
     this.focus = function() {
-      $input.trigger('focus');
+      $editor.focus();
     };
 
     this.loadValue = function(item) {
       var data = defaultValue = item[args.column.field];
+      tmpdata = data;
       if(args.column.column_type_internal === 'jsonb' && !Array.isArray(data)) {
         data = JSONBigNumber.stringify(JSONBigNumber.parse(data), null, 4);
       } else if (Array.isArray(data)) {
@@ -607,12 +652,39 @@ import gettext from 'sources/gettext';
         });
         data = '[' + temp.join() + ']';
       }
-      $input.val(data);
-      $input.trigger('select');
+      /* if data is string then convert to json*/
+      if (typeof data === 'string')
+        data = JSON.parse(data);
+
+      require.ensure(['jsoneditor'], function(require) {
+        var JSONEditor = require('jsoneditor');
+        var jsonContainer = document.getElementById('pg-json-editor');
+        let options = {
+          modes: ['code', 'form',  'tree', 'preview'],
+          onEditable: function() {
+            return false;
+          }
+        };
+        if(jsonContainer) {
+          $editor = new JSONEditor(jsonContainer, options);
+          $editor.set(data);
+        }
+      }, function(error){
+        throw(error);
+      }, 'jsoneditorchunk');
     };
 
     this.serializeValue = function() {
-      return $input.val();
+      if($editor) {
+        let data = $editor.getText();
+        if (data === '') {
+          return null;
+        }
+        return data;
+      } else {
+        // The loader is not loaded yet ?
+        return tmpdata;
+      }
     };
 
     this.applyValue = function(item, state) {
@@ -620,12 +692,13 @@ import gettext from 'sources/gettext';
     };
 
     this.isValueChanged = function() {
-      return (!($input.val() == '' && defaultValue == null)) && ($input.val() != defaultValue);
+      let data = $editor.getText();
+      return (!(data == '' && defaultValue == null)) && (data != defaultValue);
     };
 
     this.validate = function() {
       if (args.column.validator) {
-        var validationResults = args.column.validator($input.val());
+        var validationResults = args.column.validator($editor.getText());
         if (!validationResults.valid) {
           return validationResults;
         }
diff --git a/web/pgadmin/static/scss/_jsoneditor.overrides.scss b/web/pgadmin/static/scss/_jsoneditor.overrides.scss
new file mode 100644
index 000000000..74fcbe24c
--- /dev/null
+++ b/web/pgadmin/static/scss/_jsoneditor.overrides.scss
@@ -0,0 +1,406 @@
+.jsoneditor-menu a.jsoneditor-poweredBy {
+  visibility: hidden;
+}
+
+.jsoneditor {
+    border-color: $border-color;
+}
+
+/* Menu Bar*/
+.jsoneditor-menu {
+    background: $color-gray-light;
+    border-bottom: 1px solid $border-color;
+}
+
+/* Menu Bar buttons*/
+.jsoneditor-menu>button {
+    font-family: $font-family-icon !important;
+    font-size: $navbar-font-size !important;
+    line-height: $line-height-base !important;
+    background-image:none !important;
+    font-weight: 600 !important;
+    border-radius: $border-radius;
+    border-color:$color-gray;
+    opacity: 1;
+    background-color:$btn-primary-icon-bg;
+    color: $color-fg;
+    font-weight: normal !important;
+}
+
+/* Navigation Bar */
+.jsoneditor-navigation-bar{
+   font-family: $font-family-primary !important;
+   background-color: $color-bg;
+   color: $color-fg;
+   border-bottom: 1px solid $color-gray;
+}
+
+/* Over rides icons */
+.jsoneditor-menu>button.jsoneditor-expand-all::before{
+    content: "\f424";
+    font-weight: 600 !important;
+}
+
+.jsoneditor-menu>button.jsoneditor-collapse-all::before{
+    content: "\f422";
+    font-weight: 600 !important;
+}
+
+.jsoneditor-menu>button.jsoneditor-redo::before {
+    content: "\f01e";
+    font-weight: 600 !important;
+}
+
+.jsoneditor-menu>button.jsoneditor-undo::before {
+    content: "\f0e2";
+    font-weight: 600 !important;
+}
+
+.jsoneditor-menu>button.jsoneditor-format::before {
+    content: "\f03c";
+    font-weight: 600 !important;
+}
+
+.jsoneditor-menu>button.jsoneditor-compact::before {
+    content: "\f066";
+    font-weight: 600 !important;
+}
+
+.jsoneditor-menu>button.jsoneditor-sort::before {
+    content: "\f160";
+    font-weight: 600 !important;
+}
+
+.jsoneditor-menu>button.jsoneditor-repair::before {
+    content: "\f0ad";
+    font-weight: 600 !important;
+}
+
+.jsoneditor-menu>button.jsoneditor-transform::before {
+    content: "\f0b0";
+    font-weight: 600 !important;
+}
+
+/* Undo redo buttons */
+.jsoneditor-menu>.jsoneditor-modes>button:disabled,
+.jsoneditor-menu>button:disabled {
+    color:$color-fg  !important;
+    opacity: $btn-disabled-opacity;
+    border: thin solid;
+    border-color:$color-gray;
+    border-radius: $border-radius;
+    background-color:$btn-primary-icon-bg !important;
+}
+
+/* Mode drop-down */
+.jsoneditor-menu>.jsoneditor-modes>button,{
+    font-family: $font-family-primary !important;
+    font-size: $font-size-base !important;
+    line-height: $line-height-base !important;
+    background-image:none !important;
+    font-weight: 600 !important;
+    border-radius: $border-radius;
+    border-color:$color-gray;
+    opacity: 1;
+    background-color:$btn-primary-icon-bg;
+    color: $color-fg;
+    font-weight: normal !important;
+}
+
+/* Mode drop-down options */
+.jsoneditor-contextmenu .jsoneditor-menu button,
+.jsoneditor-contextmenu .jsoneditor-separator {
+  font-family: $font-family-primary !important;
+  font-size: $font-size-base !important;
+  background-color: $color-bg !important;
+  color: $color-fg !important;
+  border: none;
+}
+
+/* Drop-down hovered*/
+.jsoneditor-contextmenu .jsoneditor-menu li button:hover {
+    background-color: $select2-container-hover-bg !important;
+}
+
+/* Drop-down selected*/
+.jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected,
+.jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected:focus,
+.jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected:hover {
+    background-color: $color-primary !important;
+    color: $color-fg;
+}
+
+/* Search Box*/
+.jsoneditor-frame,
+.jsoneditor-search input{
+    color: $color-fg;
+    background-color: $color-bg;
+}
+
+/* Search Box results */
+.jsoneditor-results {
+  color: $color-fg;
+}
+
+/* Ace editor Setting */
+/* Ace editor numbers */
+.ace-jsoneditor .ace_gutter {
+    background-color:$color-gray-light;
+    color:$color-fg;
+}
+/* Ace editor code background */
+.ace-jsoneditor .ace_scroller {
+    background-color: $color-bg;
+}
+
+// .ace-jsoneditor .ace_scroller:read-only{
+//  background-color: $color-gray-lighter;
+// }
+
+
+/* Ace editor hide indent guide */
+.ace-jsoneditor .ace_indent-guide {
+    background: none;
+}
+/* Ace editor Key names */
+.ace-jsoneditor .ace_variable {
+    color: $color-fg !important;
+}
+
+/* Ace editorfonts */
+.ace_editor,
+.ace-jsoneditor *{
+    font-family: $font-family-editor !important;
+    font-size: $font-size-base !important;
+    line-height: $line-height-base !important;
+    color: $color-fg;
+}
+.ace-jsoneditor.ace_editor {
+    font-family: $font-family-editor !important;
+    font-size: $font-size-base !important;
+    line-height: $line-height-base !important;
+    color: $color-fg;
+    background-color:$color-bg !important;
+}
+
+
+/* /* font setting all other mode */
+/* form, tree, code, preview, schema-error  */
+div.jsoneditor-default,
+div.jsoneditor-field,
+div.jsoneditor-value,
+div.jsoneditor textarea,
+div.jsoneditor td,
+div.jsoneditor-readonly,
+.jsoneditor-popover{
+    font-family: $font-family-primary !important;
+    font-size: $font-size-base !important;
+    line-height: $line-height-base !important;
+    color: $color-fg;
+    background-color:$color-bg;
+}
+
+
+pre.jsoneditor-preview{
+ background-color: $color-gray-lighter !important;
+}
+
+
+/* Hilight selected values in tree/form modes  */
+div.jsoneditor-field.jsoneditor-highlight,
+div.jsoneditor-field[contenteditable=true]:focus,
+div.jsoneditor-field[contenteditable=true]:hover,
+div.jsoneditor-value.jsoneditor-highlight,
+div.jsoneditor-value[contenteditable=true]:focus,
+div.jsoneditor-value[contenteditable=true]:hover
+{
+  background-color: $color-primary-light;
+  border: 1px solid $color-primary-light;
+  border-radius: $border-radius;
+}
+
+/* Hi-light line in code */
+.ace-jsoneditor .ace_marker-layer .ace_active-line {
+    background-color: $color-primary-light;
+    border: 1px solid $color-primary-light;
+    border-radius: $border-radius;
+}
+
+.ace-jsoneditor .ace_gutter-active-line {
+    background-color:$color-gray-light;
+}
+
+.ace-jsoneditor .ace_marker-layer .ace_selected-word {
+    border: 1px solid $color-primary-light;
+}
+
+
+.ace-jsoneditor .ace_marker-layer .ace_selection {
+    background: $color-primary-light;
+}
+
+/* Nested DD*/
+.jsoneditor-contextmenu .jsoneditor-icon {
+  background-image:none;
+}
+
+.jsoneditor-contextmenu .jsoneditor-text {
+  padding:4px 4px 4px 5px;
+}
+
+
+.jsoneditor-contextmenu .jsoneditor-menu{
+    border: 1px solid $border-color;
+    background: $color-bg !important;
+    color: $color-fg !important;
+}
+
+
+.jsoneditor-contextmenu .jsoneditor-menu button.jsoneditor-expand, {
+  height:0px;
+  background-color: $color-gray-light !important;
+}
+
+.jsoneditor-contextmenu .jsoneditor-menu li ul {
+    padding: 0;
+    border: 1px solid $border-color;
+}
+
+.jsoneditor-contextmenu .jsoneditor-separator {
+    height: 0;
+    border-top: 1px solid $border-color;
+    padding-top: 5px;
+    margin-top: 5px;
+}
+
+/* Status Bar */
+.jsoneditor-statusbar {
+    background-color: $color-gray-light !important;
+    color: $color-primary-light-fg !important;
+    border-top: 1px solid $border-color;
+}
+
+/* Validation Bar */
+.jsoneditor .jsoneditor-validation-errors {
+    background-color:$sql-history-error-bg !important;
+    color:$color-fg;
+    border: 1px solid $color-danger;
+}
+
+.jsoneditor .jsoneditor-text-errors {
+  width: 100%;
+  border-collapse: collapse;
+  border-top: 1px solid $color-gray;;
+}
+
+
+.jsoneditor .jsoneditor-text-errors tr,
+.jsoneditor .jsoneditor-text-errors td,
+.jsoneditor .jsoneditor-text-errors td pre,
+.jsoneditor .jsoneditor-text-errors tr.parse-error {
+  background-color: $color-danger-lighter !important;
+  color:$color-fg;
+}
+
+
+
+/* Transform & sort */
+/* Header */
+.jsoneditor-modal .pico-modal-header {
+  font-family: $font-family-primary !important;
+  font-size: $font-size-base !important;
+  font-weight: bold;
+  background: $color-primary;
+  color: $white;
+}
+
+/* Body */
+.pico-content{
+    background-color: $color-gray-light !important;
+}
+
+/* Disable links */
+.jsoneditor-modal a {
+    color: $color-fg !important;
+    pointer-events: none;
+}
+
+/* Hide links */
+.jsoneditor-modal br{
+
+}
+
+/* Fields */
+.jsoneditor-modal,
+.jsoneditor-modal #query,
+.jsoneditor-modal input,
+.jsoneditor-modal input[type=text],
+.jsoneditor-modal input[type=text]:focus,
+.jsoneditor-modal option,
+.jsoneditor-modal select,
+.jsoneditor-modal table td,
+.jsoneditor-modal table th,
+.jsoneditor-modal textarea, {
+    color: $color-fg !important;
+    background-color: $color-bg !important;
+    font-size: $font-size-base !important;
+    font-family: $font-family-primary !important;
+    padding: 4px;
+    border-color:$input-border-color;
+}
+
+/* Ascending descending buttons */
+.jsoneditor-modal .jsoneditor-button-group.jsoneditor-button-group-value-asc input.jsoneditor-button-asc,
+.jsoneditor-modal .jsoneditor-button-group.jsoneditor-button-group-value-desc input.jsoneditor-button-desc {
+    color: $color-fg !important;
+    background-color: $color-primary !important;
+    border-color: $color-primary !important;
+}
+
+
+.jsoneditor-modal input[type=button]{
+    color: $color-fg;
+    background-color: $color-bg;
+}
+
+/* OK Button */
+.jsoneditor-modal input[type=submit] {
+  color: $btn-primary-color !important;
+  border-color: $color-primary !important;
+  background-color: $color-primary !important;
+}
+
+.jsoneditor-modal .jsoneditor-jmespath-label {
+  color: $color-fg;
+  font-weight: bold;
+}
+.selectr-option,
+.selectr-options-container {
+  color: $color-fg;
+  background-color: $color-bg;
+}
+
+.selectr-option.selected {
+    background-color: $color-primary !important;
+    color: $color-fg !important;
+}
+
+.selectr-option.active {
+    color: $color-fg !important;
+    background-color: $color-gray-light !important;
+}
+
+.jsoneditor-modal .selectr-selected{
+    color: $color-fg;
+    background-color: $color-bg;
+}
+
+.jsoneditor-modal .selectr-selected .selectr-tag {
+    color: $color-fg !important;
+    background-color: $color-primary !important;
+    border: 1px solid $color-primary;
+}
+
+.jsoneditor-modal .selectr-selected .selectr-tag-remove::before{
+    color: $color-primary !important;
+}
diff --git a/web/pgadmin/static/scss/pgadmin.scss b/web/pgadmin/static/scss/pgadmin.scss
index 2e5bc6d9f..955f41d0f 100644
--- a/web/pgadmin/static/scss/pgadmin.scss
+++ b/web/pgadmin/static/scss/pgadmin.scss
@@ -32,3 +32,4 @@ $theme-colors: (
 @import 'bootstrap4-toggle.overrides';
 @import 'pickr.overrides';
 @import 'tippy.overrides';
+@import 'jsoneditor.overrides';
diff --git a/web/pgadmin/tools/sqleditor/static/scss/_sqleditor.scss b/web/pgadmin/tools/sqleditor/static/scss/_sqleditor.scss
index 76c1761e8..93aece607 100644
--- a/web/pgadmin/tools/sqleditor/static/scss/_sqleditor.scss
+++ b/web/pgadmin/tools/sqleditor/static/scss/_sqleditor.scss
@@ -300,8 +300,22 @@ li.CodeMirror-hint-active {
   & .pg-text-invalid {
     background: $color-danger-lighter;
   }
+
+  & #pg-json-editor {
+    min-width:525px;
+    min-height:280px;
+    height:295px;
+    width:550px;
+    border: $panel-border;
+    outline:0;
+    resize: both;
+    overflow:auto
+  }
 }
 
+.pg_buttons {
+  padding-top: 3px;
+}
 .sql-editor-message {
   white-space:pre-wrap;
   font-family: $font-family-editor;
diff --git a/web/regression/feature_utils/locators.py b/web/regression/feature_utils/locators.py
index 969a30e6f..079c51ac5 100644
--- a/web/regression/feature_utils/locators.py
+++ b/web/regression/feature_utils/locators.py
@@ -183,6 +183,8 @@ class QueryToolLocators:
 
     row_editor_text_area_css = ".pg-text-editor > textarea"
 
+    json_editor_text_area_css = "div.ace_layer.ace_text-layer"
+
     text_editor_ok_btn_css = ".btn.btn-primary.long_text_editor"
 
     btn_load_file_css = "#btn-load-file"
diff --git a/web/webpack.shim.js b/web/webpack.shim.js
index e0b28091c..9788f2640 100644
--- a/web/webpack.shim.js
+++ b/web/webpack.shim.js
@@ -143,6 +143,7 @@ var webpackShimConfig = {
     'dropzone': path.join(__dirname, './node_modules/dropzone/dist/dropzone'),
     'bignumber': path.join(__dirname, './node_modules/bignumber.js/bignumber'),
     'json-bignumber': path.join(__dirname, './node_modules/json-bignumber/dist/JSONBigNumber.min'),
+    'jsoneditor': path.join(__dirname, './node_modules/jsoneditor/dist/jsoneditor.min'),
     'snap.svg': path.join(__dirname, './node_modules/snapsvg-cjs/dist/snap.svg-cjs'),
     'color-picker': path.join(__dirname, './node_modules/@simonwep/pickr/dist/pickr.es5.min'),
     'mousetrap': path.join(__dirname, './node_modules/mousetrap'),
