diff --git a/packages/web/src/dbkeyvalue/DbKeyValueDetail.svelte b/packages/web/src/dbkeyvalue/DbKeyValueDetail.svelte
index 20d543743..b7cc0798d 100644
--- a/packages/web/src/dbkeyvalue/DbKeyValueDetail.svelte
+++ b/packages/web/src/dbkeyvalue/DbKeyValueDetail.svelte
@@ -12,6 +12,7 @@
   export let columnTitle;
   export let value;
   export let onChangeValue = null;
+  export let keyType = null;
 </script>
 
 <div class="colnamewrap">
@@ -33,6 +34,7 @@
     <AceEditor
       readOnly={!onChangeValue}
       {value}
+      mode={keyType === 'JSON' ? 'json' : undefined}
       on:input={e => {
         onChangeValue?.(e.detail);
       }}
diff --git a/packages/web/src/tabs/DbKeyDetailTab.svelte b/packages/web/src/tabs/DbKeyDetailTab.svelte
index 64c5e2b11..93242f667 100644
--- a/packages/web/src/tabs/DbKeyDetailTab.svelte
+++ b/packages/web/src/tabs/DbKeyDetailTab.svelte
@@ -193,6 +193,7 @@
             <DbKeyValueDetail
               columnTitle="Value"
               value={editedValue || keyInfo.value}
+              keyType={keyInfo.type}
               onChangeValue={value => {
                 editedValue = value;
               }}