diff --git a/website/src/components/MonacoPlayground/BothEditors.tsx b/website/src/components/MonacoPlayground/BothEditors.tsx
new file mode 100644
index 00000000..daa072a0
--- /dev/null
+++ b/website/src/components/MonacoPlayground/BothEditors.tsx
@@ -0,0 +1,11 @@
+import InputEditor from "./InputEditor";
+import OutputEditor from "./OutputEditor";
+
+export default function BothEditors() {
+  return (
+    <>
+      <InputEditor />
+      <OutputEditor />
+    </>
+  );
+}
diff --git a/website/src/components/PlaygroundFeatures/ConfigBar.tsx b/website/src/components/PlaygroundFeatures/ConfigBar.tsx
index 3400be10..8b5e4357 100644
--- a/website/src/components/PlaygroundFeatures/ConfigBar.tsx
+++ b/website/src/components/PlaygroundFeatures/ConfigBar.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import store, {
   getNullableByDefault,
   getOutputOption,
+  getSemanticNullability,
   getShowGratsDirectives,
   useAppSelector,
 } from "./store";
@@ -11,6 +12,7 @@ import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 
 export default function ConfigBar(): JSX.Element {
   const nullableByDefault = useAppSelector(getNullableByDefault);
+  const semanticNullability = useAppSelector(getSemanticNullability);
   const showGratsDirectives = useAppSelector(getShowGratsDirectives);
   const outputOption = useAppSelector(getOutputOption);
   const { gitHash } = useDocusaurusContext().siteConfig.customFields as {
@@ -44,7 +46,20 @@ export default function ConfigBar(): JSX.Element {
                 });
               }}
             />
-            Make fields nullable by default
+            Nullable by default
+          </Label>
+          <Label>
+            <input
+              checked={semanticNullability}
+              type="checkbox"
+              onChange={(e) => {
+                store.dispatch({
+                  type: "SEMANTIC_NULLABILITY_INPUT_CHANGED",
+                  value: e.target.checked,
+                });
+              }}
+            />
+            Semantic nullability
           </Label>
         </ConfigBlock>
         <div style={{ display: "flex", gap: "1em" }}>
diff --git a/website/src/components/PlaygroundFeatures/store.ts b/website/src/components/PlaygroundFeatures/store.ts
index cda3e1ac..98207b02 100644
--- a/website/src/components/PlaygroundFeatures/store.ts
+++ b/website/src/components/PlaygroundFeatures/store.ts
@@ -9,6 +9,7 @@ export type State = {
   doc: string;
   config: {
     nullableByDefault: boolean;
+    strictSemanticNullability: boolean;
     reportTypeScriptTypeErrors: boolean;
   };
   view: {
@@ -42,6 +43,10 @@ export type Action =
       type: "DEFAULT_NULLABLE_INPUT_CHANGED";
       value: boolean;
     }
+  | {
+      type: "SEMANTIC_NULLABILITY_INPUT_CHANGED";
+      value: boolean;
+    }
   | {
       type: "GRATS_EMITTED_NEW_RESULT";
       graphql: string;
@@ -84,14 +89,32 @@ function reducer(state: State = stateFromUrl(), action: Action) {
           outputOption: action.value,
         },
       };
-    case "DEFAULT_NULLABLE_INPUT_CHANGED":
+    case "DEFAULT_NULLABLE_INPUT_CHANGED": {
+      const strictSemanticNullability = action.value
+        ? state.config.strictSemanticNullability
+        : false;
       return {
         ...state,
         config: {
           ...state.config,
+          strictSemanticNullability,
           nullableByDefault: action.value,
         },
       };
+    }
+    case "SEMANTIC_NULLABILITY_INPUT_CHANGED": {
+      const nullableByDefault = action.value
+        ? true
+        : state.config.nullableByDefault;
+      return {
+        ...state,
+        config: {
+          ...state.config,
+          nullableByDefault,
+          strictSemanticNullability: action.value,
+        },
+      };
+    }
     case "GRATS_EMITTED_NEW_RESULT":
       return {
         ...state,
@@ -176,6 +199,10 @@ export function getNullableByDefault(state): boolean {
   return state.config.nullableByDefault;
 }
 
+export function getSemanticNullability(state): boolean {
+  return state.config.strictSemanticNullability;
+}
+
 export function getShowGratsDirectives(state): boolean {
   return state.view.showGratsDirectives;
 }
diff --git a/website/src/pages/playground/index.tsx b/website/src/pages/playground/index.tsx
index 30208e2a..40df7f13 100644
--- a/website/src/pages/playground/index.tsx
+++ b/website/src/pages/playground/index.tsx
@@ -7,11 +7,8 @@ import BrowserOnly from "@docusaurus/BrowserOnly";
 import FillRemainingHeight from "../../components/PlaygroundFeatures/FillRemainingHeight";
 import { bindGratsToStore } from "../../components/PlaygroundFeatures/gratsStoreBindings";
 import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";
-const InputEditor = React.lazy(
-  () => import("../../components/MonacoPlayground/InputEditor"),
-);
-const OutputEditor = React.lazy(
-  () => import("../../components/MonacoPlayground/OutputEditor"),
+const BothEditors = React.lazy(
+  () => import("../../components/MonacoPlayground/BothEditors"),
 );
 
 if (ExecutionEnvironment.canUseDOM) {
@@ -68,8 +65,7 @@ export default function EditorView() {
                       </div>
                     }
                   >
-                    <InputEditor />
-                    <OutputEditor />
+                    <BothEditors />
                   </Suspense>
                 </div>
               </div>