diff --git a/python/src/aiconfig/editor/client/src/components/JSONEditor.tsx b/python/src/aiconfig/editor/client/src/components/JSONEditor.tsx
index 07964f12a..9513c577b 100644
--- a/python/src/aiconfig/editor/client/src/components/JSONEditor.tsx
+++ b/python/src/aiconfig/editor/client/src/components/JSONEditor.tsx
@@ -72,7 +72,11 @@ export default memo(function JSONEditor({
         minimap: { enabled: false },
         wordWrap: "on",
       }}
-      onMount={(editor, monaco) => configureEditor(editor, monaco, schema)}
+      onMount={(editor, monaco) => {
+        if (schema) {
+          configureEditor(editor, monaco, schema);
+        }
+      }}
     />
   );
 });
diff --git a/python/src/aiconfig/editor/client/src/components/prompt/model_settings/ModelSettingsRenderer.tsx b/python/src/aiconfig/editor/client/src/components/prompt/model_settings/ModelSettingsRenderer.tsx
index 5be8d6150..597850fde 100644
--- a/python/src/aiconfig/editor/client/src/components/prompt/model_settings/ModelSettingsRenderer.tsx
+++ b/python/src/aiconfig/editor/client/src/components/prompt/model_settings/ModelSettingsRenderer.tsx
@@ -1,9 +1,11 @@
 import ModelSettingsConfigRenderer from "./ModelSettingsConfigRenderer";
 import ModelSettingsSchemaRenderer from "./ModelSettingsSchemaRenderer";
 import { GenericPropertiesSchema } from "../../../utils/promptUtils";
-import { Flex, createStyles } from "@mantine/core";
+import { ActionIcon, Flex, Tooltip, createStyles } from "@mantine/core";
 import { JSONObject } from "aiconfig";
-import { memo } from "react";
+import { memo, useState } from "react";
+import { IconBraces, IconBracesOff } from "@tabler/icons-react";
+import JSONRenderer from "../../JSONRenderer";
 
 type Props = {
   settings?: JSONObject;
@@ -27,23 +29,40 @@ export default memo(function ModelSettingsRenderer({
   onUpdateModelSettings,
 }: Props) {
   const { classes } = useStyles();
-  let settingsComponent;
-
-  if (schema) {
-    settingsComponent = (
-      <ModelSettingsSchemaRenderer
-        settings={settings}
-        schema={schema}
-        onUpdateModelSettings={onUpdateModelSettings}
-      />
-    );
-  } else if (settings) {
-    settingsComponent = <ModelSettingsConfigRenderer settings={settings} />;
-  }
+  const [isRawJSON, setIsRawJSON] = useState(schema == null);
 
   return (
     <Flex direction="column" className={classes.settingsContainer}>
-      {settingsComponent}
+      {/* // TODO: Refactor this out to a generic wrapper for toggling JSONRenderer or children component */}
+      {/* // Only show the toggle if there is a schema to toggle between JSON and custom schema renderer */}
+      {schema && (
+        <Flex justify="flex-end">
+          <Tooltip label="Toggle JSON editor" withArrow>
+            <ActionIcon onClick={() => setIsRawJSON((curr) => !curr)}>
+              {isRawJSON ? (
+                <IconBracesOff size="1rem" />
+              ) : (
+                <IconBraces size="1rem" />
+              )}
+            </ActionIcon>
+          </Tooltip>
+        </Flex>
+      )}
+      {isRawJSON || !schema ? (
+        <JSONRenderer
+          content={settings}
+          onChange={(val) =>
+            onUpdateModelSettings(val as Record<string, unknown>)
+          }
+          // schema={schema} TODO: Add schema after fixing z-index issue
+        />
+      ) : (
+        <ModelSettingsSchemaRenderer
+          settings={settings}
+          schema={schema}
+          onUpdateModelSettings={onUpdateModelSettings}
+        />
+      )}
     </Flex>
   );
 });
diff --git a/python/src/aiconfig/editor/client/src/components/prompt/prompt_outputs/JSONOutput.tsx b/python/src/aiconfig/editor/client/src/components/prompt/prompt_outputs/JSONOutput.tsx
deleted file mode 100644
index a65593f78..000000000
--- a/python/src/aiconfig/editor/client/src/components/prompt/prompt_outputs/JSONOutput.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { JSONValue } from "aiconfig";
-import { memo } from "react";
-import JSONRenderer from "../../JSONRenderer";
-
-export default memo(function JSONOutput({ content }: { content: JSONValue }) {
-  return <JSONRenderer content={content} />;
-});
diff --git a/python/src/aiconfig/editor/client/src/components/prompt/prompt_outputs/PromptOutputWrapper.tsx b/python/src/aiconfig/editor/client/src/components/prompt/prompt_outputs/PromptOutputWrapper.tsx
index 9dd537e0e..2e67db808 100644
--- a/python/src/aiconfig/editor/client/src/components/prompt/prompt_outputs/PromptOutputWrapper.tsx
+++ b/python/src/aiconfig/editor/client/src/components/prompt/prompt_outputs/PromptOutputWrapper.tsx
@@ -7,7 +7,7 @@ import {
 } from "@tabler/icons-react";
 import { Output } from "aiconfig";
 import { memo, useState } from "react";
-import JSONOutput from "./JSONOutput";
+import JSONRenderer from "../../JSONRenderer";
 
 type Props = {
   children: React.ReactNode;
@@ -53,7 +53,7 @@ export default memo(function PromptOutputWrapper({
           </Tooltip>
         )}
       </Flex>
-      {isRawJSON ? <JSONOutput content={output} /> : <>{children}</>}
+      {isRawJSON ? <JSONRenderer content={output} /> : <>{children}</>}
     </>
   );
 });
diff --git a/python/src/aiconfig/editor/client/src/components/prompt/prompt_outputs/PromptOutputsRenderer.tsx b/python/src/aiconfig/editor/client/src/components/prompt/prompt_outputs/PromptOutputsRenderer.tsx
index 8fd44b1aa..1d8b11e6d 100644
--- a/python/src/aiconfig/editor/client/src/components/prompt/prompt_outputs/PromptOutputsRenderer.tsx
+++ b/python/src/aiconfig/editor/client/src/components/prompt/prompt_outputs/PromptOutputsRenderer.tsx
@@ -7,9 +7,9 @@ import {
 } from "aiconfig";
 import { memo } from "react";
 import { TextRenderer } from "../TextRenderer";
-import JSONOutput from "./JSONOutput";
 import PromptOutputWrapper from "./PromptOutputWrapper";
 import MimeTypeRenderer from "../../MimeTypeRenderer";
+import JSONRenderer from "../../JSONRenderer";
 
 type Props = {
   outputs: Output[];
@@ -25,7 +25,7 @@ const ExecuteResultOutput = memo(function ExecuteResultOutput({
   output: ExecuteResult;
 }) {
   if (output.data == null) {
-    return <JSONOutput content={output} />;
+    return <JSONRenderer content={output} />;
   }
 
   if (typeof output.data === "string") {
@@ -75,14 +75,14 @@ const ExecuteResultOutput = memo(function ExecuteResultOutput({
       // TODO: Tool calls rendering
       default:
         return (
-          <JSONOutput
+          <JSONRenderer
             content={(output.data as OutputDataWithToolCallsValue).value}
           />
         );
     }
   }
 
-  return <JSONOutput content={output.data} />;
+  return <JSONRenderer content={output.data} />;
 });
 
 const OutputRenderer = memo(function Output({ output }: { output: Output }) {