diff --git a/packages/cli/src/build/build.ts b/packages/cli/src/build/build.ts
index 8d9f816855..29d4e19e8f 100644
--- a/packages/cli/src/build/build.ts
+++ b/packages/cli/src/build/build.ts
@@ -338,7 +338,9 @@ async function buildAndOutputComponentFiles({
     try {
       const component = shouldOutputTypescript ? typescriptMitosisJson : javascriptMitosisJson;
 
-      transpiled = overrideFile ?? generator(options.options[target])({ path, component });
+      // TODO: this fix is only temporary.
+      transpiled =
+        overrideFile ?? generator(options.options[target])({ path, component })[0].content;
       debugTarget(`Success: transpiled ${path}. Output length: ${transpiled.length}`);
     } catch (error) {
       debugTarget(`Failure: transpiled ${path}.`);
diff --git a/packages/cli/src/commands/compile.ts b/packages/cli/src/commands/compile.ts
index a52fb006f0..131df48b44 100644
--- a/packages/cli/src/commands/compile.ts
+++ b/packages/cli/src/commands/compile.ts
@@ -12,6 +12,7 @@ import { GluegunCommand } from 'gluegun';
 import { join } from 'path';
 import { UnionToIntersection } from '../types';
 import { getMitosisConfig } from '../helpers/get-mitosis-config';
+import { flow } from 'fp-ts/lib/function';
 
 type GeneratorOpts = GeneratorOptions[Target];
 
@@ -102,8 +103,6 @@ const command: GluegunCommand = {
     }
 
     for await (const { data, path } of readFiles()) {
-      let output: any;
-
       if (outDir) {
         out = join(outDir, path!);
       }
@@ -132,7 +131,28 @@ const command: GluegunCommand = {
         }
 
         // TODO validate generator options
-        output = generator(generatorOpts as any)({ component: json, path });
+        const outputFiles = generator(generatorOpts as any)({ component: json, path });
+
+        const withHeader = (str: string | object) => {
+          return header && !isJSON(str) ? `${header}\n${str}` : str;
+        };
+        const prettyPrint = (str: string | object): string => {
+          return isJSON(str) ? JSON.stringify(str, null, 2) : str;
+        };
+        const formattedOutput = flow(withHeader, prettyPrint);
+
+        outputFiles.map((output) => {
+          if (!out) {
+            console.log(formattedOutput(output.content));
+            return;
+          }
+
+          print.info(out);
+
+          if (!dryRun) {
+            filesystem.write(out, formattedOutput(output.content));
+          }
+        });
       } catch (e) {
         print.divider();
         print.info(`Path: ${path}`);
@@ -141,27 +161,6 @@ const command: GluegunCommand = {
         print.error(e);
         process.exit(1);
       }
-
-      const isJSON = typeof output === 'object';
-
-      if (!isJSON) {
-        output = header ? `${header}\n${output}` : output;
-      }
-
-      if (!out) {
-        if (isJSON) {
-          console.log(JSON.stringify(output, null, 2));
-          return;
-        }
-        console.log(output);
-        return;
-      }
-
-      print.info(out);
-
-      if (!dryRun) {
-        filesystem.write(out, output);
-      }
     }
   },
 };
@@ -183,6 +182,10 @@ function isTarget(term: string): term is Target {
   return typeof targets[term as keyof typeof targets] !== 'undefined';
 }
 
+function isJSON(obj: any): obj is object {
+  return typeof obj === 'object';
+}
+
 async function readStdin() {
   const chunks: Buffer[] = [];
 
diff --git a/packages/core/src/generators/alpine/generate.ts b/packages/core/src/generators/alpine/generate.ts
index cd6c48c563..ffd44fe583 100644
--- a/packages/core/src/generators/alpine/generate.ts
+++ b/packages/core/src/generators/alpine/generate.ts
@@ -243,5 +243,5 @@ export const componentToAlpine: TranspilerGenerator<ToAlpineOptions> =
     if (options.plugins) {
       str = runPostCodePlugins(str, options.plugins);
     }
-    return str;
+    return [{ content: str, type: 'component' }];
   };
diff --git a/packages/core/src/generators/angular.ts b/packages/core/src/generators/angular.ts
index f7fd0148b6..12231dd426 100644
--- a/packages/core/src/generators/angular.ts
+++ b/packages/core/src/generators/angular.ts
@@ -25,7 +25,12 @@ import { getPropFunctions } from '../helpers/get-prop-functions';
 import { isString, kebabCase, uniq } from 'lodash';
 import { stripMetaProperties } from '../helpers/strip-meta-properties';
 import { removeSurroundingBlock } from '../helpers/remove-surrounding-block';
-import { BaseTranspilerOptions, TranspilerGenerator } from '../types/transpiler';
+import {
+  BaseTranspilerOptions,
+  GeneratorOutput,
+  Transpiler,
+  TranspilerGenerator,
+} from '../types/transpiler';
 import { indent } from '../helpers/indent';
 import { isSlotProperty, stripSlotPrefix } from '../helpers/slots';
 import { getCustomImports } from '../helpers/get-custom-imports';
@@ -580,7 +585,7 @@ export const componentToAngular: TranspilerGenerator<ToAngularOptions> =
       str = runPostCodePlugins(str, options.plugins);
     }
 
