diff --git a/packages/react/src/App.jsx b/packages/react/src/App.jsx
index 9bbf56d5..474010b3 100644
--- a/packages/react/src/App.jsx
+++ b/packages/react/src/App.jsx
@@ -1,11 +1,26 @@
 import React from 'react';
 import { MiniRepl } from './components/MiniRepl';
 import 'tailwindcss/tailwind.css';
+import { Tone, getDefaultSynth } from '@strudel.cycles/tone';
+import { evalScope } from '@strudel.cycles/eval';
+
+const defaultSynth = getDefaultSynth();
+
+evalScope(
+  Tone,
+  import('@strudel.cycles/core'),
+  import('@strudel.cycles/tone'),
+  import('@strudel.cycles/tonal'),
+  import('@strudel.cycles/mini'),
+  import('@strudel.cycles/midi'),
+  import('@strudel.cycles/xen'),
+  import('@strudel.cycles/webaudio'),
+);
 
 function App() {
   return (
     <div>
-      <MiniRepl tune={`"c3"`} />
+      <MiniRepl tune={`"c3"`} defaultSynth={defaultSynth} />
     </div>
   );
 }
diff --git a/packages/react/src/components/MiniRepl.jsx b/packages/react/src/components/MiniRepl.jsx
index cd5e7886..244911ae 100644
--- a/packages/react/src/components/MiniRepl.jsx
+++ b/packages/react/src/components/MiniRepl.jsx
@@ -5,6 +5,7 @@ import cx from '../cx';
 import useHighlighting from '../hooks/useHighlighting.mjs';
 import CodeMirror6 from './CodeMirror6';
 import 'tailwindcss/tailwind.css';
+import './style.css';
 import styles from './MiniRepl.module.css';
 import { Icon } from './Icon';
 
diff --git a/packages/react/src/components/style.css b/packages/react/src/components/style.css
new file mode 100644
index 00000000..191c9f2b
--- /dev/null
+++ b/packages/react/src/components/style.css
@@ -0,0 +1,3 @@
+.cm-editor {
+  background-color: transparent !important;
+}