diff --git a/docs/en_US/images/preferences_sql_results_grid.png b/docs/en_US/images/preferences_sql_results_grid.png
index 896af2962..863a2ed5e 100644
Binary files a/docs/en_US/images/preferences_sql_results_grid.png and b/docs/en_US/images/preferences_sql_results_grid.png differ
diff --git a/docs/en_US/preferences.rst b/docs/en_US/preferences.rst
index 9d7552a16..db3988fbe 100644
--- a/docs/en_US/preferences.rst
+++ b/docs/en_US/preferences.rst
@@ -542,6 +542,9 @@ preferences for copied data.
   setting won't have any effect.
 * Specify the number of records to fetch in one batch. Changing this value will
   override DATA_RESULT_ROWS_PER_PAGE setting from config file.
+* Use the *Max column data display length* to specify the maximum number of
+  characters to display in a cell. If the data is larger than this value, it
+  will be truncated.
 * Use the *Result copy field separator* drop-down listbox to select the field
   separator for copied data.
 * Use the *Result copy quote character* drop-down listbox to select the quote
diff --git a/web/package.json b/web/package.json
index 22a98e94b..98b826453 100644
--- a/web/package.json
+++ b/web/package.json
@@ -114,7 +114,6 @@
     "insert-if": "^1.1.0",
     "ip-address": "^10.0.1",
     "json-bignumber": "^1.0.1",
-    "jsoneditor": "^10.1.2",
     "leaflet": "^1.9.4",
     "lodash": "4.*",
     "moment": "^2.29.4",
@@ -150,6 +149,7 @@
     "uplot": "^1.6.32",
     "uplot-react": "^1.1.4",
     "valid-filename": "^4.0.0",
+    "vanilla-jsoneditor": "^3.3.1",
     "wkx": "^0.5.0",
     "zustand": "^5.0.3"
   },
diff --git a/web/pgadmin/static/css/style.css b/web/pgadmin/static/css/style.css
index 79d45a9e1..e1f616a32 100644
--- a/web/pgadmin/static/css/style.css
+++ b/web/pgadmin/static/css/style.css
@@ -3,7 +3,6 @@
 
 @import 'node_modules/@xterm/xterm/css/xterm.css';
 
-@import 'node_modules/jsoneditor/dist/jsoneditor.min.css';
 @import 'node_modules/react-checkbox-tree/lib/react-checkbox-tree.css';
 
 @import 'node_modules/@simonwep/pickr/dist/themes/monolith.min.css';
