diff --git a/website/src/components/Oven/Oven.jsx b/website/src/components/Oven/Oven.jsx
index a4199b5e..eb3c8692 100644
--- a/website/src/components/Oven/Oven.jsx
+++ b/website/src/components/Oven/Oven.jsx
@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import { loadFeaturedPatterns, loadPublicPatterns } from '@src/user_pattern_utils.mjs';
 import { MiniRepl } from '@src/docs/MiniRepl';
-import { PatternLabel } from '@src/repl/panel/PatternsTab';
+import { PatternLabel } from '@src/repl/components/panel/PatternsTab';
 
 function PatternList({ patterns }) {
   return (
diff --git a/website/src/components/Udels/UdelFrame.jsx b/website/src/components/Udels/UdelFrame.jsx
index 78d28944..856aa831 100644
--- a/website/src/components/Udels/UdelFrame.jsx
+++ b/website/src/components/Udels/UdelFrame.jsx
@@ -2,8 +2,9 @@ import { useRef } from 'react';
 
 export function UdelFrame({ onEvaluate, hash, instance }) {
   const ref = useRef();
-
+ console.info('frame')
   window.addEventListener('message', (message) => {
+    console.info(message, 'message')
     const childWindow = ref?.current?.contentWindow;
     if (message == null || message.source !== childWindow) {
       return; // Skip message in this event listener
diff --git a/website/src/components/Udels/Udels.jsx b/website/src/components/Udels/Udels.jsx
index 72d983e0..c3062419 100644
--- a/website/src/components/Udels/Udels.jsx
+++ b/website/src/components/Udels/Udels.jsx
@@ -4,36 +4,7 @@ import { UdelFrame } from './UdelFrame';
 import { useState } from 'react';
 import UdelsHeader from './UdelsHeader';
 
-function NumberInput({ value, onChange, label = '', min, max }) {
-  const [localState, setLocalState] = useState(value);
-  const [isFocused, setIsFocused] = useState(false);
 
-  return (
-    <label>
-      {label}
-      <input
-        min={min}
-        max={max}
-        className="p-2 bg-background rounded-md text-foreground"
-        type={'number'}
-        value={(isFocused ? localState : value) ?? ''}
-        onFocus={() => {
-          setLocalState(value);
-          setIsFocused(true);
-        }}
-        onBlur={() => {
-          onChange(Math.max(localState, min));
-          setIsFocused(false);
-        }}
-        onChange={(e) => {
-          let val = e.target.value;
-          val = val.length ? Math.min(parseFloat(e.target.value), max) : null;
-          setLocalState(val);
-        }}
-      />
-    </label>
-  );
-}
 const defaultHash = 'c3RhY2soCiAgCik%3D';
 
 const getHashesFromUrl = () => {
@@ -60,6 +31,7 @@ export function Udels() {
   const onEvaluate = (key, code) => {
     const hashes = getHashesFromUrl();
     hashes[key] = code2hash(code);
+  
     updateURLHashes(hashes);
   };
   //   useEffect(() => {
@@ -78,17 +50,6 @@ export function Udels() {
       }}
     >
       <UdelsHeader numWindows={numWindows} setNumWindows={numWindowsOnChange} />
-      {/* <div
-        style={{
-          height: 40,
-          width: '100',
-          position: 'absolute',
-          color: 'white',
-          zIndex: 10,
-        }}
-      >
-        <NumberInput min={1} max={8} value={numWindows} onChange={numWindowsOnChange} />
-      </div> */}
       <div
         style={{
           display: 'flex',
diff --git a/website/src/components/Udels/UdelsEditor.jsx b/website/src/components/Udels/UdelsEditor.jsx
index 6b791511..d0d4a956 100644
--- a/website/src/components/Udels/UdelsEditor.jsx
+++ b/website/src/components/Udels/UdelsEditor.jsx
@@ -1,7 +1,7 @@
 import { ReplContext } from '@src/repl/util.mjs';
 
-import Loader from '@src/repl/Loader';
-import { Panel } from '@src/repl/panel/Panel';
+import Loader from '@src/repl/components/Loader';
+import { Panel } from '@src/repl/components/panel/Panel';
 import { Code } from '@src/repl/components/Code';
 import BigPlayButton from '@src/repl/components/BigPlayButton';
 import UserFacingErrorMessage from '@src/repl/components/UserFacingErrorMessage';
diff --git a/website/src/components/Udels/UdelsHeader.tsx b/website/src/components/Udels/UdelsHeader.tsx
index 7555e182..7049e781 100644
--- a/website/src/components/Udels/UdelsHeader.tsx
+++ b/website/src/components/Udels/UdelsHeader.tsx
@@ -1,4 +1,4 @@
-import NumberInput from '@src/repl/panel/NumberInput';
+import NumberInput from '@src/repl/components/NumberInput';
 
 export default function UdelsHeader(Props) {
   const { numWindows, setNumWindows } = Props;
diff --git a/website/src/repl/Repl.jsx b/website/src/repl/Repl.jsx
index 87ff653c..dc7cf338 100644
--- a/website/src/repl/Repl.jsx
+++ b/website/src/repl/Repl.jsx
@@ -6,7 +6,6 @@ This program is free software: you can redistribute it and/or modify it under th
 
 import { code2hash, logger, silence } from '@strudel/core';
 import { getDrawContext } from '@strudel/draw';
-import cx from '@src/cx.mjs';
 import { transpiler } from '@strudel/transpiler';
 import {
   getAudioContext,
@@ -29,18 +28,16 @@ import {
   getViewingPatternData,
   setViewingPatternData,
 } from '../user_pattern_utils.mjs';
-import { Header } from './Header';
-import Loader from './Loader';
-import { Panel } from './panel/Panel';
 import { useStore } from '@nanostores/react';
 import { prebake } from './prebake.mjs';
 import { getRandomTune, initCode, loadModules, shareCode, ReplContext, isUdels } from './util.mjs';
-import PlayCircleIcon from '@heroicons/react/20/solid/PlayCircleIcon';
 import './Repl.css';
 import { setInterval, clearInterval } from 'worker-timers';
 import { getMetadata } from '../metadata_parser';
 import UdelsEditor from '@components/Udels/UdelsEditor';
 
+import ReplEditor from './components/ReplEditor';
+
 const { latestCode } = settingsMap.get();
 
 let modulesLoading, presets, drawContext, clearCanvas, isIframe, audioReady;
@@ -241,40 +238,15 @@ export function Repl({ embedded = false }) {
     );
   }
 
-  const showPanel = !isEmbedded;
-
   return (
-    <ReplContext.Provider value={context}>
-      <div className={cx('h-full flex flex-col relative')}>
-        <Loader active={pending} />
-        <Header context={context} />
-        {isEmbedded && !started && (
-          <button
-            onClick={() => handleTogglePlay()}
-            className="text-white text-2xl fixed left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] z-[1000] m-auto p-4 bg-black rounded-md flex items-center space-x-2"
-          >
-            <PlayCircleIcon className="w-6 h-6" />
-            <span>play</span>
-          </button>
-        )}
-        <div className="grow flex relative overflow-hidden">
-          <section
-            className={'text-gray-100 cursor-text pb-0 overflow-auto grow' + (isZen ? ' px-10' : '')}
-            id="code"
-            ref={(el) => {
-              containerRef.current = el;
-              if (!editorRef.current) {
-                init();
-              }
-            }}
-          ></section>
-          {panelPosition === 'right' && showPanel && <Panel context={context} />}
-        </div>
-        {error && (
-          <div className="text-red-500 p-4 bg-lineHighlight animate-pulse">{error.message || 'Unknown Error :-/'}</div>
-        )}
-        {panelPosition === 'bottom' && showPanel && <Panel context={context} />}
-      </div>
-    </ReplContext.Provider>
+    <ReplEditor
+      panelPosition={panelPosition}
+      isEmbedded={isEmbedded}
+      context={context}
+      error={error}
+      init={init}
+      editorRef={editorRef}
+      containerRef={containerRef}
+    />
   );
 }
diff --git a/website/src/repl/Header.jsx b/website/src/repl/components/Header.jsx
similarity index 98%
rename from website/src/repl/Header.jsx
rename to website/src/repl/components/Header.jsx
index 748b84e4..288822dd 100644
--- a/website/src/repl/Header.jsx
+++ b/website/src/repl/components/Header.jsx
@@ -5,9 +5,9 @@ import PlayCircleIcon from '@heroicons/react/20/solid/PlayCircleIcon';
 import SparklesIcon from '@heroicons/react/20/solid/SparklesIcon';
 import StopCircleIcon from '@heroicons/react/20/solid/StopCircleIcon';
 import cx from '@src/cx.mjs';
-import { useSettings, setIsZen } from '../settings.mjs';
+import { useSettings, setIsZen } from '../../settings.mjs';
 // import { ReplContext } from './Repl';
-import './Repl.css';
+import '../Repl.css';
 const { BASE_URL } = import.meta.env;
 const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL;
 
diff --git a/website/src/repl/Loader.jsx b/website/src/repl/components/Loader.jsx
similarity index 100%
rename from website/src/repl/Loader.jsx
rename to website/src/repl/components/Loader.jsx
diff --git a/website/src/repl/components/NumberInput.jsx b/website/src/repl/components/NumberInput.jsx
new file mode 100644
index 00000000..0c3e7e53
--- /dev/null
+++ b/website/src/repl/components/NumberInput.jsx
@@ -0,0 +1,54 @@
+function Button(Props) {
+  const { children, onClick } = Props;
+
+  return (
+    <button
+      onClick={onClick}
+      type="button"
+      data-input-counter-increment="counter-input"
+      className="flex-shrink-0  bg-gray-700 hover:bg-gray-600 border-gray-600 inline-flex items-center justify-center border rounded-md h-5 w-5  focus:ring-gray-700 focus:ring-2 focus:outline-none"
+    >
+      {children}
+    </button>
+  );
+}
+export default function NumberInput(Props) {
+  const { value = 0, setValue, max, min } = Props;
+
+  return (
+    <div className="relative flex items-center">
+      <Button onClick={() => setValue(value - 1)}>
+        <svg
+          className="w-2.5 h-2.5 text-white"
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 18 2"
+        >
+          <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M1 1h16" />
+        </svg>
+      </Button>
+      <input
+        min={min}
+        max={max}
+        type="text"
+        data-input-counter
+        className="flex-shrink-0 text-white border-0 bg-transparent text-sm font-normal focus:outline-none focus:ring-0 max-w-[2.5rem] text-center"
+        placeholder=""
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+      />
+      <Button onClick={() => setValue(value + 1)}>
+        <svg
+          className="w-2.5 h-2.5 text-white"
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 18 18"
+        >
+          <path strokeLinecap="round" stroke="currentColor" strokeLinejoin="round" strokeWidth="2" d="M9 1v16M1 9h16" />
+        </svg>
+      </Button>
+    </div>
+  );
+}
diff --git a/website/src/repl/components/ReplEditor.jsx b/website/src/repl/components/ReplEditor.jsx
new file mode 100644
index 00000000..57eabb71
--- /dev/null
+++ b/website/src/repl/components/ReplEditor.jsx
@@ -0,0 +1,39 @@
+import { ReplContext } from '@src/repl/util.mjs';
+
+import Loader from '@src/repl/components/Loader';
+import { Panel } from '@src/repl/components/panel/Panel';
+import { Code } from '@src/repl/components/Code';
+import BigPlayButton from '@src/repl/components/BigPlayButton';
+import UserFacingErrorMessage from '@src/repl/components/UserFacingErrorMessage';
+import { Header } from './Header';
+
+
+// type Props = {
+//  context: replcontext,
+//  containerRef:  React.MutableRefObject<HTMLElement | null>,
+//  editorRef:  React.MutableRefObject<HTMLElement | null>,
+//  error: Error
+//  init: () => void
+//  isEmbedded: boolean
+// }
+
+export default function ReplEditor(Props) {
+  const { context, containerRef, editorRef, error, init, panelPosition } = Props;
+  const { pending, started, handleTogglePlay, isEmbedded } = context;
+  const showPanel = !isEmbedded;
+  return (
+    <ReplContext.Provider value={context}>
+      <div className='h-full flex flex-col relative'>
+        <Loader active={pending} />
+        <Header context={context} />
+        {isEmbedded && <BigPlayButton started={started} handleTogglePlay={handleTogglePlay} />}
+        <div className="grow flex relative overflow-hidden">
+          <Code containerRef={containerRef} editorRef={editorRef} init={init} />
+          {panelPosition === 'right' && showPanel && <Panel context={context} />}
+        </div>
+        <UserFacingErrorMessage error={error} />
+        {panelPosition === 'bottom' && showPanel && <Panel context={context} />}
+      </div>
+    </ReplContext.Provider>
+  );
+}
diff --git a/website/src/repl/panel/AudioDeviceSelector.jsx b/website/src/repl/components/panel/AudioDeviceSelector.jsx
similarity index 94%
rename from website/src/repl/panel/AudioDeviceSelector.jsx
rename to website/src/repl/components/panel/AudioDeviceSelector.jsx
index 969bf387..d1f13c22 100644
--- a/website/src/repl/panel/AudioDeviceSelector.jsx
+++ b/website/src/repl/components/panel/AudioDeviceSelector.jsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { getAudioDevices, setAudioDevice } from '../util.mjs';
+import { getAudioDevices, setAudioDevice } from '../../util.mjs';
 import { SelectInput } from './SelectInput';
 
 const initdevices = new Map();
diff --git a/website/src/repl/panel/ConsoleTab.jsx b/website/src/repl/components/panel/ConsoleTab.jsx
similarity index 100%
rename from website/src/repl/panel/ConsoleTab.jsx
rename to website/src/repl/components/panel/ConsoleTab.jsx
diff --git a/website/src/repl/panel/FilesTab.jsx b/website/src/repl/components/panel/FilesTab.jsx
similarity index 97%
rename from website/src/repl/panel/FilesTab.jsx
rename to website/src/repl/components/panel/FilesTab.jsx
index d78ec1ec..2e121fb5 100644
--- a/website/src/repl/panel/FilesTab.jsx
+++ b/website/src/repl/components/panel/FilesTab.jsx
@@ -1,6 +1,6 @@
 import { Fragment, useEffect } from 'react';
 import React, { useMemo, useState } from 'react';
-import { isAudioFile, readDir, dir, playFile } from '../files.mjs';
+import { isAudioFile, readDir, dir, playFile } from '../../files.mjs';
 
 export function FilesTab() {
   const [path, setPath] = useState([]);
diff --git a/website/src/repl/panel/Forms.jsx b/website/src/repl/components/panel/Forms.jsx
similarity index 100%
rename from website/src/repl/panel/Forms.jsx
rename to website/src/repl/components/panel/Forms.jsx
diff --git a/website/src/repl/panel/ImportSoundsButton.jsx b/website/src/repl/components/panel/ImportSoundsButton.jsx
similarity index 97%
rename from website/src/repl/panel/ImportSoundsButton.jsx
rename to website/src/repl/components/panel/ImportSoundsButton.jsx
index da45705f..7862b766 100644
--- a/website/src/repl/panel/ImportSoundsButton.jsx
+++ b/website/src/repl/components/panel/ImportSoundsButton.jsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useState } from 'react';
-import { registerSamplesFromDB, uploadSamplesToDB, userSamplesDBConfig } from '../idbutils.mjs';
+import { registerSamplesFromDB, uploadSamplesToDB, userSamplesDBConfig } from '../../idbutils.mjs';
 
 //choose a directory to locally import samples
 export default function ImportSoundsButton({ onComplete }) {
diff --git a/website/src/repl/panel/Panel.jsx b/website/src/repl/components/panel/Panel.jsx
similarity index 98%
rename from website/src/repl/panel/Panel.jsx
rename to website/src/repl/components/panel/Panel.jsx
index 7d35f0e4..a7bb6a83 100644
--- a/website/src/repl/panel/Panel.jsx
+++ b/website/src/repl/components/panel/Panel.jsx
@@ -4,7 +4,7 @@ import useEvent from '@src/useEvent.mjs';
 import cx from '@src/cx.mjs';
 import { nanoid } from 'nanoid';
 import { useCallback, useLayoutEffect, useEffect, useRef, useState } from 'react';
-import { setActiveFooter, useSettings } from '../../settings.mjs';
+import { setActiveFooter, useSettings } from '../../../settings.mjs';
 import { ConsoleTab } from './ConsoleTab';
 import { FilesTab } from './FilesTab';
 import { Reference } from './Reference';
diff --git a/website/src/repl/panel/PatternsTab.jsx b/website/src/repl/components/panel/PatternsTab.jsx
similarity index 95%
rename from website/src/repl/panel/PatternsTab.jsx
rename to website/src/repl/components/panel/PatternsTab.jsx
index cacbe897..5e9119b1 100644
--- a/website/src/repl/panel/PatternsTab.jsx
+++ b/website/src/repl/components/panel/PatternsTab.jsx
@@ -5,13 +5,13 @@ import {
   useActivePattern,
   useViewingPatternData,
   userPattern,
-} from '../../user_pattern_utils.mjs';
+} from '../../../user_pattern_utils.mjs';
 import { useMemo } from 'react';
-import { getMetadata } from '../../metadata_parser';
-import { useExamplePatterns } from '../useExamplePatterns';
-import { parseJSON, isUdels } from '../util.mjs';
+import { getMetadata } from '../../../metadata_parser.js';
+import { useExamplePatterns } from '../../useExamplePatterns.jsx';
+import { parseJSON, isUdels } from '../../util.mjs';
 import { ButtonGroup } from './Forms.jsx';
-import { settingsMap, useSettings } from '../../settings.mjs';
+import { settingsMap, useSettings } from '../../../settings.mjs';
 
 function classNames(...classes) {
   return classes.filter(Boolean).join(' ');
diff --git a/website/src/repl/panel/Reference.jsx b/website/src/repl/components/panel/Reference.jsx
similarity index 98%
rename from website/src/repl/panel/Reference.jsx
rename to website/src/repl/components/panel/Reference.jsx
index 9483e9c5..04297c0b 100644
--- a/website/src/repl/panel/Reference.jsx
+++ b/website/src/repl/components/panel/Reference.jsx
@@ -1,4 +1,4 @@
-import jsdocJson from '../../../../doc.json';
+import jsdocJson from '../../../../../doc.json';
 const visibleFunctions = jsdocJson.docs
   .filter(({ name, description }) => name && !name.startsWith('_') && !!description)
   .sort((a, b) => /* a.meta.filename.localeCompare(b.meta.filename) +  */ a.name.localeCompare(b.name));
diff --git a/website/src/repl/panel/SelectInput.jsx b/website/src/repl/components/panel/SelectInput.jsx
similarity index 100%
rename from website/src/repl/panel/SelectInput.jsx
rename to website/src/repl/components/panel/SelectInput.jsx
diff --git a/website/src/repl/panel/SettingsTab.jsx b/website/src/repl/components/panel/SettingsTab.jsx
similarity index 99%
rename from website/src/repl/panel/SettingsTab.jsx
rename to website/src/repl/components/panel/SettingsTab.jsx
index 36ec12bd..e1d047ea 100644
--- a/website/src/repl/panel/SettingsTab.jsx
+++ b/website/src/repl/components/panel/SettingsTab.jsx
@@ -1,6 +1,6 @@
-import { defaultSettings, settingsMap, useSettings } from '../../settings.mjs';
+import { defaultSettings, settingsMap, useSettings } from '../../../settings.mjs';
 import { themes } from '@strudel/codemirror';
-import { isUdels } from '../util.mjs';
+import { isUdels } from '../../util.mjs';
 import { ButtonGroup } from './Forms.jsx';
 import { AudioDeviceSelector } from './AudioDeviceSelector.jsx';
 
diff --git a/website/src/repl/panel/SoundsTab.jsx b/website/src/repl/components/panel/SoundsTab.jsx
similarity index 98%
rename from website/src/repl/panel/SoundsTab.jsx
rename to website/src/repl/components/panel/SoundsTab.jsx
index 9b35d04b..8b7b36a8 100644
--- a/website/src/repl/panel/SoundsTab.jsx
+++ b/website/src/repl/components/panel/SoundsTab.jsx
@@ -2,7 +2,7 @@ import useEvent from '@src/useEvent.mjs';
 import { useStore } from '@nanostores/react';
 import { getAudioContext, soundMap, connectToDestination } from '@strudel/webaudio';
 import React, { useMemo, useRef } from 'react';
-import { settingsMap, useSettings } from '../../settings.mjs';
+import { settingsMap, useSettings } from '../../../settings.mjs';
 import { ButtonGroup } from './Forms.jsx';
 import ImportSoundsButton from './ImportSoundsButton.jsx';
 
diff --git a/website/src/repl/panel/WelcomeTab.jsx b/website/src/repl/components/panel/WelcomeTab.jsx
similarity index 100%
rename from website/src/repl/panel/WelcomeTab.jsx
rename to website/src/repl/components/panel/WelcomeTab.jsx
diff --git a/website/src/repl/panel/NumberInput.jsx b/website/src/repl/panel/NumberInput.jsx
deleted file mode 100644
index d6683587..00000000
--- a/website/src/repl/panel/NumberInput.jsx
+++ /dev/null
@@ -1,62 +0,0 @@
-function Button(Props) {
-  const { children, onClick } = Props;
-
-  return (
-    <button
-      onClick={onClick}
-      type="button"
-      data-input-counter-increment="counter-input"
-      class="flex-shrink-0  bg-gray-700 hover:bg-gray-600 border-gray-600 inline-flex items-center justify-center border rounded-md h-5 w-5  focus:ring-gray-700 focus:ring-2 focus:outline-none"
-    >
-      {children}
-    </button>
-  );
-}
-export default function NumberInput(Props) {
-  const { value = 0, setValue, max, min} = Props;
-
-  return (
-    <div class="relative flex items-center">
-      <Button onClick={() => setValue(value - 1)}>
-        <svg
-          class="w-2.5 h-2.5 text-white"
-          aria-hidden="true"
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 18 2"
-        >
-          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h16" />
-        </svg>
-      </Button>
-      <input
-        min={min}
-        max={max}
-        type="text"
-        data-input-counter
-        class="flex-shrink-0 text-white border-0 bg-transparent text-sm font-normal focus:outline-none focus:ring-0 max-w-[2.5rem] text-center"
-        placeholder=""
-        value={value}
-        onChange={e => setValue(e.target.value)}
-      />
-      <Button onClick={() => setValue(value + 1)}> 
-        <svg
-          class="w-2.5 h-2.5 text-white"
-          aria-hidden="true"
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 18 18"
-        >
-          <path
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M9 1v16M1 9h16"
-          />
-        </svg>
-      </Button>
-    </div>
-  );
- 
-  
-}