diff --git a/website/src/docs/MiniRepl.jsx b/website/src/docs/MiniRepl.jsx
index 37ace3d6..dd856d26 100644
--- a/website/src/docs/MiniRepl.jsx
+++ b/website/src/docs/MiniRepl.jsx
@@ -29,13 +29,17 @@ export function MiniRepl({
   claviatureLabels,
   maxHeight,
   autodraw,
+  drawTime,
 }) {
   const code = tunes ? tunes[0] : tune;
   const id = useMemo(() => s4(), []);
   const canvasId = useMemo(() => `canvas-${id}`, [id]);
   autodraw = !!punchcard || !!claviature || !!autodraw;
   const shouldShowCanvas = !!punchcard;
-  const drawTime = punchcard ? [0, 4] : [-2, 2];
+  drawTime = drawTime ?? punchcard ? [0, 4] : [-2, 2];
+  if (claviature) {
+    drawTime = [0, 0];
+  }
   const [activeNotes, setActiveNotes] = useState([]);
 
   const init = useCallback(({ code, autodraw }) => {
@@ -57,7 +61,7 @@ export function MiniRepl({
           pat = pat.onTrigger(onTrigger, false);
         }
         if (claviature) {
-          editor?.painters.push((ctx, time, haps, drawTime) => {
+          pat = pat.onPaint((ctx, time, haps, drawTime) => {
             const active = haps
               .map((hap) => hap.value.note)
               .filter(Boolean)
@@ -66,7 +70,7 @@ export function MiniRepl({
           });
         }
         if (punchcard) {
-          editor?.painters.push(getPunchcardPainter({ labels: !!punchcardLabels }));
+          pat = pat.punchcard({ labels: !!punchcardLabels });
         }
         return pat;
       },
diff --git a/website/src/pages/learn/visual-feedback.mdx b/website/src/pages/learn/visual-feedback.mdx
index cd76ca79..ed5b16c2 100644
--- a/website/src/pages/learn/visual-feedback.mdx
+++ b/website/src/pages/learn/visual-feedback.mdx
@@ -38,8 +38,7 @@ You can change the color as well, even pattern it:
   tune={`n("<0 2 1 3 2>*8")
 .scale("<A1 D2>/4:minor:pentatonic")
 .s("supersaw").lpf(300).lpenv("<4 3 2>*4")
-._punchcard()
-`}
+._punchcard()`}
   autodraw
 />
 
@@ -48,8 +47,7 @@ You can change the color as well, even pattern it:
   tune={`n("<0 2 1 3 2>*8")
 .scale("<A1 D2>/4:minor:pentatonic")
 .s("supersaw").lpf(300).lpenv("<4 3 2>\*4")
-.\_pianoroll()
-`}
+.\_pianoroll()`}
   autodraw
 />
 
@@ -60,8 +58,8 @@ You can change the color as well, even pattern it:
   tune={`n("<0 2 1 3 2>*8")
 .scale("<A1 D2>/4:minor:pentatonic")
 .s("supersaw").lpf(300).lpenv("<4 3 2>*4")
-._spiral()
-`}
+._spiral()`}
+  autodraw
 />
 
 ## Scope
@@ -71,8 +69,17 @@ You can change the color as well, even pattern it:
   tune={`n("<0 2 1 3 2>*8")
 .scale("<A1 D2>/4:minor:pentatonic")
 .s("supersaw").lpf(300).lpenv("<4 3 2>*4")
-._scope()
-`}
+._scope()`}
+/>
+
+## Pitchwheel
+
+<MiniRepl
+  client:idle
+  tune={`n("<0 2 1 3 2>*8")
+.scale("<A1 D2>/4:minor:pentatonic")
+.s("supersaw").lpf(300).lpenv("<4 3 2>*4")
+._pitchwheel()`}
 />
 
 {/* <JsDoc client:idle name="pianoroll" h={0} /> */}