Inventor Strudel

In plain terms: an interactive textbook for Strudel, a free browser tool that makes music when you type short patterns into it. You hear what’s possible before you read any code.

Status

live

Auth

none

Stack

React + Strudel

Hard part

ear before eyes

why

The official Strudel docs are a reference manual: alphabetized, complete, almost unreadable for someone who hasn’t already heard what these functions do. Community tutorials are walls of code. Both treat live coding as a syntax to memorize.

Inventor Strudel teaches it the way humans actually learn languages. Ear before eyes. Vocabulary before grammar. Hear before read. Strudel is a language, and languages aren’t acquired by reading the dictionary; they’re acquired by listening, naming what you hear, then assembling small phrases. The wedge is taking that obvious pedagogical fact seriously and shipping a learning surface where the audio happens before the syntax does. Every single time.

what I built

Stages

4

Demos

4

Surfaces

9

Demo

live

Auth

none

A four-stage Learning Journey (Sounds → Sentences → Lessons → Practice) you can’t shortcut. The homepage rotates four full-arrangement demos (Jazz, Lo-Fi, Electronic Pop, Orchestral), so first-time visitors hear what’s possible before reading a line of code. The first interaction is a listen, not a read.

Vocabulary Cards

Play a sound on first click; you name it before you see its symbol. Sound → symbol mapping before symbol → sound.

Sentence Builder

Grammar metaphor: sounds are nouns, modifiers are verbs, effects are adjectives. First patterns are sentences, not configuration.

Sound Browser

MPC-style grid plus Piano Keyboard, Step Sequencer, and Chord Browser. The composer's bench, all on one surface.

Syntax Lab

A/B experiments. Same input, two patterns, hear the difference. The diff is the lesson.

Live Playground

Embedded Strudel console with save-and-share. Public gallery or unlisted link, no signup wall. Make a pattern, paste a URL, your friend hears it.

Patterns Gallery

Browse by mood and genre, not keyword. Browse beats search when users don't have the vocabulary yet.

decisions I’d defend

Ear before eyes. Every interactive element plays a sound on first click: Vocabulary Cards, Sentence Builder, Sound Browser, every preset on the homepage rotation. The Cards force sound → symbol mapping before symbol → sound. The barrier to live coding was never the syntax. It’s the same intimidation that keeps people from learning a language they can’t already hear, and audio first dissolves it.

One sound at a time, globally. A single shared audio engine kills every in-flight pattern across the entire site instantly, including reverb tails: spacebar plays, escape stops, no exceptions. Same lifecycle architecture as Omunikorudo’s auto-init engine. Most learning sites stack audio (a tutorial loop running while a Vocabulary card preview plays while the live-coding console is mid-pattern). That’s just noise dressed up as richness. The no-overlap contract is enforced at the engine layer, not per-component, because per-component is a contract that gets broken next sprint.

Save and share without login. Patterns get either public-gallery or unlisted-link visibility, enforced at the database layer so the security rule survives even when a pattern’s play count updates. The pitch is the link itself: same logic that runs SPF’s demo workspace and Office Hours’ URL-as-config. Make a pattern, copy a URL, your friend hears it twenty seconds later. A signup form between making and sharing is the single biggest conversion-killer for this kind of tool.

the L2 lens

L2 is the term applied linguists use for a second language: the one a learner picks up after their native one. Live coding is a language. Strudel is a small, weird one (closer to Esperanto than to English, with a tight grammar and a shallow vocabulary), but it’s a language, and it’s acquired the way languages are acquired, not the way programming languages are usually taught.

Three patterns from the second-language-acquisition literature (SLA, the field that studies how non-native languages get learned) map one-to-one onto product surfaces:

• Circumlocution (talking around a word you don’t have) is what every Vocabulary Card, every Sound Browser preview, and every Sentence Builder draft is licensing the user to do: poke at a sound, name it before knowing the symbol, assemble a phrase before knowing whether it’s grammatical.
• Trial by error (production followed by self-monitoring rather than external correction) is what the Live Playground and the Syntax Lab A/B both run on. Hear the diff, keep what worked.
• Community exposure is what the Patterns Gallery gets you, not because it’s a recommendation engine but because authentic input from other live coders is the only kind that scales past the introductory shelf.

The deliberate refusal: most language-learning apps optimize for the affective filter in exactly the wrong direction. Krashen’s claim that anxiety blocks acquisition becomes, in product hands, gamified streaks, drill-and-kill repetition, and the threat of losing your place if you stop. Inventor Strudel has some of those affordances inside the lessons because curriculum has to be curriculum, but nowhere does it ask the user to internalize a right answer before they’re ready. Closer to Krashen’s silent period (input first, no forced output) than to Duolingo’s owl.

