diff --git a/awx/ui/client/lib/components/code-mirror/code-mirror.directive.js b/awx/ui/client/lib/components/code-mirror/code-mirror.directive.js
index 1611a736e5..07533030da 100644
--- a/awx/ui/client/lib/components/code-mirror/code-mirror.directive.js
+++ b/awx/ui/client/lib/components/code-mirror/code-mirror.directive.js
@@ -77,6 +77,14 @@ function atCodeMirrorController (
             return true;
         }
 
+        if (typeof str !== 'string') {
+            const yamlStr = jsyaml.safeDump(str);
+            // jsyaml.safeDump doesn't process an empty object correctly
+            if (yamlStr === '{}\n') {
+                return '---';
+            }
+            return yamlStr;
+        }
         if (str === '' || str === '{}') {
             return '---';
         } else if (IsJsonString(str)) {
diff --git a/awx/ui/client/src/inventories-hosts/shared/ansible-facts/ansible-facts.controller.js b/awx/ui/client/src/inventories-hosts/shared/ansible-facts/ansible-facts.controller.js
index 2f99c6a075..a4ab5f1024 100644
--- a/awx/ui/client/src/inventories-hosts/shared/ansible-facts/ansible-facts.controller.js
+++ b/awx/ui/client/src/inventories-hosts/shared/ansible-facts/ansible-facts.controller.js
@@ -4,25 +4,17 @@
  * All Rights Reserved
  *************************************************/
 
-function AnsibleFacts($scope, Facts, ParseTypeChange, ParseVariableString) {
+function AnsibleFacts($scope, Facts) {
 
     function init() {
-        $scope.facts = ParseVariableString(Facts);
+        $scope.facts = Facts;
         let rows = (_.isEmpty(Facts)) ? 6 : 20;
         $("#host_facts").attr("rows", rows);
         $scope.parseType = 'yaml';
-        ParseTypeChange({
-             scope: $scope,
-             variable: 'facts',
-             parse_variable: 'parseType',
-             field_id: 'host_facts',
-             readOnly: true
-         });
     }
 
     init();
 
 }
 
-export default ['$scope', 'Facts', 'ParseTypeChange', 'ParseVariableString', AnsibleFacts
-];
+export default ['$scope', 'Facts', AnsibleFacts];
diff --git a/awx/ui/client/src/inventories-hosts/shared/ansible-facts/ansible-facts.partial.html b/awx/ui/client/src/inventories-hosts/shared/ansible-facts/ansible-facts.partial.html
index 5cb0ac2162..23f0891f0f 100644
--- a/awx/ui/client/src/inventories-hosts/shared/ansible-facts/ansible-facts.partial.html
+++ b/awx/ui/client/src/inventories-hosts/shared/ansible-facts/ansible-facts.partial.html
@@ -1,10 +1,13 @@
 <form class="Form ng-pristine ng-valid ng-valid-required" name="host_form" id="host_form" autocomplete="off" novalidate="">
     <div class="form-group Form-formGroup Form-formGroup--fullWidth">
-        <label class="Form-inputLabelContainer " for="facts">
-		          <span class="Form-inputLabel" translate>FACTS</span>
-         </label>
-         <div>
-             <textarea rows="6"  ng-model="facts" name="facts" class="form-control Form-textArea Form-formGroup--fullWidth" id="host_facts"></textarea>
-         </div>
+        <at-code-mirror
+          id="host_facts"
+          name="facts"
+          class="Form-textArea Form-formGroup--fullWidth"
+          label="facts"
+          variables="facts"
+          tooltip=""
+          disabled="true"
+        ></at-code-mirror>
      </div>
 </form>