# @strudel/web > Easy to setup, opiniated bundle of Strudel for the browser. Latest version **1.3.0** (published 2026-01-18) · AGPL-3.0-or-later license · 0 weekly downloads ## Install ```sh npm install @strudel/web pnpm add @strudel/web yarn add @strudel/web bun add @strudel/web ``` ## Health **Score 50/100 (C)** — status: stable. Positive: esm support; no vulnerabilities. Warnings: low downloads; no types. ## Facts | | | |---|---| | Version | 1.3.0 | | Published | 2026-01-18 | | First published | 2023-05-10 | | Weekly downloads | 0 | | License | AGPL-3.0-or-later | | TypeScript types | none | | Module format | ESM + CommonJS | | Node | >=18.0.0 | | Dependencies | 5 | | Unpacked size | 1.5 MB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | Felix Roos | | Maintainers | daslyfe, yaxupaxo, felixroos | | Keywords | tidalcycles, strudel, pattern, livecoding, algorave | ## Links - npm: https://www.npmjs.com/package/@strudel/web - Repository: https://codeberg.org/uzu/strudel - Homepage: https://codeberg.org/uzu/strudel#readme - Issues: https://codeberg.org/uzu/strudel/issues - npm.io page: https://npm.io/package/@strudel/web ## Dependencies (5) - [@strudel/core](https://npm.io/package/@strudel/core.md) 1.2.6 - [@strudel/mini](https://npm.io/package/@strudel/mini.md) 1.2.6 - [@strudel/tonal](https://npm.io/package/@strudel/tonal.md) 1.2.6 - [@strudel/webaudio](https://npm.io/package/@strudel/webaudio.md) 1.3.0 - [@strudel/transpiler](https://npm.io/package/@strudel/transpiler.md) 1.2.6 ## Alternatives - [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads - [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads - [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads - [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads - [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads ## Recent versions - 1.3.0 (latest) — 2026-01-18 - 1.2.8 — 2026-01-18 - 1.2.7 — 2026-01-17 - 1.2.6 — 2025-10-27 - 1.2.5 — 2025-09-10 - 1.2.3 — 2025-05-29 - 1.2.2 — 2025-05-24 - 1.2.1 — 2025-05-01 - 1.2.0 — 2025-05-01 - 1.1.0 — 2024-05-31 - 1.0.3 — 2024-02-23 - 1.0.2 — 2024-02-23 - 1.0.1 — 2024-02-08 - 1.0.0 — 2024-01-22 - 0.11.0 — 2024-01-18 - … 6 more at https://npm.io/package/@strudel/web/versions ## README # @strudel/web This package provides an easy to use bundle of multiple strudel packages for the web. ## Usage Save this code as a `.html` file and double click it: ```html ``` 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 initStrudel({ prebake: () => samples('github:tidalcycles/dirt-samples'), }); document.getElementById('play').addEventListener('click', () => s("bd sd").play() ) ``` You can learn [more about the `samples` function here](https://strudel.cc/learn/samples#loading-custom-samples). ### Evaluating Code Instead of creating patterns directly in JS, you might also want to take in user input and turn that into a pattern. 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 initStrudel(); document.getElementById('play').addEventListener('click', () => evaluate('note("c a f e").jux(rev)') ); document.getElementById('stop').addEventListener('click', () => hush() ); ``` ### Double vs Single Quotes There is a tiny difference between the [Strudel REPL](https://strudel.cc/) 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. This difference means that you cannot call pattern methods on raw strings, for example `"1 2 3".slow(2)`. To make it work you can either: 1. Use the `evaluate` function, which behaves exactly like the Strudel REPL, interpreting double quoted strings as mini notation. 2. wrap the string with `m`: `m("1 2 3").slow(2)` 3. wrap the string in a control function: `n("1 2 3").slow(2)` depending on your context. ## More Examples Check out the examples folder for more examples, both using plain html and vite! --- _Source: https://npm.io/package/@strudel/web · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._