diff --git a/app/client/src/components/editorComponents/ApiResponseView.tsx b/app/client/src/components/editorComponents/ApiResponseView.tsx
index 5f6716d94c..267f8410bb 100644
--- a/app/client/src/components/editorComponents/ApiResponseView.tsx
+++ b/app/client/src/components/editorComponents/ApiResponseView.tsx
@@ -10,7 +10,7 @@ import LoadingOverlayScreen from "components/editorComponents/LoadingOverlayScre
 import ReadOnlyEditor from "components/editorComponents/ReadOnlyEditor";
 import { getActionResponses } from "selectors/entitiesSelector";
 import { Colors } from "constants/Colors";
-import _ from "lodash";
+import _, { isString } from "lodash";
 import {
   CHECK_REQUEST_BODY,
   createMessage,
@@ -36,6 +36,7 @@ import Button, { Size } from "components/ads/Button";
 import EntityBottomTabs from "./EntityBottomTabs";
 import { DEBUGGER_TAB_KEYS } from "./Debugger/helpers";
 import { setCurrentTab } from "actions/debuggerActions";
+import { isHtml } from "./utils";
 
 type TextStyleProps = {
   accent: "primary" | "secondary" | "error";
@@ -240,6 +241,7 @@ function ApiResponseView(props: Props) {
 
   const messages = response?.messages;
   let responseHeaders;
+  let responseBody;
 
   // if no headers are present in the response, use the default body text.
   if (response.headers) {
@@ -248,6 +250,15 @@ function ApiResponseView(props: Props) {
     responseHeaders = {}; // if the response headers is empty show an empty object.
   }
 
+  if (response.body) {
+    // if the response is already a string and is of type html, do not stringify further but simply return the response string.
+    if (isString(response.body) && isHtml(response.body)) {
+      responseBody = response.body || "";
+    } else {
+      responseBody = JSON.stringify(response.body, null, 2);
+    }
+  }
+
   const tabs = [
     {
       key: "body",
@@ -298,9 +309,7 @@ function ApiResponseView(props: Props) {
                 folding
                 height={"100%"}
                 input={{
-                  value: response.body
-                    ? JSON.stringify(response.body, null, 2)
-                    : "",
+                  value: response.body ? (responseBody as string) : "",
                 }}
               />
             )}
diff --git a/app/client/src/components/editorComponents/utils.ts b/app/client/src/components/editorComponents/utils.ts
new file mode 100644
index 0000000000..72b72dd041
--- /dev/null
+++ b/app/client/src/components/editorComponents/utils.ts
@@ -0,0 +1,11 @@
+export const isHtml = (str: string) => {
+  const fragment = document.createRange().createContextualFragment(str);
+
+  // remove all non text nodes from fragment
+  fragment
+    .querySelectorAll("*")
+    .forEach((el: any) => el.parentNode.removeChild(el));
+
+  // if there is textContent, then its not a pure HTML
+  return !(fragment.textContent || "").trim();
+};