diff --git a/packages/core/src/forms/mapObjectEditor/mapObjectEditor.component.html b/packages/core/src/forms/mapObjectEditor/mapObjectEditor.component.html
index 9e2d5aba8dc..e205b25196c 100644
--- a/packages/core/src/forms/mapObjectEditor/mapObjectEditor.component.html
+++ b/packages/core/src/forms/mapObjectEditor/mapObjectEditor.component.html
@@ -30,10 +30,12 @@
           <b>{{ $ctrl.valueLabel }}</b>
         </td>
         <td>
-          <textarea class="form-control input input-sm" ng-model="pair.value" rows="4">
-          {{ $ctrl.formatValueForDisplay(pair.value) }}
-        </textarea
-          >
+          <textarea
+            class="form-control input input-sm"
+            ng-model="$ctrl.formatValueForDisplay[$index]"
+            rows="4"
+            ng-change="$ctrl.onValueChange($index)"
+          ></textarea>
         </td>
         <td>
           <div class="form-control-static">
diff --git a/packages/core/src/forms/mapObjectEditor/mapObjectEditor.component.js b/packages/core/src/forms/mapObjectEditor/mapObjectEditor.component.js
index 1ee126deea2..c245ad9c955 100644
--- a/packages/core/src/forms/mapObjectEditor/mapObjectEditor.component.js
+++ b/packages/core/src/forms/mapObjectEditor/mapObjectEditor.component.js
@@ -41,11 +41,22 @@ angular
           this.onChange();
         };
 
-        this.formatValueForDisplay = (value) => {
-          if (typeof value === 'object') {
-            return JSON.stringify(value, null, 2);
+        this.onValueChange = (index) => {
+          const formattedValue = this.formattedValues[index];
+
+          // Parse the JSON if it looks like an object or array, otherwise leave it as a string
+          try {
+            this.backingModel[index].value = JSON.parse(formattedValue);
+          } catch (e) {
+            this.backingModel[index].value = formattedValue; // Not JSON, so treat it as a string
           }
-          return value;
+
+          // Sync changes with the model
+          this.synchronize();
+        };
+
+        this.formatValueForDisplay = (value) => {
+          return typeof value === 'object' ? JSON.stringify(value, null, 2) : value;
         };
 
         // Clears existing values from model, then replaces them
@@ -95,6 +106,8 @@ angular
               this.backingModel.push({ key: key, value: this.model[key] });
             });
           }
+
+          this.formattedValues = this.backingModel.map((pair) => this.formatValueForDisplay(pair.value));
         };
 
         $scope.$watch(() => JSON.stringify(this.backingModel), this.synchronize);