The Modular Synth — Drag, Wire, Play, Share
A Eurorack-style modular synthesizer in pure Web Audio. Drag modules. Connect them with patch cables that animate with audio. Save the patch as a URL. Play with your keyboard.
What this is
A virtual Eurorack rack in your browser. Eight modules: 2 VCOs (saw and square), a 4-input mixer, a resonant lowpass VCF, an ADSR envelope, a VCA, an LFO with sine and saw outputs, and a stereo output. Drag any module by its header. Click a jack and drag to another jack to draw a patch cable — it routes through Web Audio in real time. Cables glow and pulse with the audio they carry. Two-octave keyboard via your QWERTY keys. Save the entire patch as a URL hash. The default patch is fat and playable from the first key press.
Why this is mind-blowing
A real modular synth costs thousands of dollars. This one costs nothing, lives in a tab, sounds great, and the patch you build can be emailed as a link. The cables animate with the actual audio passing through them — one of those touches that makes you smile every time.
Build a single-file modular synthesizer in pure Web Audio. The UI is a
virtual patch panel with draggable modules: VCOs, VCFs, VCAs, ADSR
envelopes, LFOs, mixer, output. Each module has labeled jack ports —
click and drag to draw a patch cable between them. Cables update audio
routing in real time. Computer keyboard plays the synth. Save the patch
as a URL hash so I can share specific sounds. Animate the cables with
the audio they're carrying.Paste this into Claude, Cursor, or Copilot. Change one thing that matters to you.
What I learned shipping it
- Web Audio's AudioNode graph maps 1:1 onto the modular synth metaphor. connect() and disconnect() are literally patch cables. You're not simulating modular — you're exposing a graph that already exists.
- Animating cables with their actual carrier signal (analyser nodes feeding cable thickness/glow) is the move that makes the demo feel alive. Without it, the cables are decoration.
- Encoding the entire patch — module positions, knob values, all connections — in a base64 URL hash means every patch is shareable as a link. No backend needed for collaboration.