diff --git a/compiler/forget/packages/playground/components/Editor/Output.tsx b/compiler/forget/packages/playground/components/Editor/Output.tsx
index 07ddfe04cf..59671f872d 100644
--- a/compiler/forget/packages/playground/components/Editor/Output.tsx
+++ b/compiler/forget/packages/playground/components/Editor/Output.tsx
@@ -9,59 +9,22 @@ import MonacoEditor from "@monaco-editor/react";
 import { HIR } from "babel-plugin-react-forget";
 import prettier from "prettier";
 import prettierParserBabel from "prettier/parser-babel";
-import { memo, useMemo } from "react";
+import { memo, useMemo, useState } from "react";
 import type { Store } from "../../lib/stores";
-import TabbedWindow, { TabTypes } from "../TabbedWindow";
+import TabbedWindow from "../TabbedWindow";
 import { monacoOptions } from "./monacoOptions";
-const {
-  buildReactiveFunction,
-  codegenReactiveFunction,
-  eliminateRedundantPhi,
-  enterSSA,
-  Environment,
-  flattenReactiveLoops,
-  inferTypes,
-  inferMutableRanges,
-  inferReactiveScopes,
-  inferReactiveScopeVariables,
-  inferReferenceEffects,
-  leaveSSA,
-  lower,
-  parseFunctions,
-  printHIR,
-  printReactiveFunction,
-  propagateScopeDependencies,
-  pruneUnusedLabels,
-  pruneUnusedScopes,
-} = HIR;
+const { parseFunctions, printHIR, printReactiveFunction } = HIR;
 const MemoizedOutput = memo(Output);
 
 export default MemoizedOutput;
 
 type Props = {
   store: Store;
-  tabsOpen: Map<TabTypes, boolean>;
-  setTabsOpen: (newTab: Map<TabTypes, boolean>) => void;
-};
-
-type CompilerOutput = {
-  ssaOutput: string;
-  hirOutput: string;
-  eliminateRedundantPhiOutput: string;
-  inferTypesOutput: string;
-  inferReferenceEffectsOutput: string;
-  inferMutableRangesOutput: string;
-  inferReactiveScopeVariablesOutput: string;
-  inferReactiveScopesOutput: string;
-  reactiveFunctionOutput: string;
-  leaveSSAOutput: string;
-  codegenOutput: string;
-  sourceMapUrl: string | null;
 };
 
 type CompilerError = string;
 
