diff --git a/src/components/CodeEditor.tsx b/src/components/CodeEditor.tsx
index 80b19041..17d11587 100644
--- a/src/components/CodeEditor.tsx
+++ b/src/components/CodeEditor.tsx
@@ -90,6 +90,7 @@ export const CodeEditor = ({
     ata(`
 import React from "@types/react/jsx-runtime"
 import { Circuit } from "@tscircuit/core"
+import type { CommonLayoutProps } from "@tscircuit/props"
 ${code}
 `)
 
@@ -140,5 +141,14 @@ ${code}
     return <div className="font-mono whitespace-pre-wrap text-xs">{code}</div>
   }
 
-  return <div ref={editorRef} style={{ height: "640px", width: "100%" }} />
+  return (
+    <div
+      ref={editorRef}
+      style={{
+        height: "640px",
+        width: "100%",
+        overflow: "auto",
+      }}
+    />
+  )
 }
diff --git a/src/hooks/use-run-tsx/index.tsx b/src/hooks/use-run-tsx/index.tsx
index e9721cdc..e84cbbbd 100644
--- a/src/hooks/use-run-tsx/index.tsx
+++ b/src/hooks/use-run-tsx/index.tsx
@@ -104,13 +104,17 @@ export const useRunTsx = ({
 
         const module = evalCompiledJs(compiledJs!)
 
-        if (Object.keys(module.exports).length > 1) {
+        const componentExportKeys = Object.keys(module.exports).filter(
+          (key) => !key.startsWith("use"),
+        )
+
+        if (componentExportKeys.length > 1) {
           throw new Error(
-            `Too many exports, only export one thing. You exported: ${JSON.stringify(Object.keys(module.exports))}`,
+            `Too many exports, only export one component. You exported: ${JSON.stringify(Object.keys(module.exports))}`,
           )
         }
 
-        const primaryKey = Object.keys(module.exports)[0]
+        const primaryKey = componentExportKeys[0]
 
         const UserElm = (props: any) =>
           React.createElement(module.exports[primaryKey], props)