diff --git a/.gitignore b/.gitignore
index 97241f88..fe54b513 100644
--- a/.gitignore
+++ b/.gitignore
@@ -23,3 +23,4 @@ cabal.project.local~
 .HTF/
 .ghc.environment.*
 node_modules/
+.DS_Store
\ No newline at end of file
diff --git a/repl/package-lock.json b/repl/package-lock.json
index 2003efbc..d9166583 100644
--- a/repl/package-lock.json
+++ b/repl/package-lock.json
@@ -6,9 +6,10 @@
     "": {
       "dependencies": {
         "@tonaljs/tonal": "^4.6.5",
+        "codemirror": "^5.65.1",
         "react": "^17.0.2",
+        "react-codemirror2": "^7.2.1",
         "react-dom": "^17.0.2",
-        "tonal": "^2.2.2",
         "tone": "^14.7.77"
       },
       "devDependencies": {
@@ -2890,6 +2891,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/codemirror": {
+      "version": "5.65.1",
+      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.65.1.tgz",
+      "integrity": "sha512-s6aac+DD+4O2u1aBmdxhB7yz2XU7tG3snOyQ05Kxifahz7hoxnfxIRHxiCSEv3TUC38dIVH8G+lZH9UWSfGQxA=="
+    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -6845,6 +6851,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-codemirror2": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/react-codemirror2/-/react-codemirror2-7.2.1.tgz",
+      "integrity": "sha512-t7YFmz1AXdlImgHXA9Ja0T6AWuopilub24jRaQdPVbzUJVNKIYuy3uCFZYa7CE5S3UW6SrSa5nAqVQvtzRF9gw==",
+      "peerDependencies": {
+        "codemirror": "5.x",
+        "react": ">=15.5 <=16.x"
+      }
+    },
     "node_modules/react-dom": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
@@ -8066,108 +8081,6 @@
         "node": ">=0.6"
       }
     },