diff --git a/web/pgadmin/static/js/Theme/overrides/codemirror.override.js b/web/pgadmin/static/js/Theme/overrides/codemirror.override.js
index b1c715335..342a740e8 100644
--- a/web/pgadmin/static/js/Theme/overrides/codemirror.override.js
+++ b/web/pgadmin/static/js/Theme/overrides/codemirror.override.js
@@ -11,6 +11,11 @@ export default function cmOverride(theme) {
   const editor = theme.otherVars.editor;
   return {
     '.cm-editor': {
+      // CSS variables for jsoneditor's CodeMirror
+      '--jse-font-family-mono': theme.typography.fontFamilySourceCode,
+      '--jse-panel-background': editor.guttersBg,
+      '--jse-panel-color-readonly': editor.guttersFg,
+      '--jse-panel-border': 'none',
       height: '100%',
       color: editor.fg,
       backgroundColor: editor.bg,
diff --git a/web/pgadmin/static/js/Theme/overrides/jsoneditor.override.js b/web/pgadmin/static/js/Theme/overrides/jsoneditor.override.js
index 401f16af9..cea10ff82 100644
--- a/web/pgadmin/static/js/Theme/overrides/jsoneditor.override.js
+++ b/web/pgadmin/static/js/Theme/overrides/jsoneditor.override.js
@@ -10,318 +10,179 @@
 export default function jsonEditorOverride(theme) {
   return {
 
-    '.jsoneditor-menu a.jsoneditor-poweredBy': {
-      display: 'none',
-    },
-
-    '.jsoneditor': {
+    '.jse-main': {
       borderColor: theme.otherVars.borderColor,
+      '--jse-font-family': theme.typography.fontFamily,
+      '--jse-background-color': theme.otherVars.editor.bg,
 
       /* Validation Bar */
-      '& .jsoneditor-validation-errors': {
+      '& .jse-message.jse-error': {
         backgroundColor: theme.palette.error.light + ' !important',
         color: theme.palette.text.primary,
         border: `1px solid ${theme.palette.error.main}`,
       },
 
-      '& .jsoneditor-text-errors': {
-        width: '100%',
-        borderCollapse: 'collapse',
-        borderColor: theme.palette.default.borderColor,
-      },
-
-
-      '& .jsoneditor-text-errors tr, & .jsoneditor-text-errors td, & .jsoneditor-text-errors td pre, & .jsoneditor-text-errors tr.parse-error': {
-        backgroundColor: theme.palette.error.light + ' !important',
+      '& .jse-message.jse-success': {
+        backgroundColor: theme.palette.success.light + ' !important',
         color: theme.palette.text.primary,
-      }
-
+        border: `1px solid ${theme.palette.success.main}`,        
+      },
     },
 
     /* Navigation Bar */
-    '.jsoneditor-navigation-bar': {
+    '.jse-navigation-bar': {
       fontFamily: theme.typography.fontFamily + ' !important' ,
-      backgroundColor: theme.palette.default.main,
-      color: theme.palette.text.primary + ' !important',
+      '--jse-panel-background': theme.palette.default.main,
+      '--jse-navigation-bar-background-highlight': theme.palette.default.main,
+      '--jse-panel-button-color': theme.palette.text.primary ,
       borderBottom: `1px solid ${theme.otherVars.borderColor}`,
     },
+    '.jse-navigation-bar .jse-navigation-bar-edit:hover': {
+      '--jse-panel-button-background-highlight': 'none',
+      '--panel-button-color-highlight': 'none',
+    },
+
+    '.jse-navigation-bar .jse-navigation-bar-button:hover': {
+      '--jse-panel-button-background-highlight': 'none',
+      '--panel-button-color-highlight': 'none',
+      textDecoration: 'underline'
+    },
+
+    '.jse-navigation-bar-dropdown': {
+      border:`1px solid ${theme.palette.primary.light}`,
+      '--jse-background-color': theme.otherVars.editor.bg,
+      '--jse-navigation-bar-dropdown-color': theme.palette.text.primary,
+      '& .jse-selected': {
+        '--jse-navigation-bar-dropdown-color': theme.palette.primary.main,
+        '--jse-background-color': theme.palette.primary.contrastText
+      }
+    },
+
+    '.jse-navigation-bar-dropdown .jse-navigation-bar-dropdown-item:hover': {
+      '--jse-navigation-bar-background-highlight': theme.palette.primary.main,
+      borderColor: `${theme.palette.primary.main} !important`,
+      color: `${theme.palette.primary.contrastText} !important`,
+    },
+
+    '.jse-navigation-bar-path-editor input.jse-navigation-bar-text':{
+      '--jse-text-color': 'currentColor',
+    },
 
     /* Menu Bar*/
-    '.jsoneditor-menu': {
-      backgroundColor: theme.palette.grey[400],
-      border: `1px solid ${theme.otherVars.borderColor}`
+    '.jse-menu': {
+      backgroundColor: `${theme.palette.grey[400]} !important`,
+      border: `1px solid ${theme.otherVars.borderColor} `
     },
 
 
     /* Menu Bar buttons*/
-    '.jsoneditor-menu>button': {
-      fontFamily: '"Font Awesome 5 Free" !important',
+    '.jse-menu>button': {
+      fontFamily: '"Font Awesome 5 Free"',
       fontSize: '.925rem !important',
       lineHeight: '1.5rem',
       backgroundImage: 'none !important',
-      borderRadius: '0.25em',
+      borderRadius: '0.25em !important',
       borderColor: theme.palette.default.borderColor + ' !important',
       opacity: 1,
       backgroundColor: theme.palette.default.main + ' !important',
       color: theme.palette.text.primary + ' !important',
       fontWeight: 'normal !important',
       cursor:'pointer',
-
-      /* Over rides icons */
-      '&.jsoneditor-format::before': {
-        content: '"\\f03c"',
-        fontWeight: '600 !important',
-      },
-
-      '&.jsoneditor-expand-all::before': {
-        content: '"\\f424"',
-        fontWeight: '600 !important',
-      },
-
-      '&.jsoneditor-collapse-all::before': {
-        content: '"\\f422"',
-        fontWeight: '600 !important',
-      },
-
-      '&.jsoneditor-redo::before': {
-        content: '"\\f01e"',
-        fontWeight: '600 !important',
-      },
-
-      '&.jsoneditor-undo::before': {
-        content: '"\\f0e2"',
-        fontWeight: '600 !important',
-      },
-
-      '&.jsoneditor-compact::before': {
-        content: '"\\f066"',
-        fontWeight: '600 !important',
-      },
-
-      '&.jsoneditor-sort::before': {
-        content: '"\\f160"',
-        fontWeight: '600 !important',
-      },
-
-      '&.jsoneditor-repair::before': {
-        content: '"\\f0ad"',
-        fontWeight: '600 !important',
-      },
-
-      '&.jsoneditor-transform::before': {
-        content: '"\\f0b0"',
-        fontWeight: '600 !important',
-      },
+      padding: '2px 4px !important',
+      margin: '1px !important',
     },
 
-    /* Undo redo buttons */
-    '.jsoneditor-menu>.jsoneditor-modes>button:disabled, .jsoneditor-menu>button:disabled': {
-      color: theme.palette.text.primary + ' !important',
-      opacity: 0.65,
-      borderColor:theme.palette.grey[400],
-      borderRadius: '0.25em',
-      backgroundColor: theme.palette.default.main + ' !important',
-    },
-
-    /* Mode drop-down */
-    '.jsoneditor-menu>.jsoneditor-modes>button:active, .jsoneditor-menu>.jsoneditor-modes>button:focus, .jsoneditor-menu>.jsoneditor-modes>button': {
-      fontFamily: theme.typography.fontFamily + ' !important',
-      fontSize: '.925rem !important',
-      lineHeight: '1.5rem',
-      backgroundImage: 'none !important',
-      borderRadius: '0.25em',
-      borderColor: theme.palette.default.borderColor + ' !important',
-      opacity: 1,
-      backgroundColor: theme.palette.default.main + ' !important',
-      color: theme.palette.text.primary + ' !important',
-      fontWeight: 'normal !important',
-      cursor:'pointer',
-    },
-
-    '.jsoneditor-contextmenu': {
-
-      '& .jsoneditor-icon': {
-        backgroundImage: 'none',
-      },
-
-      '& .jsoneditor-text': {
-        padding: '4px 4px 4px 5px'
-      },
-      '& .jsoneditor-menu': {
-        border:`1px solid ${theme.palette.primary.light}`,
-        backgroundColor: theme.palette.default.main + ' !important',
-        color: theme.palette.text.primary + ' !important',
-      },
-      '& .jsoneditor-menu button.jsoneditor-expand': {
-        height: '0px',
-        backgroundColor: theme.palette.background.default + ' !important'
-      },
-      '&.jsoneditor-menu li ul': {
-        padding: 0,
-        border: `1px solid ${theme.palette.primary.light}`,
-      },
-      '& .jsoneditor-separator': {
-        height: 0,
-        borderTop: `1px solid ${theme.palette.primary.light}`,
-        paddingTop: '5px',
-        marginTop: '5px'
-      },
-
-      /* Mode drop-down options */
-      '& .jsoneditor-menu button, & .jsoneditor-separator':{
-        fontFamily: theme.typography.fontFamily + ' !important',
-        backgroundColor: theme.palette.default.main + ' !important',
-        color: theme.palette.text.primary  + ' !important',
-        border: 'none'
-      },
-      /* Drop-down hovered*/
-      '& .jsoneditor-menu li button':{
-        /* Drop-down hovered*/
-        '&:hover':{
-          backgroundColor: theme.palette.primary.main + ' !important',
-          borderColor: theme.palette.primary.main + ' !important',
-          color: theme.palette.primary.contrastText  + ' !important',
-        },
-        /* Drop-down selected*/
-        '&.jsoneditor-selected, &.jsoneditor-selected:focus, &.jsoneditor-selected:hover': {
-          backgroundColor: theme.palette.primary.main + ' !important',
-          borderColor: theme.palette.primary.main + ' !important',
-          color: theme.palette.primary.contrastText  + ' !important',
-
-        }
+    '.jse-button.jse-group-button.jse-selected': {
+      color: theme.palette.primary.contrastTextLight ?? theme.palette.primary.main + ' !important',
+      backgroundColor: theme.palette.primary.light + ' !important',
+      borderColor: theme.palette.primary.main + ' !important',
+      borderRight: '1px solid ' + theme.palette.primary.main + ' !important',
+      '&:hover':{
+        backgroundColor: theme.palette.primary.hoverLight + ' !important',
       }
     },
-
-    /* Search Box*/
-    '.jsoneditor-frame, .jsoneditor-search input': {
-      color: theme.palette.text.primary,
-      backgroundColor: theme.palette.default.main,
+    
+    '.jse-button.jse-group-button.jse-first': {
+      borderTopLeftRadius: '0.25em !important',
+      borderBottomLeftRadius: '0.25em !important',
+      borderTopRightRadius: '0 !important',
+      borderBottomRightRadius: '0 !important',
     },
 
-    /* Set expand icon to none*/
-    'div.jsoneditor-tree button.jsoneditor-button:focus': {
-      backgroundColor: theme.palette.background.default + ' !important',
-      outline: 'none',
+    '.jse-button.jse-group-button.jse-last': {
+      borderTopLeftRadius: '0 !important',
+      borderBottomLeftRadius: '0 !important',
+      borderTopRightRadius: '0.25em !important',
+      borderBottomRightRadius: '0.25em !important',
     },
 
-    /* Search Box results */
-    '.jsoneditor-results': {
-      color: theme.palette.text.primary  + ' !important',
-    },
-
-
-    /* Ace editor Setting */
-    /* Ace editor numbers */
-    '.ace-jsoneditor':{
-      ...theme.mixins.fontSourceCode,
-      lineHeight: '1.5 !important',
-      fontSize: '0.875em',
-      color: theme.palette.text.primary + ' !important',
-
-      '& .ace_gutter':{
-        backgroundColor : theme.palette.grey[400],
-        color: theme.palette.text.primary
-      },
-      /* Ace editor code background */
-      '& .ace_scroller':{
-        backgroundColor: theme.palette.background.default,
-      },
-      /* Ace editor hide indent guide */
-      '& .ace_indent-guide': {
-        background: 'none'
-      },
-      '& .ace_variable': {
-        color: theme.palette.text.primary  + ' !important',
-      },
-      /* Ace editorfonts */
-      '&.ace_editor': {
-        backgroundColor: theme.palette.background.default + ' !important',
-        color: theme.palette.text.primary  + ' !important',
-      },
-      '& .ace_text-layer':{
-        color: theme.palette.text.primary  + ' !important',
-      },
-      /* Hi-light line in code */
-      '& .ace_marker-layer .ace_active-line':{
-        backgroundColor: theme.otherVars.editor.selectionBg,
-        border: 0,
-        borderRadius: '0.25em',
-      },
-      '& .ace_gutter-active-line': {
-        backgroundColor: theme.palette.grey[200],
-      },
-      '& .ace_marker-layer .ace_selected-word, & .ace_marker-layer .ace_selection': {
-        border: `1px solid ${theme.palette.primary.light}`,
-        backgroundColor: theme.otherVars.editor.selectionBg,
-      },
-
-
-    },
-
-    'div.jsoneditor td.jsoneditor-tree': {
-      verticalAlign: 'middle'
-    },
-
-    'pre.jsoneditor-preview': {
-      backgroundColor: theme.palette.grey[200] + ' !important',
-      opacity: 0.8,
-      color: theme.palette.text.primary  + ' !important',
-    },
-
-    /* Hilight selected values in tree/form modes  */
-    'div':{
-      '&.jsoneditor-field.jsoneditor-highlight, &.jsoneditor-field[contenteditable=true]:focus, &.jsoneditor-field[contenteditable=true]:hover, &.jsoneditor-value.jsoneditor-highlight, &.jsoneditor-value[contenteditable=true]:focus, &.jsoneditor-value[contenteditable=true]:hover': {
-        backgroundColor: theme.otherVars.editor.selectionBg,
-        border: `1px solid ${theme.otherVars.editor.selectionBg}`,
-        borderRadius: 0.25
-      },
-
-    },
-
-
-    /* /* 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, div.jsoneditor-tree': {
-      fontFamily: theme.typography.fontFamily + ' !important',
-      fontSize: '.875rem !important',
-      lineHeight: '1.5rem',
-      backgroundColor: theme.palette.background.default + ' !important',
-      color: theme.palette.text.primary + ' !important'
+    '.jse-button.jse-group-button': {
+      margin: '0 !important',
+      height: '32px !important',
+      borderRadius: '0 !important',
     },
 
     /* Status Bar */
-    '.jsoneditor-statusbar': {
-      backgroundColor: theme.palette.grey[400] + ' !important',
-      color: theme.palette.text.primary + ' !important',
-      borderTop: `1px solid ${theme.otherVars.borderColor}`
+    '.jse-status-bar': {
+      '--jse-panel-background': theme.otherVars.editor.guttersBg,
+      '--jse-panel-color-readonly': theme.otherVars.editor.guttersFg,
+      '--jse-font-family-mono': theme.typography.fontFamily
     },
 
     /* Transform & sort */
     /* Header */
-    '.jsoneditor-modal .pico-modal-header': {
-      fontFamily: theme.typography.fontFamily + ' !important',
-      fontSize: '.875rem !important',
-      fontWeight: 'bold',
-      backgroundColor: theme.palette.background.default + ' !important',
-      color: theme.palette.text.primary + ' !important',
-      borderBottom: `1px solid ${theme.otherVars.borderColor}`,
+    '.jse-modal .jse-header': {
+      '--jse-theme-color': theme.palette.background.default,
+      '--jse-menu-color': theme.palette.text.primary
     },
 
-    /* Body */
-    '.pico-content': {
-      backgroundColor: theme.palette.background.default + ' !important',
-      '& .pico-close':{
-        color: theme.palette.text.primary + ' !important',
+    'dialog.jse-modal .jse-modal-inner': {
+      '--jse-font-family': theme.typography.fontFamily,
+      '--jse-modal-background': theme.palette.background.default,
+      '--jse-text-color': theme.palette.text.primary,
+      '& .jse-header': {
+        borderBottom: `1px solid ${theme.otherVars.borderColor}`,
+        '& .jse-title': {
+          color: theme.palette.text.primary,
+          fontSize: '0.875rem',
+          fontWeight: 'bold',
+          padding: '9px'
+        }
+      },
+      '& .jse-actions .jse-primary': {
+        '--jse-button-primary-background': theme.palette.primary.main,
+        '--jse-button-primary-color': theme.palette.primary.contrastText,
+        padding: '6px !important',
+        '&:hover': { 
+          '--jse-button-primary-background-highlight': theme.palette.primary.hoverMain,
+        }
+
       }
     },
 
-    /* Disable links */
-    '.jsoneditor-modal a': {
-      color: theme.palette.text.primary + ' !important'
+    'dialog.jse-modal .svelte-select': {
+      '--jse-item-is-active-bg': theme.palette.primary.main,
+      '--jse-svelte-select-background': theme.palette.background.default,
+      '--list-background': theme.palette.background.default,
+      '--item-is-active-color': theme.palette.primary.contrastText,
+      '--item-hover-bg': theme.palette.primary.hoverMain,
+    },
+
+    /* Body */
+    '.jse-modal-contents': {
+      '--jse-modal-background': theme.palette.background.default,
+    },
+
+    '.jse-transform-modal-inner textarea': {
+      ' --jse-input-background': theme.palette.background.default,
+    },
+
+    '.jse-contextmenu': {
+      '--jse-font-family': theme.typography.fontFamily,
     },
 
     /* Replace help text */
-    '.pico-modal-contents p': {
+    '.jse-main-contents p': {
       visibility: 'hidden',
       display: 'flex',
       marginBottom: '-1rem',
@@ -329,120 +190,17 @@ export default function jsonEditorOverride(theme) {
         visibility: 'visible',
         position: 'absolute',
         content: '"Enter a JMESPath query to filter, sort, or transform the JSON data."'
-
       }
     },
 
-
-    /* Fields */
-    '.jsoneditor-modal':{
-      '& #query, & input, & input[type=text], & input[type=text]:focus, & option, & select, & table td, & table th, & textarea, & label':{
-        color: theme.palette.text.primary + ' !important',
-        backgroundColor: theme.palette.background.default + ' !important',
-        fontFamily: theme.typography.fontFamily + ' !important',
-        fontSize: '.875rem !important',
-        padding: '4px',
-
-      },
-      '& input[type=button]':{
-        color: theme.palette.text.primary,
-        backgroundColor: theme.palette.default.main,
-      },
-      /* OK Button */
-      '& input[type=submit]':{
-        color: theme.palette.primary.contrastText  + ' !important',
-        backgroundColor: theme.palette.primary.main + ' !important',
-        borderColor: theme.palette.primary.main + ' !important',
-        textTransform: 'uppercase',
-      },
-      '& .jsoneditor-jmespath-label':{
-        color: theme.palette.text.primary + ' !important',
-        fontWeight: 'bold'
-      },
-      '& option':{
-        backgroundColor: theme.palette.primary.light + ' !important',
-        border: `1px solid ${theme.palette.primary.light}` + ' !important',
-        borderRadius: '0.25',
-        color: theme.palette.text.primary  + ' !important',
-      },
-      '& .jsoneditor-button-group.jsoneditor-button-group-value-asc input.jsoneditor-button-asc, & .jsoneditor-button-group.jsoneditor-button-group-value-desc input.jsoneditor-button-desc':{
-        backgroundColor: theme.palette.primary.main + ' !important',
-        borderColor: theme.palette.primary.main + ' !important',
-        color: theme.palette.primary.contrastText  + ' !important',
-      },
-      '& .selectr-selected':{
-        color: theme.palette.text.primary  + ' !important',
-        backgroundColor: theme.palette.background.default
-      },
-      '& .selectr-selected .selectr-tag':{
-        backgroundColor: theme.palette.primary.main + ' !important',
-        borderColor: theme.palette.primary.main,
-        border: `1px solid ${theme.palette.primary.main}`,
-        color: theme.palette.primary.contrastText  + ' !important',
-      },
-      '& .selectr-selected .selectr-tag-remove::before':{
-        color: theme.palette.primary.main + ' !important',
-      }
-
-
-    },
-
-    '.selectr-option, .selectr-options-container': {
-      color: theme.palette.text.primary  + ' !important',
-      backgroundColor: theme.palette.default.main
-    },
-
-    '.selectr-option.active, .selectr-option.selected': {
-      backgroundColor: theme.palette.primary.main + ' !important',
-      borderColor: theme.palette.primary.main,
-      color: theme.palette.primary.contrastText  + ' !important',
-    },
-
-
-    /* Update String. Key colors code mode */
-    '.ace_variable': {
-      color: theme.otherVars.editor.variable + ' !important',
-    },
-
-    '.ace_string': {
-      color: theme.otherVars.editor.string + ' !important',
-    },
-
-    '.ace_constant.ace_numeric': {
-      color: theme.otherVars.editor.number + ' !important',
-    },
-
-    /* Update String. Key colors tree/form mode*/
-    'div.jsoneditor-value':{
-      '&.jsoneditor-string':{
-        color: theme.otherVars.editor.string + ' !important',
-      },
-      ' &.jsoneditor-number':{
-        color: theme.otherVars.editor.number + ' !important',
-
-      }
-    },
-
-    // /* read only mode */
-    '#pg-json-editor[readonly]': {
-      '& div.jsoneditor-tree, & div.jsoneditor td, & div.jsoneditor-readonly, & div.jsoneditor-value, & div.jsoneditor-field, & div.jsoneditor-tree button.jsoneditor-button:focus': {
-        backgroundColor: theme.palette.grey[400] + ' !important',
-        opacity: 0.85
-      }
-    },
-
-    /* Ace editor code background readonly*/
-    '#pg-json-editor[readonly] .ace-jsoneditor .ace_scroller':{
-      backgroundColor: theme.palette.grey[400] + ' !important',
-      opacity: 0.85
+    '.jse-text-mode, .jse-tree-mode, .jse-table-mode': {
+      ' --jse-font-family': 'inherit',
+      '--jse-key-color': theme.palette.text.primary,
+      '--jse-value-color-number': theme.otherVars.editor.number,
+      '--jse-value-color-boolean': 'darkorange',
+      '--jse-value-color-string': theme.otherVars.editor.string,
+      '--jse-value-color-null': theme.otherVars.editor.keyword,
+      '--jse-delimiter-color': theme.palette.text.primary
     }
-
-
-
-
-
-
-
-
   };
 }
diff --git a/web/pgadmin/static/js/components/JsonEditor.jsx b/web/pgadmin/static/js/components/JsonEditor.jsx
index 8962460e5..9bb1cc860 100644
--- a/web/pgadmin/static/js/components/JsonEditor.jsx
+++ b/web/pgadmin/static/js/components/JsonEditor.jsx
@@ -8,51 +8,53 @@
 //////////////////////////////////////////////////////////////
 
 import React, { useEffect, useMemo, useRef } from 'react';
-import {default as OrigJsonEditor} from 'jsoneditor.min';
+import { createJSONEditor } from 'vanilla-jsoneditor';
 import PropTypes from 'prop-types';
 import CustomPropTypes from '../custom_prop_types';
 
 /* React wrapper for JsonEditor */
-export default function JsonEditor({getEditor, value, options, className}) {
+export default function JsonEditor({setJsonEditorSize, value, options, className}) {
   const eleRef = useRef();
   const editor = useRef();
   const defaultOptions = {
-    modes: ['code', 'form', 'tree','preview'],
+    mode: 'text',
   };
+  const currentMode = useRef(defaultOptions.mode);
 
-  useEffect(()=>{
-    const editorResizeObserver = new ResizeObserver(()=>{
-      // Using resize from json editor to resize it
-      // after resizing the container.
-      editor.current.resize();
-    });
-    editorResizeObserver.observe(eleRef.current);
-  }, []);
 
   useEffect(()=>{
     /* Create the object only once on mount */
-    editor.current = new OrigJsonEditor(eleRef.current, {
-      ...defaultOptions,
-      ...options,
-      onChange: ()=>{
-        let currVal = editor.current.getText();
-        if(currVal == '') {
-          currVal = null;
+    editor.current = createJSONEditor({
+      target: eleRef.current,
+      props:{
+        ...defaultOptions,
+        ...options,
+        onChange: (updatedContent) => {
+          options.onChange(currentMode.current == 'text' ? updatedContent.text : JSON.stringify(updatedContent.json));
+          options.onValidationError(editor.current.validate());
+        },
+        onChangeMode: (mode) => {
+          currentMode.current = mode;
+          setJsonEditorSize?.(eleRef.current);
         }
-        options.onChange(currVal);
       }
     });
-    editor.current.setText(value);
-    getEditor?.(editor.current);
+    editor.current.set({text: value}); 
+    setJsonEditorSize?.(eleRef.current);
     editor.current.focus();
-    /* Required by json editor */
-    eleRef.current.style.height = eleRef.current.offsetHeight + 'px';
+    return () => {
+      // destroy editor
+      if (editor.current) {
+        editor.current.destroy();
+        editor.current = null;
+      }
+    };
   }, []);
 
   useMemo(() => {
     if(editor.current) {
-      if(value != editor.current.getText()) {
-        editor.current.setText(value ?? '');
+      if(value != editor.current.get()[currentMode.current]) {
+        editor.current.update({text: value});
       }
     }
   }, [value]);
@@ -63,7 +65,7 @@ export default function JsonEditor({getEditor, value, options, className}) {
 }
 
 JsonEditor.propTypes = {
-  getEditor: PropTypes.func,
+  setJsonEditorSize: PropTypes.func,
   value: PropTypes.string,
   options: PropTypes.object,
   className: CustomPropTypes.className,
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/Editors.jsx b/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/Editors.jsx
index 8de6564bb..d6afe858a 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/Editors.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/Editors.jsx
@@ -96,13 +96,6 @@ const StyledEditorDiv = styled(Box)(({ theme }) => ({
       resize: 'both',
       overflow: 'hidden',
     },
-    '& .jsoneditor': {
-      height: 'abc',
-      border: 'none',
-      '& .ace-jsoneditor .ace_marker-layer .ace_active-line': {
-        background: theme.palette.primary.light,
-      },
-    },
   },
   '& .Editors-buttonMargin': {
     marginLeft: '0.5rem',
@@ -423,15 +416,33 @@ export function JsonTextEditor({row, column, onRowChange, onClose}) {
     onRowChange({ ...row, [column.key]: localVal}, true);
     onClose();
   };
+
+  const setJsonEditorSize = (eleRef) => {
+    // Logic to set the size of the editor
+    const { innerHeight, innerWidth } = window;
+    const box = eleRef.getBoundingClientRect();
+    let currentHeight = parseInt(eleRef.offsetHeight);
+    let heightDiff = parseInt(box.bottom) - innerHeight;
+    let currentWidth = parseInt(eleRef.offsetWidth);
+    let widthDiff = parseInt(box.right) - innerWidth;
+
+    if (box.bottom > innerHeight) {
+      eleRef.style.height = `${currentHeight - heightDiff - 50}px`;
+    }
+    if (box.right > innerWidth) {
+      eleRef.style.width = `${currentWidth - widthDiff - 50}px`;
+    }
+  };
   return (
     <Portal container={document.body}>
       <ResizableDiv columnIndex={column.idx}
         className='Editors-jsonEditor' data-label="pg-editor" onKeyDown={suppressEnterKey} >
         <JsonEditor
+          setJsonEditorSize={setJsonEditorSize}
           value={localVal}
           options={{
             onChange: onChange,
-            onValidationError: (errors)=>{setHasError(Boolean(errors.length));}
+            onValidationError: (errors)=>{setHasError(Boolean(errors));}
           }}
           className={'jsoneditor-div'}
         />
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/Formatters.jsx b/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/Formatters.jsx
index d9e77cde0..19894b929 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/Formatters.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/Formatters.jsx
@@ -11,6 +11,7 @@ import { styled } from '@mui/material/styles';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import CustomPropTypes from '../../../../../../static/js/custom_prop_types';
+import usePreferences from '../../../../../../preferences/static/js/store';
 
 
 const StyledNullAndDefaultFormatter = styled(NullAndDefaultFormatter)(({theme}) => ({
@@ -41,9 +42,14 @@ const FormatterPropTypes = {
   column: PropTypes.object,
 };
 export function TextFormatter({row, column}) {
+  const maxColumnDataDisplayLength = usePreferences().getPreferences('sqleditor', 'max_column_data_display_length').value;
   let value = row[column.key];
   if(!_.isNull(value) && !_.isUndefined(value)) {
     value = value.toString();
+    // If the length of the value is very large then we do not render the entire value and truncate it.
+    if (value.length > maxColumnDataDisplayLength) {
+      value = `${value.substring(0, maxColumnDataDisplayLength).replace(/\n/g,' ')}...`;
+    }
   }
   return (
     <NullAndDefaultFormatter value={value} column={column}>
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/index.jsx b/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/index.jsx
index a5f284229..d548b7bc8 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/index.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/index.jsx
@@ -257,7 +257,7 @@ function cellClassGetter(col, isSelected, dataChangeStore, rowKeyGetter){
   };
 }
 
-function initialiseColumns(columns, rows, totalRowCount, columnWidthBy) {
+function initialiseColumns(columns, rows, totalRowCount, columnWidthBy, maxColumnDataDisplayLength) {
   let retColumns = [
     ...columns,
   ];
@@ -266,7 +266,7 @@ function initialiseColumns(columns, rows, totalRowCount, columnWidthBy) {
   canvasContext.font = '12px Roboto';
 
   for(const col of retColumns) {
-    col.width = getColumnWidth(col, rows, canvasContext, columnWidthBy);
+    col.width = getColumnWidth(col, rows, canvasContext, columnWidthBy, maxColumnDataDisplayLength);
     col.resizable = true;
     col.editorOptions = {
       commitOnOutsideClick: false,
@@ -338,13 +338,17 @@ function formatColumns(columns, dataChangeStore, selectedColumns, onColumnSelect
   return retColumns;
 }
 
-function getColumnWidth(column, rows, canvas, columnWidthBy) {
+function getColumnWidth(column, rows, canvas, columnWidthBy, maxColumnDataDisplayLength) {
   const dataWidthReducer = (longest, nextRow) => {
     let value = nextRow[column.key];
     if(_.isNull(value) || _.isUndefined(value)) {
       value = '';
     }
     value = value.toString();
+    // If the length of the value is very large then we do not use the entire value and truncate it.
+    if (value.length > maxColumnDataDisplayLength) {
+      value = `${value.substring(0, maxColumnDataDisplayLength)}`;
+    }
     return longest.length > value.length ? longest : value;
   };
 
@@ -370,7 +374,7 @@ function getColumnWidth(column, rows, canvas, columnWidthBy) {
 }
 
 export default function QueryToolDataGrid({columns, rows, totalRowCount, dataChangeStore,
-  onSelectedCellChange, selectedColumns, onSelectedColumnsChange, columnWidthBy, startRowNum, ...props}) {
+  onSelectedCellChange, selectedColumns, onSelectedColumnsChange, columnWidthBy, startRowNum, maxColumnDataDisplayLength, ...props}) {
   const [readyColumns, setReadyColumns] = useState([]);
   const [lastSelectedColumn, setLastSelectedColumn] = useState(null);
   const eventBus = useContext(QueryToolEventsContext);
@@ -428,7 +432,7 @@ export default function QueryToolDataGrid({columns, rows, totalRowCount, dataCha
   }), [onSelectedCellChange]);
 
   useEffect(()=>{
-    let initCols = initialiseColumns(columns, rows, totalRowCount, columnWidthBy);
+    let initCols = initialiseColumns(columns, rows, totalRowCount, columnWidthBy, maxColumnDataDisplayLength);
     setReadyColumns(formatColumns(initCols, dataChangeStore, selectedColumns, onColumnSelected, onSelectedColumnsChangeWrapped, props.rowKeyGetter));
   }, [columns]);
 
@@ -493,4 +497,5 @@ QueryToolDataGrid.propTypes = {
   rowKeyGetter: PropTypes.func,
   columnWidthBy: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   startRowNum: PropTypes.number,
+  maxColumnDataDisplayLength: PropTypes.number,
 };
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/sections/ResultSet.jsx b/web/pgadmin/tools/sqleditor/static/js/components/sections/ResultSet.jsx
index a99feb887..a8ee0d5d1 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/sections/ResultSet.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/sections/ResultSet.jsx
@@ -1573,6 +1573,7 @@ export function ResultSet() {
                 queryToolCtx.preferences.sqleditor.column_data_max_width :
                 queryToolCtx.preferences?.sqleditor?.column_data_auto_resize
             }
+            maxColumnDataDisplayLength={queryToolCtx.preferences?.sqleditor?.max_column_data_display_length}
             key={rowsResetKey}
             rowKeyGetter={rowKeyGetter}
             onRowsChange={onRowsChange}
diff --git a/web/pgadmin/tools/sqleditor/utils/query_tool_preferences.py b/web/pgadmin/tools/sqleditor/utils/query_tool_preferences.py
index d22adfe49..d2d4422b4 100644
--- a/web/pgadmin/tools/sqleditor/utils/query_tool_preferences.py
+++ b/web/pgadmin/tools/sqleditor/utils/query_tool_preferences.py
@@ -375,6 +375,14 @@ def register_query_tool_preferences(self):
                          ' rows with alternating background colors.')
     )
 
+    self.max_column_data_display_length = self.preference.register(
+        'Results_grid', 'max_column_data_display_length',
+        gettext("Max column data display length"), 'integer',
+        200, category_label=PREF_LABEL_RESULTS_GRID,
+        help_str=gettext('Maximum number of characters to display in the'
+                         ' data preview.')
+    )
+
     self.sql_font_size = self.preference.register(
         'Editor', 'sql_font_size',
         gettext("Font size"), 'numeric', '1',
diff --git a/web/regression/feature_tests/query_tool_tests.py b/web/regression/feature_tests/query_tool_tests.py
index 2d16c2b99..71110d7c4 100644
--- a/web/regression/feature_tests/query_tool_tests.py
+++ b/web/regression/feature_tests/query_tool_tests.py
@@ -235,12 +235,25 @@ SELECT generate_series(1, 1000) as id order by id desc"""
 
         result = self.page.find_by_xpath(
             QueryToolLocators.output_cell_xpath.format(2, 2))
+        result.click()
+
+        copy_button = self.page.find_by_css_selector(
+            QueryToolLocators.copy_button_css)
+        copy_button.click()
+
+        scratch_pad_ele = self.page.find_by_css_selector(
+            QueryToolLocators.scratch_pad_css)
+        self.page.paste_values(scratch_pad_ele)
+
+        clipboard_text = scratch_pad_ele.get_attribute("value")
 
         # Search for 'Shared Read Blocks' word in result (buffers option)
-        self.assertIn('Shared Read Blocks', result.text)
+        self.assertIn('Shared Read Blocks', clipboard_text)
 
         # Search for 'Actual Total Time' word in result (timing option)
-        self.assertIn('Actual Total Time', result.text)
+        self.assertIn('Actual Total Time', clipboard_text)
+
+        scratch_pad_ele.clear()
 
     def _query_tool_auto_commit_disabled(self):
         table_name = 'query_tool_auto_commit_disabled_table'
diff --git a/web/regression/feature_tests/view_data_dml_queries.py b/web/regression/feature_tests/view_data_dml_queries.py
index abd3c1c6f..680b3c087 100644
--- a/web/regression/feature_tests/view_data_dml_queries.py
+++ b/web/regression/feature_tests/view_data_dml_queries.py
@@ -157,7 +157,7 @@ CREATE TABLE public.nonintpkey
         table_node = self.page.check_if_element_exists_with_scroll(
             TreeAreaLocators.table_node(table_name))
         table_node.click()
-
+        time.sleep(1)
         # Open Object -> View/Edit data
         self._view_data_grid(table_name)
 
@@ -288,14 +288,17 @@ CREATE TABLE public.nonintpkey
         else:
             key_to_press = Keys.CONTROL
         try:
-            WebDriverWait(self.driver, 3).until(
-                EC.visibility_of_element_located(
-                    (By.CSS_SELECTOR,
-                     QueryToolLocators.json_editor_text_area_css)))
+            json_editor = self.page.find_by_css_selector(
+                QueryToolLocators.json_editor_text_area_css)
+            json_editor.click()
+
             actions = ActionChains(self.driver)
             actions.key_down(key_to_press).send_keys('a').\
                 key_up(key_to_press).send_keys(Keys.DELETE).perform()
             actions.send_keys(value).perform()
+
+            time.sleep(0.5)
+
             # Click on editor's Save button
             self.page.find_by_css_selector(
                 QueryToolLocators.text_editor_ok_btn_css).click()
diff --git a/web/regression/feature_utils/locators.py b/web/regression/feature_utils/locators.py
index 8ecf45a6a..aa861381e 100644
--- a/web/regression/feature_utils/locators.py
+++ b/web/regression/feature_utils/locators.py
@@ -207,7 +207,7 @@ class QueryToolLocators:
     row_editor_text_area_css = "div[data-label='pg-editor'] textarea"
 
     json_editor_text_area_css = \
-        "div.ace_layer.ace_text-layer .ace_line_group .ace_line"
+        "div.jsoneditor-div .jse-contents .cm-editor .cm-content"
 
     row_editor_checkbox_css = "div[data-label='pg-checkbox-editor']"
 
diff --git a/web/yarn.lock b/web/yarn.lock
index b1f8fe081..97b807bda 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -12,7 +12,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@ampproject/remapping@npm:^2.2.0":
+"@ampproject/remapping@npm:^2.2.0, @ampproject/remapping@npm:^2.3.0":
   version: 2.3.0
   resolution: "@ampproject/remapping@npm:2.3.0"
   dependencies:
@@ -1463,7 +1463,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@codemirror/autocomplete@npm:^6.0.0":
+"@codemirror/autocomplete@npm:^6.0.0, @codemirror/autocomplete@npm:^6.18.1":
   version: 6.18.6
   resolution: "@codemirror/autocomplete@npm:6.18.6"
   dependencies:
@@ -1475,7 +1475,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@codemirror/commands@npm:^6.0.0":
+"@codemirror/commands@npm:^6.0.0, @codemirror/commands@npm:^6.7.1":
   version: 6.8.1
   resolution: "@codemirror/commands@npm:6.8.1"
   dependencies:
@@ -1511,7 +1511,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@codemirror/language@npm:^6.0.0":
+"@codemirror/language@npm:^6.0.0, @codemirror/language@npm:^6.10.3":
   version: 6.11.0
   resolution: "@codemirror/language@npm:6.11.0"
   dependencies:
@@ -1525,7 +1525,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@codemirror/lint@npm:^6.0.0":
+"@codemirror/lint@npm:^6.0.0, @codemirror/lint@npm:^6.8.2":
   version: 6.8.5
   resolution: "@codemirror/lint@npm:6.8.5"
   dependencies:
@@ -1536,18 +1536,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@codemirror/search@npm:^6.0.0":
-  version: 6.5.11
-  resolution: "@codemirror/search@npm:6.5.11"
+"@codemirror/search@npm:^6.0.0, @codemirror/search@npm:^6.5.6":
+  version: 6.5.10
+  resolution: "@codemirror/search@npm:6.5.10"
   dependencies:
     "@codemirror/state": ^6.0.0
     "@codemirror/view": ^6.0.0
     crelt: ^1.0.5
-  checksum: 4d418f176bd93705bc51c82a2f1c0e41fecc0368dc43c415635c4dfdd763aa05ebdf7f000bc9ca0083c1887e6d305b89482ec1f4db8b8765c6f38de324187476
+  checksum: a30048004ce7cc1ee77a7618485ab5399939eab72b64329d57be98245ea39cb68ba54ad944ee679cc2aeac5bf9f202b2073ad0916f0788497fb64a07073399e8
   languageName: node
   linkType: hard
 
-"@codemirror/state@npm:^6.0.0, @codemirror/state@npm:^6.4.0, @codemirror/state@npm:^6.5.0":
+"@codemirror/state@npm:^6.0.0, @codemirror/state@npm:^6.4.0, @codemirror/state@npm:^6.4.1, @codemirror/state@npm:^6.5.0":
   version: 6.5.2
   resolution: "@codemirror/state@npm:6.5.2"
   dependencies:
@@ -1556,7 +1556,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@codemirror/view@npm:^6.0.0, @codemirror/view@npm:^6.17.0, @codemirror/view@npm:^6.23.0, @codemirror/view@npm:^6.27.0, @codemirror/view@npm:^6.35.0":
+"@codemirror/view@npm:^6.0.0, @codemirror/view@npm:^6.17.0, @codemirror/view@npm:^6.23.0, @codemirror/view@npm:^6.27.0, @codemirror/view@npm:^6.34.1, @codemirror/view@npm:^6.35.0":
   version: 6.36.8
   resolution: "@codemirror/view@npm:6.36.8"
   dependencies:
@@ -1860,6 +1860,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@fortawesome/fontawesome-common-types@npm:6.7.2":
+  version: 6.7.2
+  resolution: "@fortawesome/fontawesome-common-types@npm:6.7.2"
+  checksum: 9c17f03032e56b8e8e996e5b2c15c8b47baf6f8d5c0703025b0b2711907245f94a7032b3da52d2714b5aeff1c14d3535e6869a82086136dcacae9ccd479dc6a2
+  languageName: node
+  linkType: hard
+
 "@fortawesome/fontawesome-free@npm:latest":
   version: 6.7.2
   resolution: "@fortawesome/fontawesome-free@npm:6.7.2"
@@ -1867,6 +1874,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@fortawesome/free-regular-svg-icons@npm:^6.6.0":
+  version: 6.7.2
+  resolution: "@fortawesome/free-regular-svg-icons@npm:6.7.2"
+  dependencies:
+    "@fortawesome/fontawesome-common-types": 6.7.2
+  checksum: 1a2be177dbb2c0186b3f10157a70c494f9e3c12c022cc8fb926c37b78a61e256a98c2739774671106454cb1a7f2336c6f49443e6bef44f33e67dd4e186f126cc
+  languageName: node
+  linkType: hard
+
+"@fortawesome/free-solid-svg-icons@npm:^6.6.0":
+  version: 6.7.2
+  resolution: "@fortawesome/free-solid-svg-icons@npm:6.7.2"
+  dependencies:
+    "@fortawesome/fontawesome-common-types": 6.7.2
+  checksum: 457cc180399be57efd1a5908aaa76c8530dec5469fa676904179f73976c10bb030c6de9bf866e2a83e042cfd23856ba5fa1ca5acdb83f4e90c6b4aa9e5412d3c
+  languageName: node
+  linkType: hard
+
 "@gar/promisify@npm:^1.1.3":
   version: 1.1.3
   resolution: "@gar/promisify@npm:1.1.3"
@@ -2220,7 +2245,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jridgewell/sourcemap-codec@npm:^1.4.10, @jridgewell/sourcemap-codec@npm:^1.4.14":
+"@jridgewell/sourcemap-codec@npm:^1.4.10, @jridgewell/sourcemap-codec@npm:^1.4.14, @jridgewell/sourcemap-codec@npm:^1.4.15, @jridgewell/sourcemap-codec@npm:^1.5.0":
   version: 1.5.0
   resolution: "@jridgewell/sourcemap-codec@npm:1.5.0"
   checksum: 05df4f2538b3b0f998ea4c1cd34574d0feba216fa5d4ccaef0187d12abf82eafe6021cec8b49f9bb4d90f2ba4582ccc581e72986a5fcf4176ae0cfeb04cf52ec
@@ -2237,6 +2262,33 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jsep-plugin/assignment@npm:^1.3.0":
+  version: 1.3.0
+  resolution: "@jsep-plugin/assignment@npm:1.3.0"
+  peerDependencies:
+    jsep: ^0.4.0||^1.0.0
+  checksum: 5549497d403a6c00969d61202a6d3dafc5a349929d190a524363dcfacb3436dbda3d9f88b2ec1330247a594ad3c5f1c17b0997769d0b206802281bad6cf9a410
+  languageName: node
+  linkType: hard
+
+"@jsep-plugin/regex@npm:^1.0.4":
+  version: 1.0.4
+  resolution: "@jsep-plugin/regex@npm:1.0.4"
+  peerDependencies:
+    jsep: ^0.4.0||^1.0.0
+  checksum: 78ef01554535ac6c108851a2a6d86377bce10de01a263ad7b31f9b37c8aa9fc6c49f24b753e5da7d771c5921c913e43c1c33e0bc0fa5d02562d906c83a237836
+  languageName: node
+  linkType: hard
+
+"@jsonquerylang/jsonquery@npm:^3.1.1 || ^4.0.0":
+  version: 4.1.1
+  resolution: "@jsonquerylang/jsonquery@npm:4.1.1"
+  bin:
+    jsonquery: bin/cli.js
+  checksum: 084a34908137db698241404cf92d47d993d5f6872ebd749c64740f773716db053cf1a74471753e85758829807a06064247d1c4ef774c43040d497882eb0f864f
+  languageName: node
+  linkType: hard
+
 "@kurkle/color@npm:^0.3.0":
   version: 0.3.4
   resolution: "@kurkle/color@npm:0.3.4"
@@ -2251,7 +2303,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@lezer/highlight@npm:^1.0.0":
+"@lezer/highlight@npm:^1.0.0, @lezer/highlight@npm:^1.2.1":
   version: 1.2.1
   resolution: "@lezer/highlight@npm:1.2.1"
   dependencies:
@@ -2740,6 +2792,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@replit/codemirror-indentation-markers@npm:^6.5.3":
+  version: 6.5.3
+  resolution: "@replit/codemirror-indentation-markers@npm:6.5.3"
+  peerDependencies:
+    "@codemirror/language": ^6.0.0
+    "@codemirror/state": ^6.0.0
+    "@codemirror/view": ^6.0.0
+  checksum: 7e9e22968f8935cede53bb8cf68702ff12d2b6439c4541e174c78f69bb62eaf89bd09284944a5590eb61938c90899963cc7204f12b7f0a5f1f2bc1a3da0ee717
+  languageName: node
+  linkType: hard
+
 "@sec-ant/readable-stream@npm:^0.4.1":
   version: 0.4.1
   resolution: "@sec-ant/readable-stream@npm:0.4.1"
@@ -2817,6 +2880,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@sveltejs/acorn-typescript@npm:^1.0.5":
+  version: 1.0.5
+  resolution: "@sveltejs/acorn-typescript@npm:1.0.5"
+  peerDependencies:
+    acorn: ^8.9.0
+  checksum: 80bb2dcff30f848d3cb74e99e957df5868b3ad3c29b4a72472472a959a79948b3deb3e7825021b32287603a66ada10b7846b59a7f396b622ede3d12e639d33a5
+  languageName: node
+  linkType: hard
+
 "@svgr/babel-plugin-add-jsx-attribute@npm:8.0.0":
   version: 8.0.0
   resolution: "@svgr/babel-plugin-add-jsx-attribute@npm:8.0.0"
@@ -3206,7 +3278,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/estree@npm:*, @types/estree@npm:^1.0.6":
+"@types/estree@npm:*, @types/estree@npm:^1.0.5, @types/estree@npm:^1.0.6":
   version: 1.0.7
   resolution: "@types/estree@npm:1.0.7"
   checksum: d9312b7075bdd08f3c9e1bb477102f5458aaa42a8eec31a169481ce314ca99ac716645cff4fca81ea65a2294b0276a0de63159d1baca0f8e7b5050a92de950ad
@@ -3797,13 +3869,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ace-builds@npm:^1.36.2":
-  version: 1.41.0
-  resolution: "ace-builds@npm:1.41.0"
-  checksum: 1e75a19672af46ffb8de8a041cad0e9f5572d8f096acbef88e79ea3451de281e3a666e2e7be5cb79a152278eb2c4e97fbf53e6c6bb408ff3e07114a22f3e2dd3
-  languageName: node
-  linkType: hard
-
 "acorn-globals@npm:^7.0.0":
   version: 7.0.1
   resolution: "acorn-globals@npm:7.0.1"
@@ -3859,7 +3924,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn@npm:^8.0.4, acorn@npm:^8.1.0, acorn@npm:^8.11.0, acorn@npm:^8.14.0, acorn@npm:^8.8.1":
+"acorn@npm:^8.0.4, acorn@npm:^8.1.0, acorn@npm:^8.11.0, acorn@npm:^8.12.1, acorn@npm:^8.14.0, acorn@npm:^8.8.1":
   version: 8.14.1
   resolution: "acorn@npm:8.14.1"
   bin:
@@ -3937,7 +4002,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ajv@npm:^6.12.4, ajv@npm:^6.12.5, ajv@npm:^6.12.6":
+"ajv@npm:^6.12.4, ajv@npm:^6.12.5":
   version: 6.12.6
   resolution: "ajv@npm:6.12.6"
   dependencies:
@@ -3949,7 +4014,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ajv@npm:^8.0.0, ajv@npm:^8.8.2, ajv@npm:^8.9.0":
+"ajv@npm:^8.0.0, ajv@npm:^8.17.1, ajv@npm:^8.8.2, ajv@npm:^8.9.0":
   version: 8.17.1
   resolution: "ajv@npm:8.17.1"
   dependencies:
@@ -4087,7 +4152,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"aria-query@npm:^5.0.0":
+"aria-query@npm:^5.0.0, aria-query@npm:^5.3.1":
   version: 5.3.2
   resolution: "aria-query@npm:5.3.2"
   checksum: d971175c85c10df0f6d14adfe6f1292409196114ab3c62f238e208b53103686f46cc70695a4f775b73bc65f6a09b6a092fd963c4f3a5a7d690c8fc5094925717
@@ -4338,6 +4403,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"axobject-query@npm:^4.1.0":
+  version: 4.1.0
+  resolution: "axobject-query@npm:4.1.0"
+  checksum: 7d1e87bf0aa7ae7a76cd39ab627b7c48fda3dc40181303d9adce4ba1d5b5ce73b5e5403ee6626ec8e91090448c887294d6144e24b6741a976f5be9347e3ae1df
+  languageName: node
+  linkType: hard
+
 "babel-jest@npm:^29.7.0":
   version: 29.7.0
   resolution: "babel-jest@npm:29.7.0"
@@ -5281,6 +5353,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"codemirror-wrapped-line-indent@npm:^1.0.8":
+  version: 1.0.9
+  resolution: "codemirror-wrapped-line-indent@npm:1.0.9"
+  peerDependencies:
+    "@codemirror/language": ^6.9.0
+    "@codemirror/state": ^6.2.1
+    "@codemirror/view": ^6.17.1
+  checksum: 1c0158003632bd0a3abc93412bf9d54e34616c2dbfc4d431965bb675307fc16e5791514c0e53e4920eccc03a914ef6eb4dabb39a7d7e9b23c9f1184bf90e1158
+  languageName: node
+  linkType: hard
+
 "codemirror@npm:^6.0.1":
   version: 6.0.1
   resolution: "codemirror@npm:6.0.1"
@@ -7031,6 +7114,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"esm-env@npm:^1.2.1":
+  version: 1.2.2
+  resolution: "esm-env@npm:1.2.2"
+  checksum: 3fb28f6f84b33219df8bf15ea0efcb1110512199014072a19e90c2ea37316dccb6309c90230d760c4c28a324ebc5ebecf0af809cefebe7558730bd6d401c93b5
+  languageName: node
+  linkType: hard
+
 "espree@npm:^10.0.1, espree@npm:^10.3.0":
   version: 10.3.0
   resolution: "espree@npm:10.3.0"
@@ -7061,6 +7151,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"esrap@npm:^1.4.6":
+  version: 1.4.6
+  resolution: "esrap@npm:1.4.6"
+  dependencies:
+    "@jridgewell/sourcemap-codec": ^1.4.15
+  checksum: 79af2b8e4e3f57a5604e839aacfd005498f1b2f1ee8ce3b99ddb1cb728935510e54169eb22a06a6f1c6b412b36e1150e2a38bee07cfe8491cbda0997d33fb428
+  languageName: node
+  linkType: hard
+
 "esrecurse@npm:^4.3.0":
   version: 4.3.0
   resolution: "esrecurse@npm:4.3.0"
@@ -8511,6 +8610,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"immutable-json-patch@npm:^6.0.1":
+  version: 6.0.1
+  resolution: "immutable-json-patch@npm:6.0.1"
+  checksum: df89d722d62db30d3533239d416feda44754c1249ff882b8498c122ca53214b369d1db4bfe3d5c97eb5ba0aaeb900f50ab02cfddc1d2f02f2cf8d1cbd9484956
+  languageName: node
+  linkType: hard
+
 "import-fresh@npm:^3.2.1, import-fresh@npm:^3.3.0":
   version: 3.3.1
   resolution: "import-fresh@npm:3.3.1"
@@ -8953,6 +9059,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-reference@npm:^3.0.3":
+  version: 3.0.3
+  resolution: "is-reference@npm:3.0.3"
+  dependencies:
+    "@types/estree": ^1.0.6
+  checksum: 11371fb2669a8144bffb2ae9bd11b0342b7dc384c3c0f8d5996566b071614282a3a0d306fd2fd1c6b4c9078d0e2703d191b47f4f78f9ce08f464c44a3a412412
+  languageName: node
+  linkType: hard
+
 "is-regex@npm:^1.2.1":
   version: 1.2.1
   resolution: "is-regex@npm:1.2.1"
@@ -9248,13 +9363,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"javascript-natural-sort@npm:^0.7.1":
-  version: 0.7.1
-  resolution: "javascript-natural-sort@npm:0.7.1"
-  checksum: 161e2c512cc7884bc055a582c6645d9032cab88497a76123d73cb23bfb03d97a04cf7772ecdb8bd3366fc07192c2f996366f479f725c23ef073fffe03d6a586a
-  languageName: node
-  linkType: hard
-
 "jest-changed-files@npm:^29.7.0":
   version: 29.7.0
   resolution: "jest-changed-files@npm:29.7.0"
@@ -9818,6 +9926,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jsep@npm:^1.4.0":
+  version: 1.4.0
+  resolution: "jsep@npm:1.4.0"
+  checksum: 8e7af5ecb91483b227092b87a3e85b5df3e848dbe6f201b19efcb18047567530d21dfeecb0978e09d1f66554fcfaed84176819eeacdfc86f61dc05c40c18f824
+  languageName: node
+  linkType: hard
+
 "jsesc@npm:^3.0.2":
   version: 3.1.0
   resolution: "jsesc@npm:3.1.0"
@@ -9914,22 +10029,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jsoneditor@npm:^10.1.2":
-  version: 10.2.0
-  resolution: "jsoneditor@npm:10.2.0"
-  dependencies:
-    ace-builds: ^1.36.2
-    ajv: ^6.12.6
-    javascript-natural-sort: ^0.7.1
-    jmespath: ^0.16.0
-    json-source-map: ^0.6.1
-    jsonrepair: ^3.8.1
-    picomodal: ^3.0.0
-    vanilla-picker: ^2.12.3
-  checksum: ffc9c1275de6ec709fed73d5cab6a219573d6fd807b9dcda16d5745423ec59f70bc9d43aff3b68a9d197564b7a82fce7ddc247a7010bde763fefe166d4e32869
-  languageName: node
-  linkType: hard
-
 "jsonparse@npm:^1.2.0":
   version: 1.3.1
   resolution: "jsonparse@npm:1.3.1"
@@ -9937,7 +10036,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jsonrepair@npm:^3.8.1":
+"jsonpath-plus@npm:^10.3.0":
+  version: 10.3.0
+  resolution: "jsonpath-plus@npm:10.3.0"
+  dependencies:
+    "@jsep-plugin/assignment": ^1.3.0
+    "@jsep-plugin/regex": ^1.0.4
+    jsep: ^1.4.0
+  bin:
+    jsonpath: bin/jsonpath-cli.js
+    jsonpath-plus: bin/jsonpath-cli.js
+  checksum: b0f7e9af4d3c586911690c0afc20cbdc3c8af963a739c7f7a62905ed34a25bf5279f2c254e7222aa65f834d2ae3c8cc217986d528c8206896afa008d6619cde7
+  languageName: node
+  linkType: hard
+
+"jsonrepair@npm:^3.0.0":
   version: 3.12.0
   resolution: "jsonrepair@npm:3.12.0"
   bin:
@@ -10081,6 +10194,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"locate-character@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "locate-character@npm:3.0.0"
+  checksum: 2d9e9f45e2dce7464c016ed6d81ebc938bc9c656392f7d6858308ab6fdaa57bcd4b6b479291d49e7db4047e3f321ddadbe78355f349b7974b203f19674e277cc
+  languageName: node
+  linkType: hard
+
 "locate-path@npm:^5.0.0":
   version: 5.0.0
   resolution: "locate-path@npm:5.0.0"
@@ -10099,6 +10219,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lodash-es@npm:^4.17.21":
+  version: 4.17.21
+  resolution: "lodash-es@npm:4.17.21"
+  checksum: 05cbffad6e2adbb331a4e16fbd826e7faee403a1a04873b82b42c0f22090f280839f85b95393f487c1303c8a3d2a010048bf06151a6cbe03eee4d388fb0a12d2
+  languageName: node
+  linkType: hard
+
 "lodash._basebind@npm:~2.3.0":
   version: 2.3.0
   resolution: "lodash._basebind@npm:2.3.0"
@@ -10405,6 +10532,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"magic-string@npm:^0.30.11":
+  version: 0.30.17
+  resolution: "magic-string@npm:0.30.17"
+  dependencies:
+    "@jridgewell/sourcemap-codec": ^1.5.0
+  checksum: f4b4ed17c5ada64f77fc98491847302ebad64894a905c417c943840c0384662118c9b37f9f68bb86add159fa4749ff6f118c4627d69a470121b46731f8debc6d
+  languageName: node
+  linkType: hard
+
 "make-dir@npm:^1.0.0, make-dir@npm:^1.2.0":
   version: 1.3.0
   resolution: "make-dir@npm:1.3.0"
@@ -10970,6 +11106,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"natural-compare-lite@npm:^1.4.0":
+  version: 1.4.0
+  resolution: "natural-compare-lite@npm:1.4.0"
+  checksum: 5222ac3986a2b78dd6069ac62cbb52a7bf8ffc90d972ab76dfe7b01892485d229530ed20d0c62e79a6b363a663b273db3bde195a1358ce9e5f779d4453887225
+  languageName: node
+  linkType: hard
+
 "natural-compare@npm:^1.4.0":
   version: 1.4.0
   resolution: "natural-compare@npm:1.4.0"
@@ -11797,13 +11940,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"picomodal@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "picomodal@npm:3.0.0"
-  checksum: ca16bb9b128b6b104c15e1055d67ad71b3125b290b0b9168d408ab719cd533cc979b1fbe7880033a46270f5b27d9b5b6a320a92ac2ef09ef8daa2a4dcdb26ab5
-  languageName: node
-  linkType: hard
-
 "pify@npm:^2.2.0, pify@npm:^2.3.0":
   version: 2.3.0
   resolution: "pify@npm:2.3.0"
@@ -13543,7 +13679,6 @@ __metadata:
     jest: ^29.6.4
     jest-environment-jsdom: ^29.6.4
     json-bignumber: ^1.0.1
-    jsoneditor: ^10.1.2
     leaflet: ^1.9.4
     loader-utils: ^3.2.1
     lodash: 4.*
@@ -13594,6 +13729,7 @@ __metadata:
     uplot-react: ^1.1.4
     url-loader: ^4.1.1
     valid-filename: ^4.0.0
+    vanilla-jsoneditor: ^3.3.1
     webfonts-loader: ^8.0.1
     webpack: ^5.98.0
     webpack-bundle-analyzer: ^4.8.0
@@ -14665,6 +14801,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"svelte@npm:^5.0.0":
+  version: 5.28.2
+  resolution: "svelte@npm:5.28.2"
+  dependencies:
+    "@ampproject/remapping": ^2.3.0
+    "@jridgewell/sourcemap-codec": ^1.5.0
+    "@sveltejs/acorn-typescript": ^1.0.5
+    "@types/estree": ^1.0.5
+    acorn: ^8.12.1
+    aria-query: ^5.3.1
+    axobject-query: ^4.1.0
+    clsx: ^2.1.1
+    esm-env: ^1.2.1
+    esrap: ^1.4.6
+    is-reference: ^3.0.3
+    locate-character: ^3.0.0
+    magic-string: ^0.30.11
+    zimmerframe: ^1.1.2
+  checksum: bb9f0a316c8d73f883e0c9b69ec519d977c9a2f689793127f19608c0f6fcaf0ec951d32894125be6c6e70297743960cca426decdb48a6c3de53419207c46cb48
+  languageName: node
+  linkType: hard
+
 "svg-parser@npm:^2.0.4":
   version: 2.0.4
   resolution: "svg-parser@npm:2.0.4"
@@ -15573,6 +15731,40 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vanilla-jsoneditor@npm:^3.3.1":
+  version: 3.3.1
+  resolution: "vanilla-jsoneditor@npm:3.3.1"
+  dependencies:
+    "@codemirror/autocomplete": ^6.18.1
+    "@codemirror/commands": ^6.7.1
+    "@codemirror/lang-json": ^6.0.1
+    "@codemirror/language": ^6.10.3
+    "@codemirror/lint": ^6.8.2
+    "@codemirror/search": ^6.5.6
+    "@codemirror/state": ^6.4.1
+    "@codemirror/view": ^6.34.1
+    "@fortawesome/free-regular-svg-icons": ^6.6.0
+    "@fortawesome/free-solid-svg-icons": ^6.6.0
+    "@jsonquerylang/jsonquery": ^3.1.1 || ^4.0.0
+    "@lezer/highlight": ^1.2.1
+    "@replit/codemirror-indentation-markers": ^6.5.3
+    ajv: ^8.17.1
+    codemirror-wrapped-line-indent: ^1.0.8
+    diff-sequences: ^29.6.3
+    immutable-json-patch: ^6.0.1
+    jmespath: ^0.16.0
+    json-source-map: ^0.6.1
+    jsonpath-plus: ^10.3.0
+    jsonrepair: ^3.0.0
+    lodash-es: ^4.17.21
+    memoize-one: ^6.0.0
+    natural-compare-lite: ^1.4.0
+    svelte: ^5.0.0
+    vanilla-picker: ^2.12.3
+  checksum: 2c36b3a4d9a315138c7e8ce082f83e383674ab0607e5ad521b3c6b438dcea2d4cd6ede7d706579018e0882512260de526a646b5e8e8e487f6ae9c461cedb0230
+  languageName: node
+  linkType: hard
+
 "vanilla-picker@npm:^2.12.3":
   version: 2.12.3
   resolution: "vanilla-picker@npm:2.12.3"
@@ -16147,6 +16339,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"zimmerframe@npm:^1.1.2":
+  version: 1.1.2
+  resolution: "zimmerframe@npm:1.1.2"
+  checksum: 83b05c0b73ae45c520af7f0c856c1ea56728047d41dcec6b86a2016ad8cbe8694e8efdb0ea973f55fa72bbb851fbceaadcba748c0fd000ef17d095e7ee366f00
+  languageName: node
+  linkType: hard
+
 "zustand@npm:^5.0.3":
   version: 5.0.4
   resolution: "zustand@npm:5.0.4"