Strudel Live Coding - Make Music with Code Online
Write musical patterns as code and hear them instantly in the embedded Strudel editor — TidalCycles for the browser.
Pick a starter pattern below, press the play button inside the editor, then change the code while it runs. That is live coding: the music updates the moment you re-evaluate.
Strudel Live Coding - Make Music with Code Online
Write musical patterns as code and hear them instantly in the embedded Strudel editor — TidalCycles for the browser.
Starter patterns
Pattern: Drums
sound("bd hh sd hh")Sound starts only after you press play inside the editor. Want the full environment with samples browser and visuals? Open in full Strudel
Strudel mini-notation quick reference
The ten constructs that unlock most of the pattern language. Everything inside double quotes is mini-notation; one quoted sequence lasts exactly one cycle.
| Construct | Example | What it does |
|---|---|---|
| sound() / s() | sound("bd hh sd hh") | Plays named samples or synths: bd = bass drum, sd = snare, hh = hi-hat. The four events share one cycle equally. |
| note() | note("c4 e4 g4").sound("piano") | Plays pitches by name (c4, eb3) or MIDI number, sent to whatever sound you chain after it. |
| * (repeat) | sound("hh*8") | Squeezes 8 hi-hats into the space of one event — the standard way to write fast subdivisions. |
| ~ (rest) | sound("bd ~ sd ~") | A silent slot. The event grid keeps its timing; the tilde just plays nothing. |
| [ ] (group) | sound("bd [sd sd] bd sd") | Brackets pack several events into a single slot, subdividing its time — here two quick snares share beat 2. |
| < > (alternate) | note("<c2 eb2 g2>") | Angle brackets play one entry per cycle, cycling through them — an instant chord progression. |
| stack() | stack(sound("bd*4"), sound("hh*8")) | Layers patterns so they play simultaneously — how you build a full drum kit or add a bassline under drums. |
| fast() / slow() | sound("bd sd").fast(2) | Speeds a pattern up or stretches it: fast(2) fits two repetitions per cycle, slow(2) spreads one over two cycles. |
| rev() | note("c4 e4 g4 b4").rev() | Reverses the pattern within each cycle — a one-word melodic variation. |
| .euclid(k, n) | sound("bd").euclid(3, 8) | Spreads k hits as evenly as possible over n steps. euclid(3,8) is the tresillo rhythm behind countless dance and Latin grooves. |
About Strudel and live coding
Live coding is performing music by writing and rewriting code while it plays. Instead of arranging notes on a timeline, you describe patterns — a kick drum every quarter note, a chord that changes each cycle, hi-hats squeezed into triplets — and the language turns those descriptions into sound immediately. Change a line, re-evaluate, and the music transforms on the next cycle without ever stopping. The scene around this practice grew into algoraves, club nights where the performers' code is projected for the audience to read as they dance.
Strudel is the JavaScript incarnation of TidalCycles, the pattern language created by Alex McLean in Haskell around 2009 that became the lingua franca of live-coded music. Strudel reimplements Tidal's ideas so they run entirely in a browser tab: no Haskell toolchain, no SuperCollider audio server, no installation at all. This page embeds the official Strudel REPL from strudel.cc in a frame, so you get the genuine editor — flash-on-evaluate, error messages, built-in sounds — inside the page, and the starter buttons load working patterns into it. The Open in full Strudel link takes your current pattern to the complete environment with the sample browser and visualizations.
The heart of Tidal-family languages is the cycle: a repeating span of time, by default about two seconds, that every pattern is measured against. Mini-notation — the text between double quotes — slices that cycle. Write sound with the string bd hh sd hh and you get four equal events per cycle: kick, hat, snare, hat, the most basic rock beat. From there, small edits produce big musical changes: an asterisk multiplies events (hh*8 is a stream of eighth-note hats), a tilde inserts silence, square brackets subdivide one slot into several faster events, and angle brackets alternate between values on successive cycles, which is how a two-character edit becomes a chord progression.
What makes pattern languages so addictive is that transformations compose. Chain rev() to flip a melody, fast(2) to double its speed, or euclid(3,8) to redistribute hits into the Cuban tresillo rhythm — and each of these applies to whole patterns, not single notes, so one edit changes the entire texture. Start with the Drums pattern, swap a sample name, add one asterisk, and you are live coding.
Pattern recipes to try in the editor
Copy any of these into the embedded editor, press play, then mutate them one token at a time.
| Code | What you hear | Idea it demonstrates |
|---|---|---|
| sound("bd hh sd hh") | A basic backbeat: kick, hat, snare, hat, once per cycle | Four events split one cycle evenly — the hello world of mini-notation. |
| sound("bd*4, hh*8") | Four-on-the-floor kick under a stream of eighth-note hats | A comma inside the quotes layers sequences, like a compact stack(). |
| note("<c2 eb2 g1 bb1>").sound("sawtooth").lpf(500) | A dark filtered bassline that moves to a new root each cycle | Angle brackets alternate per cycle; lpf(500) is a 500 Hz low-pass filter taming the sawtooth. |
| sound("bd").euclid(3, 8) | The tresillo: hits on steps 1, 4, and 7 of 8 | Euclidean rhythms distribute 3 hits as evenly as possible across 8 steps — a rhythm found from Cuban son to EDM. |
| note("c4 e4 g4 b4").rev().fast(2) | A descending arpeggio played twice per cycle | Transformations chain left to right: reverse the pattern, then double its speed. |
How to start live coding
- Click a starter — Drums, Melody, Bassline, or Polyrhythm — to load its code into the embedded Strudel editor.
- Press the play button inside the editor (browsers require a click before any sound can start).
- Edit the code while it plays: change a sample name, add *2 to an event, or swap a note — then press Ctrl+Enter (Cmd+Enter on Mac) to re-evaluate.
- Layer more patterns with stack() and shape them with fast, slow, rev, or euclid using the quick-reference table above.
- When a pattern grows beyond a sketch, use Open in full Strudel for the complete environment with the sound browser and visuals.
Strudel live coding FAQ
What is the difference between Strudel and TidalCycles?
TidalCycles is the original pattern language, written in Haskell and usually paired with the SuperCollider synthesis engine. Strudel is an official sibling project that ports the same pattern system to JavaScript and the Web Audio API, so it runs in any modern browser with zero installation. Patterns and concepts transfer almost one-to-one between the two.
Why do the starter buttons reload the editor?
Strudel accepts a whole program through its URL: the pattern source is base64-encoded into the address after the # symbol. Each starter button points the embedded editor at a new URL carrying that pattern, which is also why the Open in full Strudel link brings your current pattern along.
Why is there no sound until I press play in the editor?
Browsers block all audio until the user interacts with the page that produces it — an autoplay protection. The Strudel frame is its own page, so the first play click must happen inside the editor itself. After that, re-evaluating code updates the music without stopping.
What is a cycle?
The cycle is Tidal and Strudel's unit of musical time — a repeating span, roughly two seconds at the default tempo, that all patterns are measured against. A quoted sequence like bd hh sd hh divides one cycle into equal parts; fast(2) fits two cycles' worth into one; angle brackets dole out one value per cycle.
What is an algorave?
An algorave is a music event where performers generate the music (and often visuals) live by writing code, typically with the screen projected so the audience can watch the source change. The term was coined around 2012 within the TidalCycles community, and algoraves now happen worldwide.
Is Strudel free? Why is it embedded in a frame?
Yes — Strudel is free, open-source software released under the AGPL-3.0 license by the Strudel/TidalCycles community. Embedding the official strudel.cc editor keeps that codebase in its own origin, cleanly separated from this site, while giving you the real, always-up-to-date REPL rather than a copy.