-    "node_modules/tonal": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/tonal/-/tonal-2.2.2.tgz",
-      "integrity": "sha512-Ze2bQc6KhAf3FKM9HzEsQ4z8hZh4WYCOsCrryONqf/THGOrOpL9Cc8Uc0dq0OA2yK2JbD5FhZckEXNYyD9946A==",
-      "dependencies": {
-        "tonal-array": "^2.2.2",
-        "tonal-chord": "^2.2.2",
-        "tonal-dictionary": "^2.2.2",
-        "tonal-distance": "^2.2.2",
-        "tonal-interval": "^2.2.2",
-        "tonal-key": "^2.2.2",
-        "tonal-note": "^2.2.2",
-        "tonal-pcset": "^2.2.2",
-        "tonal-scale": "^2.2.2"
-      }
-    },
-    "node_modules/tonal-array": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/tonal-array/-/tonal-array-2.2.2.tgz",
-      "integrity": "sha512-h6YIq20L0EEU4EsDoKHAjl5kD2EQn467VfV79QHAuybvNCJpqqRNsQ3QNvoQyir1BgDXaDUIN9FEmQJNiaaCKA==",
-      "dependencies": {
-        "tonal-note": "^2.2.2"
-      }
-    },
-    "node_modules/tonal-chord": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/tonal-chord/-/tonal-chord-2.2.2.tgz",
-      "integrity": "sha512-gOIXapi6Gx3ISRKdEJKEQjhDBiwjhaalyWSrN5rijGrSyyFFNZ+EVOfzcqLtnVAF9BgeO9Ca0eXCor3XpHdEJg==",
-      "dependencies": {
-        "tonal-dictionary": "^2.2.2",
-        "tonal-distance": "^2.2.2",
-        "tonal-note": "^2.2.2",
-        "tonal-pcset": "^2.2.2"
-      }
-    },
-    "node_modules/tonal-dictionary": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/tonal-dictionary/-/tonal-dictionary-2.2.2.tgz",
-      "integrity": "sha512-283ppJl/0lohhlVPMI6t5C6XwaP5Wx0egu9qfG9TLCT2tn4pRwYpXkzGufd9icvkJTgOylOum3+RxWmywUIPIg==",
-      "dependencies": {
-        "tonal-array": "^2.2.2",
-        "tonal-note": "^2.2.2",
-        "tonal-pcset": "^2.2.2"
-      }
-    },
-    "node_modules/tonal-distance": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/tonal-distance/-/tonal-distance-2.2.2.tgz",
-      "integrity": "sha512-ktA6OapCxaetXJb/JuXD5QwfyB7/G3y3ONby7Kkbezyffc57cnNfjdhlTR9XBR7eSFIY/J1KuhLwMx/qrffT4g==",
-      "dependencies": {
-        "tonal-interval": "^2.2.2",
-        "tonal-note": "^2.2.2"
-      }
-    },
-    "node_modules/tonal-interval": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/tonal-interval/-/tonal-interval-2.2.2.tgz",
-      "integrity": "sha512-lrtDU8lH5IAX7YE63OhGGDRpVb4OoGxaN0wDu5XC3sUhXBwjSgNYpHY2D9JI2aWQ/Er9jhQbnw9b0ffkLy34+Q=="
-    },
-    "node_modules/tonal-key": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/tonal-key/-/tonal-key-2.2.2.tgz",
-      "integrity": "sha512-KIc0b8yPl2ATDxF/65P52tIIempNsAQrug0idpD0zFvs5F5cb1hp7Rh7JJ4gECwC/6a3Hgdd1jomI+TnJ7K98w==",
-      "dependencies": {
-        "tonal-array": "^2.2.2",
-        "tonal-distance": "^2.2.2",
-        "tonal-note": "^2.2.2",
-        "tonal-roman-numeral": "^2.2.2"
-      }
-    },
-    "node_modules/tonal-note": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/tonal-note/-/tonal-note-2.2.2.tgz",
-      "integrity": "sha512-RNK3Nb8PxBEW9yYGStcoczgE8bCYFZ5zfLvYJjvuzLWiwTQmqWOhTzONVobVCGFZ/jgDNwpBEKe/bngL3g3Xfw=="
-    },
-    "node_modules/tonal-pcset": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/tonal-pcset/-/tonal-pcset-2.2.2.tgz",
-      "integrity": "sha512-PSqhkxzckO6J27W0GxawHYln4wvfDJ7puDmccksyFOBo97UhLnpxiyvBekhiYpkuaMtoZLQC/KALAkEj7lcb+A==",
-      "dependencies": {
-        "tonal-array": "^2.2.2",
-        "tonal-interval": "^2.2.2",
-        "tonal-note": "^2.2.2"
-      }
-    },
-    "node_modules/tonal-roman-numeral": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/tonal-roman-numeral/-/tonal-roman-numeral-2.2.2.tgz",
-      "integrity": "sha512-+auQNObpW3OvsSqlo+Cc+0otrlEhtbEgpzkPoKbTtkCva0P9oSkSz0OZ9fI73KQM5MsBs1XbB+olxppWkzYTFw=="
-    },
-    "node_modules/tonal-scale": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/tonal-scale/-/tonal-scale-2.2.2.tgz",
-      "integrity": "sha512-tDb3YCoTF50XOXq9kNhGB1JkInk7qAGN6GQnP/3xkGxkreFFRZyI58jfHlmWf/AH4+IKb/exsOmL6G8Ok/PCRw==",
-      "dependencies": {
-        "tonal-array": "^2.2.2",
-        "tonal-dictionary": "^2.2.2",
-        "tonal-distance": "^2.2.2",
-        "tonal-note": "^2.2.2",
-        "tonal-pcset": "^2.2.2"
-      }
-    },
     "node_modules/tone": {
       "version": "14.7.77",
       "resolved": "https://registry.npmjs.org/tone/-/tone-14.7.77.tgz",
@@ -11039,6 +10952,11 @@
       "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
       "dev": true
     },