-    return str;
+    return [{ content: str, type: 'component' }];
   };
 
 const tryFormat = (str: string, parser: string) => {
diff --git a/packages/core/src/generators/html.ts b/packages/core/src/generators/html.ts
index 5476295b35..09d7f10585 100644
--- a/packages/core/src/generators/html.ts
+++ b/packages/core/src/generators/html.ts
@@ -863,7 +863,7 @@ export const componentToHtml: TranspilerGenerator<ToHtmlOptions> =
     if (options.plugins) {
       str = runPostCodePlugins(str, options.plugins);
     }
-    return str;
+    return [{ content: str, type: 'component' }];
   };
 
 // TODO: props support via custom elements
@@ -1514,5 +1514,5 @@ export const componentToCustomElement: TranspilerGenerator<ToHtmlOptions> =
       str = runPostCodePlugins(str, options.plugins);
     }
 
-    return str;
+    return [{ content: str, type: 'component' }];
   };
diff --git a/packages/core/src/generators/liquid.ts b/packages/core/src/generators/liquid.ts
index b6e2e8b733..8136eec151 100644
--- a/packages/core/src/generators/liquid.ts
+++ b/packages/core/src/generators/liquid.ts
@@ -187,5 +187,5 @@ export const componentToLiquid: TranspilerGenerator<ToLiquidOptions> =
     if (options.plugins) {
       str = runPostCodePlugins(str, options.plugins);
     }
-    return str;
+    return [{ content: str, type: 'component' }];
   };
diff --git a/packages/core/src/generators/lit/generate.ts b/packages/core/src/generators/lit/generate.ts
index 1ce9a06a63..08a676b9cd 100644
--- a/packages/core/src/generators/lit/generate.ts
+++ b/packages/core/src/generators/lit/generate.ts
@@ -296,5 +296,5 @@ export const componentToLit: TranspilerGenerator<ToLitOptions> =
     if (options.plugins) {
       str = runPostCodePlugins(str, options.plugins);
     }
-    return str;
+    return [{ content: str, type: 'component' }];
   };
diff --git a/packages/core/src/generators/marko/generate.ts b/packages/core/src/generators/marko/generate.ts
index 65936f3ba6..1c8208184e 100644
--- a/packages/core/src/generators/marko/generate.ts
+++ b/packages/core/src/generators/marko/generate.ts
@@ -296,7 +296,7 @@ ${htmlString}
     if (options.plugins) {
       finalStr = runPostCodePlugins(finalStr, options.plugins);
     }
