diff --git a/frontend/libs/console/legacy-ce/src/lib/components/Services/ApiExplorer/GraphiQLWrapper/GraphiQLWrapper.js b/frontend/libs/console/legacy-ce/src/lib/components/Services/ApiExplorer/GraphiQLWrapper/GraphiQLWrapper.js
index 76ceeeacd29..272a77adadc 100644
--- a/frontend/libs/console/legacy-ce/src/lib/components/Services/ApiExplorer/GraphiQLWrapper/GraphiQLWrapper.js
+++ b/frontend/libs/console/legacy-ce/src/lib/components/Services/ApiExplorer/GraphiQLWrapper/GraphiQLWrapper.js
@@ -137,10 +137,23 @@ class GraphiQLWrapper extends Component {
     const handleClickPrettifyButton = () => {
       trackGraphiQlToolbarButtonClick('Prettify');
 
-      const editor = graphiqlContext.getQueryEditor();
-      const currentText = editor.getValue();
-      const prettyText = print(sdlParse(currentText));
-      editor.setValue(prettyText);
+      const queryEditor = graphiqlContext.getQueryEditor();
+      const currentQueryText = queryEditor.getValue();
+      const prettyQueryText = print(sdlParse(currentQueryText));
+      queryEditor.setValue(prettyQueryText);
+
+      try {
+        const variableEditor = graphiqlContext.getVariableEditor();
+        const currentVariableText = variableEditor.getValue();
+        const prettyVariableText = JSON.stringify(
+          JSON.parse(currentVariableText),
+          null,
+          2
+        );
+        variableEditor.setValue(prettyVariableText);
+      } catch (err) {
+        // Ignore json parse errors, since we can't format invalid json anyway
+      }
     };
 
     const handleToggleHistory = () => {