+    "codemirror": {
+      "version": "5.65.1",
+      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.65.1.tgz",
+      "integrity": "sha512-s6aac+DD+4O2u1aBmdxhB7yz2XU7tG3snOyQ05Kxifahz7hoxnfxIRHxiCSEv3TUC38dIVH8G+lZH9UWSfGQxA=="
+    },
     "color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -14027,6 +13945,12 @@
         "object-assign": "^4.1.1"
       }
     },
+    "react-codemirror2": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/react-codemirror2/-/react-codemirror2-7.2.1.tgz",
+      "integrity": "sha512-t7YFmz1AXdlImgHXA9Ja0T6AWuopilub24jRaQdPVbzUJVNKIYuy3uCFZYa7CE5S3UW6SrSa5nAqVQvtzRF9gw==",
+      "requires": {}
+    },
     "react-dom": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
@@ -14964,108 +14888,6 @@
       "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
       "dev": true
     },
-    "tonal": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/tonal/-/tonal-2.2.2.tgz",
-      "integrity": "sha512-Ze2bQc6KhAf3FKM9HzEsQ4z8hZh4WYCOsCrryONqf/THGOrOpL9Cc8Uc0dq0OA2yK2JbD5FhZckEXNYyD9946A==",
-      "requires": {
-        "tonal-array": "^2.2.2",
-        "tonal-chord": "^2.2.2",
-        "tonal-dictionary": "^2.2.2",
-        "tonal-distance": "^2.2.2",
-        "tonal-interval": "^2.2.2",
-        "tonal-key": "^2.2.2",
-        "tonal-note": "^2.2.2",
-        "tonal-pcset": "^2.2.2",
-        "tonal-scale": "^2.2.2"
-      }
-    },
-    "tonal-array": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/tonal-array/-/tonal-array-2.2.2.tgz",
-      "integrity": "sha512-h6YIq20L0EEU4EsDoKHAjl5kD2EQn467VfV79QHAuybvNCJpqqRNsQ3QNvoQyir1BgDXaDUIN9FEmQJNiaaCKA==",
-      "requires": {
-        "tonal-note": "^2.2.2"
-      }
-    },
-    "tonal-chord": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/tonal-chord/-/tonal-chord-2.2.2.tgz",
-      "integrity": "sha512-gOIXapi6Gx3ISRKdEJKEQjhDBiwjhaalyWSrN5rijGrSyyFFNZ+EVOfzcqLtnVAF9BgeO9Ca0eXCor3XpHdEJg==",
-      "requires": {
-        "tonal-dictionary": "^2.2.2",
-        "tonal-distance": "^2.2.2",
-        "tonal-note": "^2.2.2",
-        "tonal-pcset": "^2.2.2"
-      }
-    },
-    "tonal-dictionary": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/tonal-dictionary/-/tonal-dictionary-2.2.2.tgz",
-      "integrity": "sha512-283ppJl/0lohhlVPMI6t5C6XwaP5Wx0egu9qfG9TLCT2tn4pRwYpXkzGufd9icvkJTgOylOum3+RxWmywUIPIg==",
-      "requires": {
-        "tonal-array": "^2.2.2",
-        "tonal-note": "^2.2.2",
-        "tonal-pcset": "^2.2.2"
-      }
-    },
-    "tonal-distance": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/tonal-distance/-/tonal-distance-2.2.2.tgz",
-      "integrity": "sha512-ktA6OapCxaetXJb/JuXD5QwfyB7/G3y3ONby7Kkbezyffc57cnNfjdhlTR9XBR7eSFIY/J1KuhLwMx/qrffT4g==",
-      "requires": {
-        "tonal-interval": "^2.2.2",
-        "tonal-note": "^2.2.2"
-      }
-    },
-    "tonal-interval": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/tonal-interval/-/tonal-interval-2.2.2.tgz",
-      "integrity": "sha512-lrtDU8lH5IAX7YE63OhGGDRpVb4OoGxaN0wDu5XC3sUhXBwjSgNYpHY2D9JI2aWQ/Er9jhQbnw9b0ffkLy34+Q=="
-    },
-    "tonal-key": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/tonal-key/-/tonal-key-2.2.2.tgz",
-      "integrity": "sha512-KIc0b8yPl2ATDxF/65P52tIIempNsAQrug0idpD0zFvs5F5cb1hp7Rh7JJ4gECwC/6a3Hgdd1jomI+TnJ7K98w==",
-      "requires": {
-        "tonal-array": "^2.2.2",
-        "tonal-distance": "^2.2.2",
-        "tonal-note": "^2.2.2",
-        "tonal-roman-numeral": "^2.2.2"
-      }
-    },
-    "tonal-note": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/tonal-note/-/tonal-note-2.2.2.tgz",
-      "integrity": "sha512-RNK3Nb8PxBEW9yYGStcoczgE8bCYFZ5zfLvYJjvuzLWiwTQmqWOhTzONVobVCGFZ/jgDNwpBEKe/bngL3g3Xfw=="
-    },
-    "tonal-pcset": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/tonal-pcset/-/tonal-pcset-2.2.2.tgz",
-      "integrity": "sha512-PSqhkxzckO6J27W0GxawHYln4wvfDJ7puDmccksyFOBo97UhLnpxiyvBekhiYpkuaMtoZLQC/KALAkEj7lcb+A==",
-      "requires": {
-        "tonal-array": "^2.2.2",
-        "tonal-interval": "^2.2.2",
-        "tonal-note": "^2.2.2"
-      }
-    },
-    "tonal-roman-numeral": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/tonal-roman-numeral/-/tonal-roman-numeral-2.2.2.tgz",
-      "integrity": "sha512-+auQNObpW3OvsSqlo+Cc+0otrlEhtbEgpzkPoKbTtkCva0P9oSkSz0OZ9fI73KQM5MsBs1XbB+olxppWkzYTFw=="
-    },
-    "tonal-scale": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/tonal-scale/-/tonal-scale-2.2.2.tgz",
-      "integrity": "sha512-tDb3YCoTF50XOXq9kNhGB1JkInk7qAGN6GQnP/3xkGxkreFFRZyI58jfHlmWf/AH4+IKb/exsOmL6G8Ok/PCRw==",
-      "requires": {
-        "tonal-array": "^2.2.2",
-        "tonal-dictionary": "^2.2.2",
-        "tonal-distance": "^2.2.2",
-        "tonal-note": "^2.2.2",
-        "tonal-pcset": "^2.2.2"
-      }
-    },
     "tone": {
       "version": "14.7.77",
       "resolved": "https://registry.npmjs.org/tone/-/tone-14.7.77.tgz",
diff --git a/repl/package.json b/repl/package.json
index e5d71892..2e87f86c 100644
--- a/repl/package.json
+++ b/repl/package.json
@@ -9,7 +9,9 @@
   },
   "dependencies": {
     "@tonaljs/tonal": "^4.6.5",
+    "codemirror": "^5.65.1",
     "react": "^17.0.2",
+    "react-codemirror2": "^7.2.1",
     "react-dom": "^17.0.2",
     "tone": "^14.7.77"
   },