-    return finalStr;
+    return [{ content: finalStr, type: 'component' }];
   };
 
 /**
diff --git a/packages/core/src/generators/mitosis.ts b/packages/core/src/generators/mitosis.ts
index 8bee8bf470..da34306e59 100644
--- a/packages/core/src/generators/mitosis.ts
+++ b/packages/core/src/generators/mitosis.ts
@@ -216,5 +216,5 @@ export const componentToMitosis: TranspilerGenerator<Partial<ToMitosisOptions>>
         throw err;
       }
     }
-    return str;
+    return [{ content: str, type: 'component' }];
   };
diff --git a/packages/core/src/generators/qwik/component-generator.ts b/packages/core/src/generators/qwik/component-generator.ts
index e35328ddba..e5b20c4df4 100644
--- a/packages/core/src/generators/qwik/component-generator.ts
+++ b/packages/core/src/generators/qwik/component-generator.ts
@@ -48,7 +48,7 @@ type StateValues = Record<
 
 export const componentToQwik: TranspilerGenerator<ToQwikOptions> =
   (userOptions = {}) =>
-  ({ component: _component, path }): string => {
+  ({ component: _component, path }) => {
     // Make a copy we can safely mutate, similar to babel's toolchain
     let component = fastClone(_component);
     if (userOptions.plugins) {
@@ -120,10 +120,10 @@ export const componentToQwik: TranspilerGenerator<ToQwikOptions> =
         sourceFile = runPreCodePlugins(sourceFile, userOptions.plugins);
         sourceFile = runPostCodePlugins(sourceFile, userOptions.plugins);
       }
-      return sourceFile;
+      return [{ content: sourceFile, type: 'component' }];
     } catch (e) {
       console.error(e);
-      return (e as Error).stack || String(e);
+      return [{ content: (e as Error).stack || String(e), type: 'component' }];
     }
   };
 
diff --git a/packages/core/src/generators/react/generator.ts b/packages/core/src/generators/react/generator.ts
index e3dddf4ca8..48358ecd0f 100644
--- a/packages/core/src/generators/react/generator.ts
+++ b/packages/core/src/generators/react/generator.ts
@@ -468,7 +468,7 @@ export const componentToReact: TranspilerGenerator<ToReactOptions> =
     if (options.plugins) {
       str = runPostCodePlugins(str, options.plugins);
     }
-    return str;
+    return [{ content: str, type: 'component' }];
   };
 
 const _componentToReact = (
diff --git a/packages/core/src/generators/solid/index.ts b/packages/core/src/generators/solid/index.ts
index 7e9dbdd141..13de0b95a9 100644
--- a/packages/core/src/generators/solid/index.ts
+++ b/packages/core/src/generators/solid/index.ts
@@ -417,5 +417,5 @@ export const componentToSolid: TranspilerGenerator<Partial<ToSolidOptions>> =
     if (options.plugins) {
       str = runPostCodePlugins(str, options.plugins);
     }
-    return str;
+    return [{ content: str, type: 'component' }];
   };
diff --git a/packages/core/src/generators/stencil/generate.ts b/packages/core/src/generators/stencil/generate.ts
index 0f3f53d885..27696e55cb 100644
--- a/packages/core/src/generators/stencil/generate.ts
+++ b/packages/core/src/generators/stencil/generate.ts
@@ -217,5 +217,6 @@ export const componentToStencil: TranspilerGenerator<ToStencilOptions> =
     if (options.plugins) {
       str = runPostCodePlugins(str, options.plugins);
     }
-    return str;
+
+    return [{ content: str, type: 'component' }];
   };
diff --git a/packages/core/src/generators/svelte/svelte.ts b/packages/core/src/generators/svelte/svelte.ts
index 200db1c25e..7d88999be0 100644
--- a/packages/core/src/generators/svelte/svelte.ts
+++ b/packages/core/src/generators/svelte/svelte.ts
@@ -357,5 +357,5 @@ export const componentToSvelte: TranspilerGenerator<ToSvelteOptions> =
 
     str = runPostCodePlugins(str, options.plugins);
 
-    return str;
+    return [{ content: str, type: 'component' }];
   };
diff --git a/packages/core/src/generators/swift-ui.ts b/packages/core/src/generators/swift-ui.ts
index 49883c0a2f..b7d2c19361 100644
--- a/packages/core/src/generators/swift-ui.ts
+++ b/packages/core/src/generators/swift-ui.ts
@@ -383,5 +383,5 @@ export const componentToSwift: TranspilerGenerator<ToSwiftOptions> =
       str = format(str);
     }
 
-    return str;
+    return [{ content: str, type: 'component' }];
   };
diff --git a/packages/core/src/generators/template.ts b/packages/core/src/generators/template.ts
index cf327482f2..5a5861e527 100644
--- a/packages/core/src/generators/template.ts
+++ b/packages/core/src/generators/template.ts
@@ -147,5 +147,5 @@ export const componentToTemplate: TranspilerGenerator<ToTemplateOptions> =
     if (options.plugins) {
       str = runPostCodePlugins(str, options.plugins);
     }
-    return str;
+    return [{ content: str, type: 'component' }];
   };
diff --git a/packages/core/src/generators/vue/vue.ts b/packages/core/src/generators/vue/vue.ts
index 491bfe7e5f..199d9617fc 100644
--- a/packages/core/src/generators/vue/vue.ts
+++ b/packages/core/src/generators/vue/vue.ts
@@ -269,7 +269,7 @@ const componentToVue: TranspilerGenerator<Partial<ToVueOptions>> =
     }
     str = str.replace(/<script(.*)>\n?<\/script>/g, '').trim();
 
-    return str;
+    return [{ content: str, type: 'component' }];
   };
 
 export const componentToVue2 = (vueOptions?: VueOptsWithoutVersion) =>
diff --git a/packages/core/src/types/transpiler.ts b/packages/core/src/types/transpiler.ts
index 2ace4362bb..5ec8400c51 100644
--- a/packages/core/src/types/transpiler.ts
+++ b/packages/core/src/types/transpiler.ts
@@ -6,7 +6,14 @@ export interface TranspilerArgs {
   component: MitosisComponent;
 }
 
-export type Transpiler<R = string> = (args: TranspilerArgs) => R;
+export type GeneratorOutput<R = string> = {
+  // content of output. Currently either a component string or a builder component JSON.
+  content: R;
+  // in the future, we will add more types like 'styles' for CSS Modules, etc.
+  type: 'component';
+};
+
+export type Transpiler<R = string> = (args: TranspilerArgs) => GeneratorOutput<R>[];
 
 /**
  * This type guarantees that all code generators receive the same base options
diff --git a/packages/fiddle/src/components/Fiddle/Fiddle.tsx b/packages/fiddle/src/components/Fiddle/Fiddle.tsx
index 21746d8be2..4213e93194 100644
--- a/packages/fiddle/src/components/Fiddle/Fiddle.tsx
+++ b/packages/fiddle/src/components/Fiddle/Fiddle.tsx
@@ -282,7 +282,7 @@ export default function Fiddle() {
       }
       mitosisCore().then((mitosis) => {
         const jsxJson = mitosis.builderContentToMitosisComponent(builderJson);
-        state.code = mitosis.componentToMitosis()({ component: jsxJson });
+        state.code = mitosis.componentToMitosis()({ component: jsxJson })[0].content;
         state.pendingBuilderChange = null;
       });
     },
@@ -343,6 +343,8 @@ export default function Fiddle() {
           })
         )({ component: json, path: '' });
 
+        state.output = output[0].content;
+
         const { componentToBuilder } = await mitosisCore();
         const newBuilderData = await componentToBuilder()({ component: json });
         setBuilderData(newBuilderData);