diff --git a/awx/ui/client/src/inventories/manage/hosts/hosts-edit.controller.js b/awx/ui/client/src/inventories/manage/hosts/hosts-edit.controller.js
index 4914cf9312..ec825bf510 100644
--- a/awx/ui/client/src/inventories/manage/hosts/hosts-edit.controller.js
+++ b/awx/ui/client/src/inventories/manage/hosts/hosts-edit.controller.js
@@ -19,14 +19,46 @@
 
             $scope.parseType = 'yaml';
             $scope.host = host;
-            $scope.variables = host.variables === '' ? '---' : host.variables;
+            $scope.variables = getVars(host.variables);
             $scope.name = host.name;
             $scope.description = host.description;
+
             ParseTypeChange({
                 scope: $scope,
                 field_id: 'host_variables',
             });
         }
+
+        // Adding this function b/c sometimes extra vars are returned to the
+        // UI as a string (ex: "foo: bar"), and other times as a
+        // json-object-string (ex: "{"foo": "bar"}"). CodeMirror wouldn't know
+        // how to prettify the latter. The latter occurs when host vars were
+        // system generated and not user-input (such as adding a cloud host);
+        function getVars(str){
+
+            // Quick function to test if the host vars are a json-object-string,
+            // by testing if they can be converted to a JSON object w/o error. 
+            function IsJsonString(str) {
+                try {
+                    JSON.parse(str);
+                } catch (e) {
+                    return false;
+                }
+                return true;
+            }
+
+            if(str === ''){
+                return '---';
+            }
+            else if(IsJsonString(str)){
+                str = JSON.parse(str);
+                return jsyaml.safeDump(str);
+            }
+            else if(!IsJsonString(str)){
+                return str;
+            }
+        }
+
         $scope.formCancel = function(){
             $state.go('^');
         };