-function compile(source: string): CompilerOutput | CompilerError {
+function compile(source: string): Map<string, React.ReactNode> | CompilerError {
   try {
     const astFunctions = parseFunctions(source);
     if (astFunctions.length === 0) {
@@ -70,82 +33,96 @@ function compile(source: string): CompilerOutput | CompilerError {
 
     // TODO: Handle multiple functions
     const func = astFunctions[0];
-    const env = new Environment();
-    const ir = lower(func, env);
 
-    const hirOutput = printHIR(ir.body);
-
-    enterSSA(ir, env);
-    const ssaOutput = printHIR(ir.body);
-
-    eliminateRedundantPhi(ir);
-    const eliminateRedundantPhiOutput = printHIR(ir.body);
-
-    inferTypes(ir);
-    const inferTypesOutput = printHIR(ir.body);
-
-    inferReferenceEffects(ir);
-    const inferReferenceEffectsOutput = printHIR(ir.body);
-
-    inferMutableRanges(ir);
-    const inferMutableRangesOutput = printHIR(ir.body);
-
-    leaveSSA(ir);
-    const leaveSSAOutput = printHIR(ir.body);
-
-    inferReactiveScopeVariables(ir);
-    const inferReactiveScopeVariablesOutput = printHIR(ir.body);
-
-    inferReactiveScopes(ir);
-    const inferReactiveScopesOutput = printHIR(ir.body);
-
-    const reactiveFunction = buildReactiveFunction(ir);
-    pruneUnusedLabels(reactiveFunction);
-    flattenReactiveLoops(reactiveFunction);
-    propagateScopeDependencies(reactiveFunction);
-    pruneUnusedScopes(reactiveFunction);
-    const reactiveFunctionOutput = printReactiveFunction(reactiveFunction);
-
-    const ast = codegenReactiveFunction(reactiveFunction);
-    const generated = generate(
-      ast,
-      {
-        sourceMaps: true,
-        sourceFileName: "input.js",
-      },
-      source
-    );
-    const sourceMapUrl = getSourceMapUrl(
-      generated.code,
-      JSON.stringify(generated.map)
-    );
-    const codegenOutput = prettier.format(generated.code, {
-      semi: true,
-      parser: "babel",
-      plugins: [prettierParserBabel],
+    const tabs = new Map<string, React.ReactNode>();
+    const generator = HIR.run(func);
+    let ast;
+    while (true) {
+      const next = generator.next();
+      if (next.done) {
+        ast = next.value;
+        break;
+      }
+      const result = next.value;
+      switch (result.kind) {
+        case "ast": {
+          const { code } = codegen(result.value, source);
+          tabs.set(
+            result.name,
+            <TextTabContent output={code}></TextTabContent>
+          );
+          break;
+        }
+        case "hir": {
+          const text = printHIR(result.value.body);
+          tabs.set(
+            result.name,
+            <TextTabContent output={text}></TextTabContent>
+          );
+          break;
+        }
+        case "reactive": {
+          const text = printReactiveFunction(result.value);
+          tabs.set(
+            result.name,
+            <TextTabContent output={text}></TextTabContent>
+          );
+          break;
+        }
+        default: {
+          throw new Error("Unexpected result kind");
+        }
+      }
+    }
+    // Ensure that JS and the JS source map come first
+    const reorderedTabs = new Map();
+    const { code, sourceMapUrl } = codegen(ast, source);
+    reorderedTabs.set("JS", <TextTabContent output={code}></TextTabContent>);
+    if (sourceMapUrl) {
+      reorderedTabs.set(
+        "SourceMap",
+        <>
+          <iframe
+            src={sourceMapUrl}
+            className="w-full h-96"
+            title="Generated Code"
+          />
+        </>
+      );
+    }
+    tabs.forEach((tab, name) => {
+      reorderedTabs.set(name, tab);
     });
-
-    return {
-      hirOutput,
-      ssaOutput,
-      eliminateRedundantPhiOutput,
-      inferTypesOutput,
-      inferReferenceEffectsOutput,
-      inferMutableRangesOutput,
-      inferReactiveScopeVariablesOutput,
-      inferReactiveScopesOutput,
-      reactiveFunctionOutput,
-      leaveSSAOutput,
-      codegenOutput,
-      sourceMapUrl,
-    };
+    return reorderedTabs;
   } catch (e: any) {
     return e.toString();
   }
 }
 
+function codegen(
+  ast: any,
+  source: string
+): { code: any; sourceMapUrl: string | null } {
+  const generated = generate(
+    ast,
+    { sourceMaps: true, sourceFileName: "input.js" },
+    source
+  );
+  const sourceMapUrl = getSourceMapUrl(
+    generated.code,
+    JSON.stringify(generated.map)
+  );
+  const codegenOutput = prettier.format(generated.code, {
+    semi: true,
+    parser: "babel",
+    plugins: [prettierParserBabel],
+  });
+  return { code: codegenOutput, sourceMapUrl };
+}
+
 // TODO(gsn: Update diagnostics ƒrom HIR output
-function Output({ store, setTabsOpen, tabsOpen }: Props) {
+function Output({ store }: Props) {
+  const [tabsOpen, setTabsOpen] = useState<Set<string>>(() => new Set());
   const compilerOutput = useMemo(() => compile(store.source), [store.source]);
 
   if (typeof compilerOutput === "string") {
@@ -158,66 +135,7 @@ function Output({ store, setTabsOpen, tabsOpen }: Props) {
       defaultTab="HIR"
       setTabsOpen={setTabsOpen}
       tabsOpen={tabsOpen}
-      tabs={{
-        JS: <TextTabContent output={compilerOutput.codegenOutput} />,
-        HIR: (
-          <TextTabContent output={compilerOutput.hirOutput}></TextTabContent>
-        ),
-        SSA: (
-          <TextTabContent output={compilerOutput.ssaOutput}></TextTabContent>
-        ),
-        EliminateRedundantPhi: (
-          <TextTabContent
-            output={compilerOutput.eliminateRedundantPhiOutput}
-          ></TextTabContent>
-        ),
-        InferTypes: (
-          <TextTabContent
-            output={compilerOutput.inferTypesOutput}
-          ></TextTabContent>
-        ),
-        InferReferenceEffects: (
-          <TextTabContent
-            output={compilerOutput.inferReferenceEffectsOutput}
-          ></TextTabContent>
-        ),
-        InferMutableRanges: (
-          <TextTabContent
-            output={compilerOutput.inferMutableRangesOutput}
-          ></TextTabContent>
-        ),
-        LeaveSSA: (
-          <TextTabContent
-            output={compilerOutput.leaveSSAOutput}
-          ></TextTabContent>
-        ),
-        InferReactiveScopeVariables: (
-          <TextTabContent
-            output={compilerOutput.inferReactiveScopeVariablesOutput}
-          ></TextTabContent>
-        ),
-        InferReactiveScopes: (
-          <TextTabContent
-            output={compilerOutput.inferReactiveScopesOutput}
-          ></TextTabContent>
-        ),
-        ReactiveFunctions: (
-          <TextTabContent
-            output={compilerOutput.reactiveFunctionOutput}
-          ></TextTabContent>
-        ),
-        SourceMap: (
-          <>
-            {compilerOutput.sourceMapUrl && (
-              <iframe
-                src={compilerOutput.sourceMapUrl}
-                className="w-full h-96"
-                title="Generated Code"
-              />
-            )}
-          </>
-        ),
-      }}
+      tabs={compilerOutput}
     />
   );
 }
diff --git a/compiler/forget/packages/playground/components/Editor/index.tsx b/compiler/forget/packages/playground/components/Editor/index.tsx
index a9923ac92e..a6d826184f 100644
--- a/compiler/forget/packages/playground/components/Editor/index.tsx
+++ b/compiler/forget/packages/playground/components/Editor/index.tsx
@@ -8,7 +8,7 @@
 import clsx from "clsx";
 import invariant from "invariant";
 import { useSnackbar } from "notistack";
-import { useDeferredValue, useState } from "react";
+import { useDeferredValue } from "react";
 import { useMountEffect } from "../../hooks";
 import { defaultStore } from "../../lib/defaultStore";
 import {
@@ -19,7 +19,6 @@ import {
   type Store,
 } from "../../lib/stores";
 import { useStore, useStoreDispatch } from "../StoreContext";
-import { TabTypes } from "../TabbedWindow";
 import Input from "./Input";
 import Output from "./Output";
 
@@ -28,7 +27,6 @@ export default function Editor() {
   const deferredStore = useDeferredValue(store);
   const dispatchStore = useStoreDispatch();
   const { enqueueSnackbar } = useSnackbar();
-  const [tabsOpen, setTabsOpen] = useState<Map<TabTypes, boolean>>(new Map());
 
   useMountEffect(() => {
     let mountStore: Store;
@@ -62,11 +60,7 @@ export default function Editor() {
           <Input />
         </div>
         <div className={clsx("flex sm:flex")}>
-          <Output
-            tabsOpen={tabsOpen}
-            setTabsOpen={setTabsOpen}
-            store={deferredStore}
-          />
+          <Output store={deferredStore} />
         </div>
       </div>
     </>
diff --git a/compiler/forget/packages/playground/components/TabbedWindow.tsx b/compiler/forget/packages/playground/components/TabbedWindow.tsx
index d284d2d129..dadf5c281d 100644
--- a/compiler/forget/packages/playground/components/TabbedWindow.tsx
+++ b/compiler/forget/packages/playground/components/TabbedWindow.tsx
@@ -7,35 +7,21 @@
 
 import React, { useCallback } from "react";
 
-export type TabTypes =
-  | "HIR"
-  | "SSA"
-  | "EliminateRedundantPhi"
-  | "InferTypes"
-  | "InferReferenceEffects"
-  | "InferMutableRanges"
-  | "InferReactiveScopeVariables"
-  | "InferReactiveScopes"
-  | "ReactiveFunctions"
-  | "LeaveSSA"
-  | "JS"
-  | "SourceMap";
-
-type TabsRecord = Record<TabTypes, React.ReactNode>;
+type TabsRecord = Map<string, React.ReactNode>;
 
 export default function TabbedWindow(props: {
   defaultTab: string | null;
   tabs: TabsRecord;
-  tabsOpen: Map<TabTypes, boolean>;
-  setTabsOpen: (newTab: Map<TabTypes, boolean>) => void;
+  tabsOpen: Set<string>;
+  setTabsOpen: (newTab: Set<string>) => void;
 }): React.ReactElement {
   return (
     <div className="flex flex-row h-full">
-      {Object.keys(props.tabs).map((name, index, all) => {
+      {Array.from(props.tabs.keys()).map((name) => {
         return (
           <TabbedWindowItem
-            name={name as TabTypes}
-            key={index}
+            name={name}
+            key={name}
             tabs={props.tabs}
             tabsOpen={props.tabsOpen}
             setTabsOpen={props.setTabsOpen}
@@ -52,16 +38,20 @@ function TabbedWindowItem({
   tabsOpen,
   setTabsOpen,
 }: {
-  name: TabTypes;
+  name: string;
   tabs: TabsRecord;
-  tabsOpen: Map<TabTypes, boolean>;
-  setTabsOpen: (newTab: Map<TabTypes, boolean>) => void;
+  tabsOpen: Set<string>;
+  setTabsOpen: (newTab: Set<string>) => void;
 }): React.ReactElement {
-  const isShow = tabsOpen.get(name) ?? false;
+  const isShow = tabsOpen.has(name);
 
   const toggleTabs = useCallback(() => {
-    const nextState = new Map(tabsOpen);
-    nextState.set(name, !isShow);
+    const nextState = new Set(tabsOpen);
+    if (nextState.has(name)) {
+      nextState.delete(name);
+    } else {
+      nextState.add(name);
+    }
     setTabsOpen(nextState);
   }, [tabsOpen, name, isShow, setTabsOpen]);
 
@@ -75,7 +65,7 @@ function TabbedWindowItem({
           >
             - {name}
           </h2>
-          {tabs[name]}
+          {tabs.get(name) ?? <div>No output for {name}</div>}
         </div>
       ) : (
         <div className="relative items-center h-full px-4 py-8 align-middle border-r border-grey-200">