The teacher’s framing is structural. I taught beginning and intermediate Spanish at Purdue, and what carried over wasn’t the SLA bibliography; it was the curriculum-design instinct. Inventor Strudel is the equivalent of an intro course that covers fundamentals and the survival kit you actually need to get by. That second layer is what most CS-shaped tutorials skip and most language curricula get right.

The language frame over a music-theory frame or a CS frame was deliberate, and the wedge is the audience. Inventor Strudel is built for users who are more language-adept than music-theory-adept. The lens is silent on the page, but it’s always there.

what I learned

Pedagogy is a product surface, not content. The Sentence Builder is the curriculum. The grammar metaphor (sounds/modifiers/effects = nouns/verbs/adjectives) does pedagogical work no written tutorial can. If your teaching is happening in a sidebar, the product is doing the wrong thing.

The grammar metaphor isn’t only for the human learner. Sounds = nouns, modifiers = verbs, effects = adjectives is a useful approximation and a literal lie. Where it earns its place is upstream of the user too: AI tooling, given that metaphor as a build-time constraint, produces the structure I imagine; given a flat technical spec, it doesn’t. The analogy is doing pedagogy for the human and architecture for the model.

Audio interactions have a no-overlap contract. It has to be enforced at the engine layer, never per-component, or it leaks. Every “stack two audio sources” affordance I considered eventually got cut.

Browse beats search when users don’t have the vocabulary. New live-coders can’t search Strudel patterns by keyword because they don’t know the keywords yet. The Patterns gallery, sortable by mood and genre, gets the use the search bar doesn’t. The search bar earns its keep only after a week or two of listening.

PWA + offline turned a tutorial site into a tool. The day I shipped vite-plugin-pwa was the day people started keeping the tab open while playing other DAWs. Tutorial sites get closed. Tools stay open.

what would prove it

If the L2 frame is more than a metaphor, here’s what would settle it. Two risks the framing carries on its back.

• First-click-is-audio is the conversion unit. A visitor whose first interaction is a play button (homepage rotation, Vocabulary card, Sound Browser) converts to opens Strudel later that week at a meaningfully higher rate than a visitor whose first interaction is reading. Proof: a small return-visit cohort split on first-interaction type, watching for the audio-first cohort to come back. Most learning sites are wrong about which click matters; this one is betting it knows.
• The L2 stages predict retention. Learners who walk Sounds → Sentences → Lessons → Practice in order stay in the tool past week one; learners who skip directly to Practice bounce. Proof: stage-completion order against return-visit data, even at small N. If skip-to-Practice users retain at the same rate, the four-stage scaffold is decoration, not pedagogy, and the Sentence Builder doesn’t earn its place as the curriculum.
• Save-and-share is the friend-loop. A pattern URL sent to a friend produces a return visit at a higher rate than a homepage hit, because the URL arrives with context the homepage can’t carry. Proof: tag-and-watch a sample of ?p= URLs against the cold-start path, counting whether the receiving friend opens the playground or just listens.

Risks:

• The grammar metaphor is a literal lie at depth. Sounds-as-nouns and modifiers-as-verbs gets a learner through their first month. A serious live-coder hits the limit (Strudel’s actual grammar is closer to function composition than to natural language) and loses trust in the scaffold. The site doesn’t currently signal where the metaphor breaks, and the learner who notices the break before being warned is the learner who leaves.
• Generalizing to TidalCycles or Sonic Pi might collapse the sharpness. The ear-first framework is supposed to be the abstraction, not the Strudel surfaces. But the Vocabulary Card, the Sentence Builder, the Syntax Lab are tuned to Strudel’s specific vocabulary and grammar, and porting them to a sibling environment may require enough bespoke pedagogy that the framework becomes a wrapper over four different curricula instead of one approach across many tools.

what’s next

Three things I’m circling:

• Deepening the AI Assistant for in-context syntax help, so it can explain a function I just typed and suggest a Sentence Builder phrasing for what I’m trying to do
• Expanding the curated demo rotation beyond the original four
• Exploring whether the ear-first framework generalizes to other live-coding environments (TidalCycles, SuperCollider, Sonic Pi) once the lessons abstraction is decoupled from Strudel-specific syntax

The four arrangements rotate on the homepage at is.hosette.net: listen first.