diff --git a/app/client/src/components/editorComponents/ApiResponseView.tsx b/app/client/src/components/editorComponents/ApiResponseView.tsx
index 55e23127a77d..0844e89debf7 100644
--- a/app/client/src/components/editorComponents/ApiResponseView.tsx
+++ b/app/client/src/components/editorComponents/ApiResponseView.tsx
@@ -223,6 +223,7 @@ const ApiResponseView = (props: Props) => {
                   : "",
               }}
               height={"100%"}
+              folding={true}
             />
           )}
         </ResponseTabWrapper>
diff --git a/app/client/src/components/editorComponents/CodeEditor/EditorConfig.ts b/app/client/src/components/editorComponents/CodeEditor/EditorConfig.ts
index 7e3231947598..dbf3cf2707ca 100644
--- a/app/client/src/components/editorComponents/CodeEditor/EditorConfig.ts
+++ b/app/client/src/components/editorComponents/CodeEditor/EditorConfig.ts
@@ -32,6 +32,7 @@ export type EditorConfig = {
   size: EditorSize;
   hinting: Array<HintHelper>;
   marking: Array<MarkHelper>;
+  folding?: boolean;
 };
 
 export const EditorThemes: Record<EditorTheme, string> = {
diff --git a/app/client/src/components/editorComponents/CodeEditor/index.tsx b/app/client/src/components/editorComponents/CodeEditor/index.tsx
index 7a8a0f00d1fa..8936f347e22a 100644
--- a/app/client/src/components/editorComponents/CodeEditor/index.tsx
+++ b/app/client/src/components/editorComponents/CodeEditor/index.tsx
@@ -42,6 +42,9 @@ import { retryPromise } from "utils/AppsmithUtils";
 import BindingPrompt from "./BindingPrompt";
 import { showBindingPrompt } from "./BindingPromptHelper";
 import ScrollIndicator from "components/ads/ScrollIndicator";
+import "codemirror/addon/fold/brace-fold";
+import "codemirror/addon/fold/foldgutter";
+import "codemirror/addon/fold/foldgutter.css";
 
 const LightningMenu = lazy(() =>
   retryPromise(() => import("components/editorComponents/LightningMenu")),
@@ -143,11 +146,21 @@ class CodeEditor extends Component<Props, State> {
       if (this.props.tabBehaviour === TabBehaviour.INPUT) {
         options.extraKeys["Tab"] = false;
       }
+      if (this.props.folding) {
+        options.foldGutter = true;
+        options.gutters = ["CodeMirror-linenumbers", "CodeMirror-foldgutter"];
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        options.foldOptions = {
+          widget: () => {
+            return "\u002E\u002E\u002E";
+          },
+        };
+      }
       this.editor = CodeMirror.fromTextArea(this.textArea.current, options);
-
       this.editor.on("change", _.debounce(this.handleChange, 300));
       this.editor.on("change", this.handleAutocompleteVisibility);
-      this.editor.on("change", this.onChangeTigger);
+      this.editor.on("change", this.onChangeTrigger);
       this.editor.on("keyup", this.handleAutocompleteHide);
       this.editor.on("focus", this.handleEditorFocus);
       this.editor.on("cursorActivity", this.handleCursorMovement);
@@ -225,7 +238,7 @@ class CodeEditor extends Component<Props, State> {
     }
   };
 
-  onChangeTigger = (cm: CodeMirror.Editor) => {
+  onChangeTrigger = (cm: CodeMirror.Editor) => {
     if (this.state.isFocused) {
       this.hinters.forEach((hinter) => hinter.trigger && hinter.trigger(cm));
     }
diff --git a/app/client/src/components/editorComponents/CodeEditor/styledComponents.ts b/app/client/src/components/editorComponents/CodeEditor/styledComponents.ts
index 97445be4d8d0..cdae4f9f0193 100644
--- a/app/client/src/components/editorComponents/CodeEditor/styledComponents.ts
+++ b/app/client/src/components/editorComponents/CodeEditor/styledComponents.ts
@@ -382,6 +382,11 @@ export const EditorWrapper = styled.div<{
     margin: 5px;
     margin-right: 11px;
   }
+  .CodeMirror-foldmarker {
+    color: inherit;
+    text-shadow: none;
+    font: inherit;
+  }
 `;
 
 export const IconContainer = styled.div`
diff --git a/app/client/src/components/editorComponents/ReadOnlyEditor.tsx b/app/client/src/components/editorComponents/ReadOnlyEditor.tsx
index f38d1bbb1aca..0304bc8c3d4e 100644
--- a/app/client/src/components/editorComponents/ReadOnlyEditor.tsx
+++ b/app/client/src/components/editorComponents/ReadOnlyEditor.tsx
@@ -15,6 +15,7 @@ interface Props {
     onChange?: (event: ChangeEvent<HTMLTextAreaElement>) => void;
   };
   height: string;
+  folding: boolean;
 }
 
 const ReadOnlyEditor = (props: Props) => {
@@ -30,6 +31,7 @@ const ReadOnlyEditor = (props: Props) => {
     showLightningMenu: false,
     showLineNumbers: true,
     borderLess: true,
+    folding: props.folding,
   };
   return <CodeEditor {...editorProps} />;
 };
diff --git a/app/client/src/components/editorComponents/RequestView.tsx b/app/client/src/components/editorComponents/RequestView.tsx
index 6a434645e7f6..da4e87d59a10 100644
--- a/app/client/src/components/editorComponents/RequestView.tsx
+++ b/app/client/src/components/editorComponents/RequestView.tsx
@@ -184,6 +184,7 @@ export function RequestView(props: {
                       value: props.requestBody,
                     }}
                     height={"100%"}
+                    folding={true}
                   />
                 ),
               },