diff --git a/examples/buildless/tidal.html b/examples/buildless/tidal.html
new file mode 100644
index 00000000..459ad0ed
--- /dev/null
+++ b/examples/buildless/tidal.html
@@ -0,0 +1,96 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>tidal.html</title>
+  </head>
+  <body style="margin: 0; padding: 0">
+    <textarea id="code" style="width: 100%; height: 200px"></textarea>
+    <pre id="result"></pre>
+    <script src="https://unpkg.com/hs2js@latest"></script>
+    <script src="https://unpkg.com/@strudel/web@latest"></script>
+    <script>
+      const { initStrudel } = strudel;
+      const { run, parse, setBase } = hs2js;
+      setBase('https://unpkg.com/hs2js@0.0.4/dist/');
+      initStrudel({
+        prebake: () => samples('github:tidalcycles/dirt-samples'),
+      });
+
+      const textarea = document.getElementById('code');
+      if (window.location.hash) {
+        textarea.value = atob(window.location.hash.slice(1));
+      } else {
+        textarea.value = 'd1 $ s "jvbass(3,8)"';
+      }
+      textarea.addEventListener('input', (e) => {
+        window.location.hash = btoa(e.target.value);
+        update();
+      });
+      update();
+
+      function getInfixOperators() {
+        let operators = {
+          '>': 'set',
+          '#': 'set',
+          '+': 'add',
+          '-': 'sub',
+          '*': 'mul',
+          '/': 'div',
+        };
+        let alignments = {
+          in: (s) => '|' + s,
+          out: (s) => s + '|',
+          mix: (s) => '|' + s + '|',
+        };
+        let ops = {};
+        Object.entries(operators).forEach(([o, name]) => {
+          // operator without alignment
+          ops[o] = (l, r) => reify(l)[name](reify(r));
+          Object.entries(alignments).forEach(([a, getSymbol]) => {
+            // get symbol with alignment
+            let symbol = getSymbol(o);
+            ops[symbol] = (l, r) => reify(l)[name][a](reify(r));
+          });
+        });
+        ops['~>'] = (l, r) => reify(l).late(reify(r));
+        ops['<~'] = (l, r) => reify(l).early(reify(r));
+        ops['<$>'] = (l, r) => reify(r).fmap(l).outerJoin(); // is this right?
+        return ops;
+      }
+      const ops = getInfixOperators();
+
+      async function update() {
+        let result, tree;
+        try {
+          tree = await parse(textarea.value);
+        } catch (err) {
+          console.warn('parse error');
+          console.error(err);
+        }
+        console.log('parsed tree');
+        console.log(tree.rootNode.toString());
+        try {
+          let patterns = {};
+          window.p = (name, pattern) => {
+            patterns[name] = pattern;
+          };
+          window.d1 = (pat) => window.p(1, pat);
+          window.d2 = (pat) => window.p(2, pat);
+          window.d3 = (pat) => window.p(3, pat);
+          window.rot = late;
+          result = run(tree.rootNode, window, ops);
+          if (Object.values(patterns).length) {
+            stack(...Object.values(patterns)).play();
+          }
+        } catch (err) {
+          console.warn('eval error');
+          console.error(err);
+          result = 'ERROR: ' + err.message;
+        }
+        document.getElementById('result').innerHTML = 'Result: ' + result;
+      }
+    </script>
+  </body>
+</html>
diff --git a/packages/tidal/graph.mjs b/packages/tidal/graph.mjs
deleted file mode 100644
index bac3d135..00000000
--- a/packages/tidal/graph.mjs
+++ /dev/null
@@ -1,43 +0,0 @@
-import { Graphviz } from '@hpcc-js/wasm';
-import toDot from 'jgf-dot';
-
-const graphvizLoaded = Graphviz.load();
-
-function walk(node, branch = [0], parent) {
-  let nodes = [];
-  let edges = [];
-  const color = 'white';
-  const current = {
-    id: branch.join('-'),
-    color,
-    fontcolor: color,
-    label: node.type.replace('\\', 'lambda'), // backslash kills graphviz..
-  };
-  nodes.push(current);
-  parent && edges.push({ source: parent.id, target: current.id, color });
-  if (node.children.length) {
-    node.children.forEach((child, j) => {
-      const { nodes: childNodes, edges: childEdges } = walk(child, branch.concat([j]), current);
-      nodes = nodes.concat(childNodes || []);
-      edges = edges.concat(childEdges || []);
-    });
-  }
-  return { nodes, edges };
-}
-
-export async function renderGraph(tree, container) {
-  const { nodes, edges } = walk(tree.rootNode);
-  const graphviz = await graphvizLoaded;
-  let dot = toDot({
-    graph: {
-      nodes,
-      edges,
-    },
-  });
-  dot = dot.split('\n');
-  dot.splice(1, 0, 'bgcolor="transparent"');
-  dot.splice(1, 0, 'color="white"');
-  dot = dot.join('\n');
-  const svg = await graphviz.layout(dot, 'svg', 'dot', {});
-  container.innerHTML = svg;
-}
diff --git a/packages/tidal/index.html b/packages/tidal/index.html
index 532bce3d..cfa818b0 100644
--- a/packages/tidal/index.html
+++ b/packages/tidal/index.html
@@ -23,7 +23,6 @@
   <body style="margin: 0; padding: 0">
     <textarea id="code" style="width: 100%; height: 200px"></textarea>
     <pre id="result"></pre>
-    <div id="graph" style="display: flex; width: 100%; margin: auto; justify-content: center"></div>
     <script type="module" src="/main.js"></script>
   </body>
 </html>
diff --git a/packages/tidal/main.js b/packages/tidal/main.js
index 0b2ac7d5..0d948504 100644
--- a/packages/tidal/main.js
+++ b/packages/tidal/main.js
@@ -1,12 +1,9 @@
 import { run, parse } from 'hs2js';
-import { renderGraph } from './graph.mjs';
 import { initStrudel, reify, late, samples, stack } from '@strudel/web';
 initStrudel({
   prebake: () => samples('github:tidalcycles/dirt-samples'),
 });
 
-const graphContainer = document.getElementById('graph');
-
 const textarea = document.getElementById('code');
 if (window.location.hash) {
   textarea.value = atob(window.location.hash.slice(1));
@@ -60,12 +57,6 @@ async function update() {
   }
   console.log('parsed tree');
   console.log(tree.rootNode.toString());
-  try {
-    renderGraph(tree, graphContainer);
-  } catch (err) {
-    console.warn('could not render graph');
-    console.error(err);
-  }
   try {
     let patterns = {};
     window.p = (name, pattern) => {
diff --git a/packages/tidal/package.json b/packages/tidal/package.json
index 3cab8182..0e2d8aa5 100644
--- a/packages/tidal/package.json
+++ b/packages/tidal/package.json
@@ -27,8 +27,6 @@
   },
   "homepage": "https://github.com/tidalcycles/strudel#readme",
   "dependencies": {
-    "@hpcc-js/wasm": "^2.15.3",
-    "jgf-dot": "^1.1.1",
     "@strudel/web": "workspace:*",
     "hs2js": "workspace:*"
   },
