diff --git a/ui/MainLayout.tsx b/ui/MainLayout.tsx
index 4cbec75..ddefdae 100644
--- a/ui/MainLayout.tsx
+++ b/ui/MainLayout.tsx
@@ -13,6 +13,24 @@ const WindowTitles = {
   output: "Execution Output",
 };
 
+/**
+ * Default layout of the mosaic. This must be defined outside of
+ * the React component to persist layout adjustments by the user.
+ */
+const INITIAL_LAYOUT: MosaicNode<WINDOW_ID> = {
+  direction: "row",
+  first: "editor",
+  second: {
+    direction: "column",
+    first: "renderer",
+    second: {
+      direction: "row",
+      first: "input",
+      second: "output",
+    },
+  },
+};
+
 type Props = {
   langId: string;
   langName: string;
@@ -34,20 +52,6 @@ export const MainLayout = (props: Props) => {
     output: props.renderOutput,
   };
 
-  const INITIAL_LAYOUT: MosaicNode<WINDOW_ID> = {
-    direction: "row",
-    first: "editor",
-    second: {
-      direction: "column",
-      first: "renderer",
-      second: {
-        direction: "row",
-        first: "input",
-        second: "output",
-      },
-    },
-  };
-
   return (
     <div style={{ height: "100%", display: "flex", flexDirection: "column" }}>
       <Header