diff --git a/repl/public/global.css b/repl/public/global.css
index b5c61c95..668d4a6c 100644
--- a/repl/public/global.css
+++ b/repl/public/global.css
@@ -1,3 +1,8 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.react-codemirror2,
+.CodeMirror {
+  height: 100% !important;
+}
diff --git a/repl/src/App.tsx b/repl/src/App.tsx
index ee032037..5d90b2be 100644
--- a/repl/src/App.tsx
+++ b/repl/src/App.tsx
@@ -7,6 +7,7 @@ import useCycle from './useCycle';
 import type { Hap, Pattern } from './types';
 import * as tunes from './tunes';
 import * as krill from './parse';
+import CodeMirror from './CodeMirror';
 
 const { tetris, tetrisMini, tetrisHaskell } = tunes;
 
@@ -68,6 +69,7 @@ function App() {
       // cycle.query(cycle.activeCycle()); // reschedule active cycle
       setError(undefined);
     } catch (err: any) {
+      console.warn(err);
       setError(err);
     }
   }, [code]);
@@ -75,38 +77,40 @@ function App() {
   useLayoutEffect(() => {
     logBox.current.scrollTop = logBox.current?.scrollHeight;
   }, [log]);
-
   return (
-    <div className="h-[100vh] bg-slate-900 flex-row">
-      <header className="px-2 flex items-center space-x-2 border-b border-gray-200 bg-white">
+    <div className="h-screen bg-slate-900 flex flex-col">
+      <header className="flex-none w-full h-16 px-2 flex items-center space-x-2 border-b border-gray-200 bg-white">
         <img src={logo} className="Tidal-logo w-16 h-16" alt="logo" />
         <h1 className="text-2xl">Strudel REPL</h1>
       </header>
-      <section className="grow p-2 text-gray-100">
-        <div className="relative">
-          <div className="absolute right-2 bottom-2 text-red-500">{error?.message}</div>
-          <textarea
+      <section className="grow flex flex-col p-2 text-gray-100">
+        <div className="grow relative">
+          <div className={cx('h-full bg-slate-600', error ? 'focus:ring-red-500' : 'focus:ring-slate-800')}>
+            <CodeMirror
+              value={code}
+              onChange={(_: any, __: any, value: any) => {
+                setLog((log) => log + `${log ? '\n\n' : ''}✏️ edit\n${code}\n${value}`);
+                setCode(value);
+              }}
+            />
+          </div>
+          {error && <div className="absolute right-2 bottom-2 text-red-500">{error?.message || 'unknown error'}</div>}
+          {/* <textarea
             className={cx('w-full h-64 bg-slate-600', error ? 'focus:ring-red-500' : 'focus:ring-slate-800')}
             value={code}
             onChange={(e) => {
               setLog((log) => log + `${log ? '\n\n' : ''}✏️ edit\n${code}\n${e.target.value}`);
               setCode(e.target.value);
             }}
-          />
+          /> */}
         </div>
-        <textarea
-          className="w-full h-64 bg-slate-600"
-          value={log}
-          readOnly
-          ref={logBox}
-          style={{ fontFamily: 'monospace' }}
-        />
         <button
-          className="w-full border border-gray-700 p-2 bg-slate-700 hover:bg-slate-500"
+          className="flex-none w-full border border-gray-700 p-2 bg-slate-700 hover:bg-slate-500"
           onClick={() => cycle.toggle()}
         >
           {cycle.started ? 'pause' : 'play'}
         </button>
+        <textarea className="grow bg-[#283237] border-0" value={log} readOnly ref={logBox} style={{ fontFamily: 'monospace' }} />
       </section>
     </div>
   );
diff --git a/repl/src/CodeMirror.tsx b/repl/src/CodeMirror.tsx
new file mode 100644
index 00000000..515c0e3c
--- /dev/null
+++ b/repl/src/CodeMirror.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Controlled as CodeMirror2 } from 'react-codemirror2';
+import 'codemirror/mode/javascript/javascript.js';
+import 'codemirror/theme/material.css';
+import 'codemirror/lib/codemirror.css';
+
+export default function CodeMirror({ value, onChange, options }: any) {
+  options = options || {
+    mode: 'javascript',
+    theme: 'material',
+    lineNumbers: true,
+  };
+  return <CodeMirror2 value={value} options={options} onBeforeChange={onChange} />;
+}