diff --git a/compiler/forget/packages/playground/components/Editor/Output.tsx b/compiler/forget/packages/playground/components/Editor/Output.tsx
index 68b1200375..55fdd43dad 100644
--- a/compiler/forget/packages/playground/components/Editor/Output.tsx
+++ b/compiler/forget/packages/playground/components/Editor/Output.tsx
@@ -8,12 +8,7 @@
 import generate from "@babel/generator";
 import * as t from "@babel/types";
 import MonacoEditor from "@monaco-editor/react";
-import {
-  printHIR,
-  printReactiveFunction,
-  type CompilerError,
-  type CompilerPipelineValue,
-} from "babel-plugin-react-forget";
+import { type CompilerError } from "babel-plugin-react-forget";
 import prettier from "prettier";
 import prettierParserBabel from "prettier/parser-babel";
 import { memo, useMemo, useState } from "react";
@@ -24,8 +19,23 @@ const MemoizedOutput = memo(Output);
 
 export default MemoizedOutput;
 
+export type PrintedCompilerPipelineValue =
+  | {
+      kind: "ast";
+      name: string;
+      fnName: string | null;
+      value: t.FunctionDeclaration;
+    }
+  | {
+      kind: "hir";
+      name: string;
+      fnName: string | null;
+      value: string;
+    }
+  | { kind: "reactive"; name: string; fnName: string | null; value: string };
+
 export type CompilerOutput =
-  | { kind: "ok"; results: Map<string, CompilerPipelineValue[]> }
+  | { kind: "ok"; results: Map<string, PrintedCompilerPipelineValue[]> }
   | { kind: "err"; error: CompilerError };
 
 type Props = {
@@ -45,8 +55,8 @@ function tabify(source: string, compilerOutput: CompilerOutput) {
       switch (result.kind) {
         case "hir": {
           const prev = concattedResults.get(result.name);
-          const next = printHIR(result.value.body);
-          const identName = `function ${result.value.id?.name}`;
+          const next = result.value;
+          const identName = `function ${result.fnName}`;
           if (prev != null) {
             concattedResults.set(passName, `${prev}\n\n${identName}\n${next}`);
           } else {
@@ -56,7 +66,7 @@ function tabify(source: string, compilerOutput: CompilerOutput) {
         }
         case "reactive": {
           const prev = concattedResults.get(passName);
-          const next = printReactiveFunction(result.value);
+          const next = result.value;
           if (prev != null) {
             concattedResults.set(passName, `${prev}\n\n${next}`);
           } else {
diff --git a/compiler/forget/packages/playground/components/Editor/index.tsx b/compiler/forget/packages/playground/components/Editor/index.tsx
index 9cea6e046a..a75b79b419 100644
--- a/compiler/forget/packages/playground/components/Editor/index.tsx
+++ b/compiler/forget/packages/playground/components/Editor/index.tsx
@@ -8,7 +8,11 @@
 import { parse } from "@babel/parser";
 import traverse, { NodePath } from "@babel/traverse";
 import * as t from "@babel/types";
-import { CompilerPipelineValue, run } from "babel-plugin-react-forget";
+import {
+  printHIR,
+  printReactiveFunction,
+  run,
+} from "babel-plugin-react-forget";
 import clsx from "clsx";
 import invariant from "invariant";
 import { useSnackbar } from "notistack";
@@ -24,7 +28,11 @@ import {
 } from "../../lib/stores";
 import { useStore, useStoreDispatch } from "../StoreContext";
 import Input from "./Input";
-import { CompilerOutput, default as Output } from "./Output";
+import {
+  CompilerOutput,
+  default as Output,
+  PrintedCompilerPipelineValue,
+} from "./Output";
 
 function parseFunctions(
   source: string
@@ -50,8 +58,8 @@ function parseFunctions(
 
 function compile(source: string): CompilerOutput {
   try {
-    const results = new Map<string, CompilerPipelineValue[]>();
-    const upsert = (result: CompilerPipelineValue) => {
+    const results = new Map<string, PrintedCompilerPipelineValue[]>();
+    const upsert = (result: PrintedCompilerPipelineValue) => {
       const entry = results.get(result.name);
       if (Array.isArray(entry)) {
         entry.push(result);
@@ -61,7 +69,39 @@ function compile(source: string): CompilerOutput {
     };
     for (const fn of parseFunctions(source)) {
       for (const result of run(fn)) {
-        upsert(result);
+        const fnName = fn.node.id?.name ?? null;
+        switch (result.kind) {
+          case "ast": {
+            upsert({
+              kind: "ast",
+              fnName,
+              name: result.name,
+              value: result.value,
+            });
+            break;
+          }
+          case "hir": {
+            upsert({
+              kind: "hir",
+              fnName,
+              name: result.name,
+              value: printHIR(result.value.body),
+            });
+            break;
+          }
+          case "reactive": {
+            upsert({
+              kind: "reactive",
+              fnName,
+              name: result.name,
+              value: printReactiveFunction(result.value),
+            });
+            break;
+          }
+          default: {
+            throw new Error(`Unhandled result ${result}`);
+          }
+        }
       }
     }
     return { kind: "ok", results };