diff --git a/.gitignore b/.gitignore
index 7fcf9d28..cbe4c324 100644
--- a/.gitignore
+++ b/.gitignore
@@ -30,4 +30,5 @@ mytunes.ts
 doc
 out
 .parcel-cache
-repl_old
\ No newline at end of file
+repl_old
+tutorial.rendered.mdx
\ No newline at end of file
diff --git a/doc.json b/doc.json
index 53b3f510..e739c923 100644
--- a/doc.json
+++ b/doc.json
@@ -1,7 +1,7 @@
 {
   "docs": [
     {
-      "comment": "/**\n   * Select a sound / sample by name.\n   * \n   * <details>\n   * <summary>show all sounds</summary>\n   * \n   * 808 (6) 808bd (25) 808cy (25) 808hc (5) 808ht (5) 808lc (5) 808lt (5) 808mc (5) 808mt (5) 808oh (5) 808sd (25) 909 (1) ab (12) ade (10) ades2 (9) ades3 (7) ades4 (6) alex (2) alphabet (26) amencutup (32) armora (7) arp (2) arpy (11) auto (11) baa (7) baa2 (7) bass (4) bass0 (3) bass1 (30) bass2 (5) bass3 (11) bassdm (24) bassfoo (3) battles (2) bd (24) bend (4) bev (2) bin (2) birds (10) birds3 (19) bleep (13) blip (2) blue (2) bottle (13) breaks125 (2) breaks152 (1) breaks157 (1) breaks165 (1) breath (1) bubble (8) can (14) casio (3) cb (1) cc (6) chin (4) circus (3) clak (2) click (4) clubkick (5) co (4) coins (1) control (2) cosmicg (15) cp (2) cr (6) crow (4) d (4) db (13) diphone (38) diphone2 (12) dist (16) dork2 (4) dorkbot (2) dr (42) dr2 (6) dr55 (4) dr_few (8) drum (6) drumtraks (13) e (8) east (9) electro1 (13) em2 (6) erk (1) f (1) feel (7) feelfx (8) fest (1) fire (1) flick (17) fm (17) foo (27) future (17) gab (10) gabba (4) gabbaloud (4) gabbalouder (4) glasstap (3) glitch (8) glitch2 (8) gretsch (24) gtr (3) h (7) hand (17) hardcore (12) hardkick (6) haw (6) hc (6) hh (13) hh27 (13) hit (6) hmm (1) ho (6) hoover (6) house (8) ht (16) if (5) ifdrums (3) incoming (8) industrial (32) insect (3) invaders (18) jazz (8) jungbass (20) jungle (13) juno (12) jvbass (13) kicklinn (1) koy (2) kurt (7) latibro (8) led (1) less (4) lighter (33) linnhats (6) lt (16) made (7) made2 (1) mash (2) mash2 (4) metal (10) miniyeah (4) monsterb (6) moog (7) mouth (15) mp3 (4) msg (9) mt (16) mute (28) newnotes (15) noise (1) noise2 (8) notes (15) numbers (9) oc (4) odx (15) off (1) outdoor (6) pad (3) padlong (1) pebbles (1) perc (6) peri (15) pluck (17) popkick (10) print (11) proc (2) procshort (8) psr (30) rave (8) rave2 (4) ravemono (2) realclaps (4) reverbkick (1) rm (2) rs (1) sax (22) sd (2) seawolf (3) sequential (8) sf (18) sheffield (1) short (5) sid (12) sine (6) sitar (8) sn (52) space (18) speakspell (12) speech (7) speechless (10) speedupdown (9) stab (23) stomp (10) subroc3d (11) sugar (2) sundance (6) tabla (26) tabla2 (46) tablex (3) tacscan (22) tech (13) techno (7) tink (5) tok (4) toys (13) trump (11) ul (10) ulgab (5) uxay (3) v (6) voodoo (5) wind (10) wobble (1) world (3) xmas (1) yeah (31)\n   * \n   * <a href=\"https://tidalcycles.org/docs/configuration/Audio%20Samples/default_library\" target=\"_blank\">more info</a>\n   * \n   * </details>\n   *\n   * @name s\n   * @param {string | Pattern} sound The sound / pattern of sounds to pick\n   * @example\n   * s(\"bd hh\").osc()\n   *\n   */",
+      "comment": "/**\n   * Select a sound / sample by name.\n   *\n   * <details>\n   * <summary>show all sounds</summary>\n   *\n   * 808 (6) 808bd (25) 808cy (25) 808hc (5) 808ht (5) 808lc (5) 808lt (5) 808mc (5) 808mt (5) 808oh (5) 808sd (25) 909 (1) ab (12) ade (10) ades2 (9) ades3 (7) ades4 (6) alex (2) alphabet (26) amencutup (32) armora (7) arp (2) arpy (11) auto (11) baa (7) baa2 (7) bass (4) bass0 (3) bass1 (30) bass2 (5) bass3 (11) bassdm (24) bassfoo (3) battles (2) bd (24) bend (4) bev (2) bin (2) birds (10) birds3 (19) bleep (13) blip (2) blue (2) bottle (13) breaks125 (2) breaks152 (1) breaks157 (1) breaks165 (1) breath (1) bubble (8) can (14) casio (3) cb (1) cc (6) chin (4) circus (3) clak (2) click (4) clubkick (5) co (4) coins (1) control (2) cosmicg (15) cp (2) cr (6) crow (4) d (4) db (13) diphone (38) diphone2 (12) dist (16) dork2 (4) dorkbot (2) dr (42) dr2 (6) dr55 (4) dr_few (8) drum (6) drumtraks (13) e (8) east (9) electro1 (13) em2 (6) erk (1) f (1) feel (7) feelfx (8) fest (1) fire (1) flick (17) fm (17) foo (27) future (17) gab (10) gabba (4) gabbaloud (4) gabbalouder (4) glasstap (3) glitch (8) glitch2 (8) gretsch (24) gtr (3) h (7) hand (17) hardcore (12) hardkick (6) haw (6) hc (6) hh (13) hh27 (13) hit (6) hmm (1) ho (6) hoover (6) house (8) ht (16) if (5) ifdrums (3) incoming (8) industrial (32) insect (3) invaders (18) jazz (8) jungbass (20) jungle (13) juno (12) jvbass (13) kicklinn (1) koy (2) kurt (7) latibro (8) led (1) less (4) lighter (33) linnhats (6) lt (16) made (7) made2 (1) mash (2) mash2 (4) metal (10) miniyeah (4) monsterb (6) moog (7) mouth (15) mp3 (4) msg (9) mt (16) mute (28) newnotes (15) noise (1) noise2 (8) notes (15) numbers (9) oc (4) odx (15) off (1) outdoor (6) pad (3) padlong (1) pebbles (1) perc (6) peri (15) pluck (17) popkick (10) print (11) proc (2) procshort (8) psr (30) rave (8) rave2 (4) ravemono (2) realclaps (4) reverbkick (1) rm (2) rs (1) sax (22) sd (2) seawolf (3) sequential (8) sf (18) sheffield (1) short (5) sid (12) sine (6) sitar (8) sn (52) space (18) speakspell (12) speech (7) speechless (10) speedupdown (9) stab (23) stomp (10) subroc3d (11) sugar (2) sundance (6) tabla (26) tabla2 (46) tablex (3) tacscan (22) tech (13) techno (7) tink (5) tok (4) toys (13) trump (11) ul (10) ulgab (5) uxay (3) v (6) voodoo (5) wind (10) wobble (1) world (3) xmas (1) yeah (31)\n   *\n   * <a href=\"https://tidalcycles.org/docs/configuration/Audio%20Samples/default_library\" target=\"_blank\">more info</a>\n   *\n   * </details>\n   *\n   * @name s\n   * @param {string | Pattern} sound The sound / pattern of sounds to pick\n   * @example\n   * s(\"bd hh\").osc()\n   *\n   */",
       "meta": {
         "filename": "controls.mjs",
         "lineno": 11,
diff --git a/tutorial/Tutorial.jsx b/tutorial/Tutorial.jsx
index d6ef86ab..f41489a4 100644
--- a/tutorial/Tutorial.jsx
+++ b/tutorial/Tutorial.jsx
@@ -6,9 +6,8 @@ This program is free software: you can redistribute it and/or modify it under th
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import Tutorial from './tutorial.mdx';
-import ApiDoc from './ApiDoc'
-import Api from './api.mdx';
+import Tutorial from './tutorial.rendered.mdx';
+// import ApiDoc from './ApiDoc';
 import './style.scss';
 import '@strudel.cycles/react/dist/style.css';
 
@@ -32,8 +31,7 @@ ReactDOM.render(
       </header>
       <main className="p-4 pl-6 max-w-3xl prose">
         <Tutorial />
-        <Api />
-        <ApiDoc />
+        {/*         <ApiDoc /> */}
       </main>
     </div>
   </React.StrictMode>,
diff --git a/tutorial/api.mdx b/tutorial/api.mdx
deleted file mode 100644
index 09888480..00000000
--- a/tutorial/api.mdx
+++ /dev/null
@@ -1,123 +0,0 @@
-import { MiniRepl } from './MiniRepl';
-
-The following is generated from the source documentation.
-
-## TOC
-
-## Pattern Factories
-
-The following functions will return a pattern. We will see later what that means.
-
-### pure
-
-<p>A discrete value that repeats once per cycle:</p>
-
-**Parameters**
-  
-- value (any): The value to repeat
-
-**Examples**
-
-<div className="space-y-2">
-  <MiniRepl tune={`pure('e4')`} />
-</div>
-
-### slowcat
-
-<p>Concatenation: combines a list of patterns, switching between them successively, one per cycle:</p>
-<p>synonyms: <a href="#cat">cat</a></p>
-
-**Parameters**
-  
-- items (any): The items to concatenate
-
-**Examples**
-
-<div className="space-y-2">
-  <MiniRepl tune={`slowcat(e5, b4, [d5, c5])`} />
-</div>
-
-### fastcat
-
-<p>Concatenation: as with <a href="#slowcat">slowcat</a>, but squashes a cycle from each pattern into one cycle</p>
-<p>Synonyms: <a href="#seq">seq</a>, <a href="#sequence">sequence</a></p>
-
-**Parameters**
-  
-- items (any): The items to concatenate
-
-**Examples**
-
-<div className="space-y-2">
-  <MiniRepl tune={`fastcat(e5, b4, [d5, c5])
-// sequence(e5, b4, [d5, c5])
-// seq(e5, b4, [d5, c5])`} />
-</div>
-
-### stack
-
-<p>The given items are played at the same time at the same length:</p>
-
-**Parameters**
-  
-- items (any): The items to stack
-
-**Examples**
-
-<div className="space-y-2">
-  <MiniRepl tune={`stack(g3, b3, [e4, d4])`} />
-</div>
-
-### timeCat
-
-<p>Like <a href="#fastcat">fastcat</a>, but where each step has a temporal weight:</p>
-
-**Parameters**
-  
-- items (Array): The items to concatenate
-
-**Examples**
-
-<div className="space-y-2">
-  <MiniRepl tune={`timeCat([3,e3],[1, g3])`} />
-</div>
-
-
-
-## Pattern Modifiers
-
-### Pattern.slow
-
-<p>Slow down a pattern over the given number of cycles.</p>
-
-**Parameters**
-  
-- factor (number|Pattern): slow down factor
-
-**Examples**
-
-<div className="space-y-2">
-  <MiniRepl tune={`seq(e5, b4, d5, c5).slow(2)`} />
-</div>
-
-### Pattern.fast
-
-<p>Speed up a pattern by the given factor.</p>
-
-**Parameters**
-  
-- factor (number|Pattern): speed up factor
-
-**Examples**
-
-<div className="space-y-2">
-  <MiniRepl tune={`seq(e5, b4, d5, c5).fast(2)`} />
-</div>
-
-
-
-
-
-
-
-## Everything Else
diff --git a/tutorial/package.json b/tutorial/package.json
index f2e31a12..cdee3c3a 100644
--- a/tutorial/package.json
+++ b/tutorial/package.json
@@ -3,12 +3,12 @@
   "private": true,
   "version": "0.0.0",
   "scripts": {
-    "dev": "npm run jsdoc-json && vite",
+    "dev": "npm run render && vite",
     "start": "vite",
-    "build": "npm run jsdoc-json && vite build",
+    "build": "npm run render && vite build",
     "preview": "vite preview",
     "jsdoc-json": "jsdoc ../packages/ --template ../node_modules/jsdoc-json --destination ../doc.json -c ../jsdoc.config.json",
-    "render": "npm run jsdoc-json && node ./render.js > api.mdx"
+    "render": "npm run jsdoc-json && node ./render.js > tutorial.rendered.mdx"
   },
   "type": "module",
   "dependencies": {
diff --git a/tutorial/render.js b/tutorial/render.js
index 7ac6f4a8..38b24020 100644
--- a/tutorial/render.js
+++ b/tutorial/render.js
@@ -4,7 +4,7 @@ import jsdoc from '../doc.json' assert { type: 'json' };
 // TODO: load tutorial.mdx and append rendered api.mdx to the bottom (to make sure TOC works)
 // TODO: split
 
-const env = nunjucks.configure('templates', { autoescape: false });
+const env = nunjucks.configure('.', { autoescape: false });
 
 const docs = jsdoc.docs.reduce((acc, obj) => Object.assign(acc, { [obj.longname]: obj }), {});
 
@@ -45,5 +45,5 @@ ${
 
 env.addFilter('jsdoc', renderAsMDX);
 
-const rendered = nunjucks.render('api.mdx', { docs });
+const rendered = nunjucks.render('tutorial.mdx', { docs });
 console.log(rendered);
diff --git a/tutorial/tutorial.mdx b/tutorial/tutorial.mdx
index 0be316d3..b56dd27e 100644
--- a/tutorial/tutorial.mdx
+++ b/tutorial/tutorial.mdx
@@ -699,3 +699,122 @@ If you want to contribute in another way, either
 
 # API Docs
 
+The following is generated from the source documentation.
+
+## Pattern Factories
+
+The following functions will return a pattern. We will see later what that means.
+
+### pure
+
+<p>A discrete value that repeats once per cycle:</p>
+
+**Parameters**
+
+- value (any): The value to repeat
+
+**Examples**
+
+<div className="space-y-2">
+  <MiniRepl tune={`pure('e4')`} />
+</div>
+
+### slowcat
+
+<p>Concatenation: combines a list of patterns, switching between them successively, one per cycle:</p>
+<p>
+  synonyms: <a href="#cat">cat</a>
+</p>
+
+**Parameters**
+
+- items (any): The items to concatenate
+
+**Examples**
+
+<div className="space-y-2">
+  <MiniRepl tune={`slowcat(e5, b4, [d5, c5])`} />
+</div>
+
+### fastcat
+
+<p>
+  Concatenation: as with <a href="#slowcat">slowcat</a>, but squashes a cycle from each pattern into one cycle
+</p>
+<p>
+  Synonyms: <a href="#seq">seq</a>, <a href="#sequence">sequence</a>
+</p>
+
+**Parameters**
+
+- items (any): The items to concatenate
+
+**Examples**
+
+<div className="space-y-2">
+  <MiniRepl
+    tune={`fastcat(e5, b4, [d5, c5])
+// sequence(e5, b4, [d5, c5])
+// seq(e5, b4, [d5, c5])`}
+  />
+</div>
+
+### stack
+
+<p>The given items are played at the same time at the same length:</p>
+
+**Parameters**
+
+- items (any): The items to stack
+
+**Examples**
+
+<div className="space-y-2">
+  <MiniRepl tune={`stack(g3, b3, [e4, d4])`} />
+</div>
+
+### timeCat
+
+<p>
+  Like <a href="#fastcat">fastcat</a>, but where each step has a temporal weight:
+</p>
+
+**Parameters**
+
+- items (Array): The items to concatenate
+
+**Examples**
+
+<div className="space-y-2">
+  <MiniRepl tune={`timeCat([3,e3],[1, g3])`} />
+</div>
+
+## Pattern Modifiers
+
+### Pattern.slow
+
+<p>Slow down a pattern over the given number of cycles.</p>
+
+**Parameters**
+
+- factor (number|Pattern): slow down factor
+
+**Examples**
+
+<div className="space-y-2">
+  <MiniRepl tune={`seq(e5, b4, d5, c5).slow(2)`} />
+</div>
+
+### Pattern.fast
+
+<p>Speed up a pattern by the given factor.</p>
+
+**Parameters**
+
+- factor (number|Pattern): speed up factor
+
+**Examples**
+
+<div className="space-y-2">
+  <MiniRepl tune={`seq(e5, b4, d5, c5).fast(2)`} />
+</div>