diff --git a/superset-frontend/package-lock.json b/superset-frontend/package-lock.json
index 0c264b907..44ed71153 100644
--- a/superset-frontend/package-lock.json
+++ b/superset-frontend/package-lock.json
@@ -33109,6 +33109,11 @@
       "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=",
       "dev": true
     },
+    "json-stringify-pretty-compact": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/json-stringify-pretty-compact/-/json-stringify-pretty-compact-2.0.0.tgz",
+      "integrity": "sha512-WRitRfs6BGq4q8gTgOy4ek7iPFXjbra0H3PmDLKm2xnZ+Gh1HUhiKGgCZkSPNULlP7mvfu6FV/mOLhCarspADQ=="
+    },
     "json-stringify-safe": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
diff --git a/superset-frontend/package.json b/superset-frontend/package.json
index 32a54c392..275ed53c8 100644
--- a/superset-frontend/package.json
+++ b/superset-frontend/package.json
@@ -113,6 +113,7 @@
     "interweave": "^11.2.0",
     "jquery": "^3.5.1",
     "json-bigint": "^1.0.0",
+    "json-stringify-pretty-compact": "^2.0.0",
     "lodash": "^4.17.20",
     "lodash-es": "^4.17.14",
     "mathjs": "^3.20.2",
diff --git a/superset-frontend/spec/javascripts/dashboard/components/PropertiesModal_spec.jsx b/superset-frontend/spec/javascripts/dashboard/components/PropertiesModal_spec.jsx
index 41cec782c..629b40f10 100644
--- a/superset-frontend/spec/javascripts/dashboard/components/PropertiesModal_spec.jsx
+++ b/superset-frontend/spec/javascripts/dashboard/components/PropertiesModal_spec.jsx
@@ -87,14 +87,14 @@ describe('PropertiesModal', () => {
           const modalInstance = wrapper.find('PropertiesModal').instance();
           modalInstance.setState({
             values: {
-              json_metadata: '{"color_scheme":"foo"}',
+              json_metadata: '{"color_scheme": "foo"}',
             },
           });
           it('will update the metadata', () => {
             const spy = jest.spyOn(modalInstance, 'onMetadataChange');
             modalInstance.onColorSchemeChange('SUPERSET_DEFAULT');
             expect(spy).toHaveBeenCalledWith(
-              '{"color_scheme":"SUPERSET_DEFAULT"}',
+              '{"color_scheme": "SUPERSET_DEFAULT"}',
             );
           });
         });
@@ -176,7 +176,7 @@ describe('PropertiesModal', () => {
       expect(modalInstance.state.values.dashboard_title).toEqual('New Title');
       expect(modalInstance.state.values.slug).toEqual('/new');
       expect(modalInstance.state.values.json_metadata).toEqual(
-        '{"something":"foo"}',
+        '{"something": "foo"}',
       );
     });
 
diff --git a/superset-frontend/src/dashboard/components/PropertiesModal.jsx b/superset-frontend/src/dashboard/components/PropertiesModal.jsx
index 6832843f5..f6d8ff7d2 100644
--- a/superset-frontend/src/dashboard/components/PropertiesModal.jsx
+++ b/superset-frontend/src/dashboard/components/PropertiesModal.jsx
@@ -19,6 +19,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Row, Col, FormControl } from 'react-bootstrap';
+import jsonStringify from 'json-stringify-pretty-compact';
 import Button from 'src/components/Button';
 import Dialog from 'react-bootstrap-dialog';
 import { AsyncSelect } from 'src/components/Select';
@@ -119,7 +120,7 @@ class PropertiesModal extends React.PureComponent {
       Object.keys(jsonMetadataObj).includes('color_scheme')
     ) {
       jsonMetadataObj.color_scheme = value;
-      this.onMetadataChange(JSON.stringify(jsonMetadataObj));
+      this.onMetadataChange(jsonStringify(jsonMetadataObj));
     }
 
     this.updateFormState('colorScheme', value);
@@ -157,7 +158,10 @@ class PropertiesModal extends React.PureComponent {
           ...state.values,
           dashboard_title: dashboard.dashboard_title || '',
           slug: dashboard.slug || '',
-          json_metadata: dashboard.json_metadata || '',
+          // format json with 2-space indentation
+          json_metadata: dashboard.json_metadata
+            ? jsonStringify(jsonMetadataObj)
+            : '',
           colorScheme: jsonMetadataObj.color_scheme,
         },
       }));