diff --git a/packages/web/README.md b/packages/web/README.md
index 53609c3e..f1ed2bbc 100644
--- a/packages/web/README.md
+++ b/packages/web/README.md
@@ -4,30 +4,47 @@ This package provides an easy to use bundle of multiple strudel packages for the
## Usage
-Minimal example:
+Save this code as a `.html` file and double click it:
-```js
-import '@strudel/web';
+```html
+
+
+
+
```
-As soon as you `import '@strudel/web'`, all strudel functions will be available in the global scope.
-In this case, we are using `note` to create a pattern.
+With the help of [skypack](https://www.skypack.dev/), you don't need a bundler nor a server.
+
+As soon as you call `initStrudel()`, all strudel functions are made available.
+In this case, we are using the `note` function to create a pattern.
To actually play the pattern, you have to append `.play()` to the end.
Note: Due to the [Autoplay policy](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Best_practices#autoplay_policy), you can only play audio in a browser after a click event.
+### Via npm
+
+If you're using a bundler, you can install the package via `npm i @strudel/web`, then just import it like:
+
+```js
+import { initStrudel } from '@strudel/web';
+```
+
+The rest of the code should be the same. Check out [vite](https://vitejs.dev/) for a good bundler / dev server.
+
### Loading samples
By default, no external samples are loaded, but you can add them like this:
```js
-import { prebake } from '@strudel/web';
-
-prebake(() => samples('github:tidalcycles/Dirt-Samples/master'))
+initStrudel({
+ prebake: () => samples('github:tidalcycles/Dirt-Samples/master'),
+});
document.getElementById('play').addEventListener('click',
() => s("bd sd").play()
@@ -44,9 +61,22 @@ This is called evaluation: Taking a piece of code and executing it on the fly.
To do that, you can use the `evaluate` function:
```js
-import '@strudel/web';
-
+initStrudel();
document.getElementById('play').addEventListener('click',
() => evaluate('note("c a f e").jux(rev)')
);
+document.getElementById('play').addEventListener('stop',
+ () => hush()
+);
```
+
+### Double vs Single Quotes
+
+There is a tiny difference between the [Strudel REPL](https://strudel.tidalcycles.org/) and `@strudel/web`.
+In the REPL you can use 'single quotes' for regular JS strings and "double quotes" for mini notation patterns.
+In `@strudel/web`, it does not matter which types of quotes you're using.
+There will probably be an escapte hatch for that in the future.
+
+## More Examples
+
+Check out the examples folder for more examples, both using plain html and vite!
\ No newline at end of file
diff --git a/packages/web/examples/evaluate.html b/packages/web/examples/evaluate.html
new file mode 100644
index 00000000..77e6431f
--- /dev/null
+++ b/packages/web/examples/evaluate.html
@@ -0,0 +1,10 @@
+
+
+
+
diff --git a/packages/web/examples/minimal.html b/packages/web/examples/minimal.html
new file mode 100644
index 00000000..58487009
--- /dev/null
+++ b/packages/web/examples/minimal.html
@@ -0,0 +1,10 @@
+
+
+
+
diff --git a/packages/web/examples/samples.html b/packages/web/examples/samples.html
new file mode 100644
index 00000000..4a839581
--- /dev/null
+++ b/packages/web/examples/samples.html
@@ -0,0 +1,12 @@
+
+
+
+
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ee27ce0d..9710374f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -479,9 +479,6 @@ importers:
'@strudel.cycles/mini':
specifier: workspace:*
version: link:../mini
- '@strudel.cycles/soundfonts':
- specifier: workspace:*
- version: link:../soundfonts
'@strudel.cycles/tonal':
specifier: workspace:*
version: link:../tonal