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. Live coding is a language — Strudel is a small, weird one, closer to Esperanto than to English — and it’s acquired the way languages get acquired, not the way programming languages are usually taught.

I taught beginning and intermediate Spanish at Purdue, and what carried over wasn’t a bibliography; it was the curriculum-design instinct. Ear before mouth. Exposure before grammar. The four stages in Inventor Strudel are the equivalent of an intro language course that covers fundamentals and the survival kit you need to get by — not one or the other. That second layer (here: browsing patterns you can’t name yet, poking sounds before learning symbols) is what most CS-shaped tutorials skip and most language curricula get right.

The language frame over a music-theory frame was deliberate. Inventor Strudel is built for users who are more language-adept than music-theory-adept. The lens is invisible 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’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.