Build synthesizers, effects processors, and generative music apps with composable React components
// A complete synthesizer in 10 lines
import { AudioProvider, Sequencer, ADSR, ToneGenerator, Filter, VCA, Delay, Reverb, Monitor, useModStream } from '@mode-7/mod';
function Synth() {
const seq = useModStream(), gate = useModStream(), env = useModStream();
const tone = useModStream(), filtered = useModStream(), vca = useModStream();
const delayed = useModStream(), final = useModStream();
return (
<AudioProvider>
<Sequencer output={seq} gateOutput={gate} bpm={120} />
<ADSR gate={gate} output={env} attack={0.01} decay={0.3} sustain={0.5} release={0.5} />
<ToneGenerator output={tone} cv={seq} frequency={220} />
<Filter input={tone} output={filtered} type="lowpass" frequency={800} />
<VCA input={filtered} output={vca} cv={env} gain={0} />
<Delay input={vca} output={delayed} time={0.375} feedback={0.4} />
<Reverb input={delayed} output={final} />
<Monitor input={final} />
</AudioProvider>
);
}That's a complete step sequencer → envelope → oscillator → filter → VCA → delay → reverb signal chain. No imperative code, no manual node management, just React components.
npm install @mode-7/modWeb Audio API:
const audioContext = new AudioContext();
const oscillator = audioContext.createOscillator();
const gainNode = audioContext.createGain();
const filter = audioContext.createBiquadFilter();
oscillator.connect(gainNode);
gainNode.connect(filter);
filter.connect(audioContext.destination);
oscillator.start();
// Manual cleanup, state sync, lifecycle management...MOD:
<AudioProvider>
<ToneGenerator output={tone} />
<Filter input={tone} output={filtered} />
<Monitor input={filtered} />
</AudioProvider>MOD abstracts the complexity while maintaining full control.
Built FOR React, not adapted to it:
Unlike opinionated libraries, MOD is headless:
Render Props Pattern:
<ToneGenerator output={ref}>
{({ frequency, setFrequency }) => (
<Slider value={frequency} onChange={setFrequency} />
)}
</ToneGenerator>Controlled Props Pattern:
const [freq, setFreq] = useState(440);
<ToneGenerator output={ref} frequency={freq} onFrequencyChange={setFreq} />Imperative Refs:
const ref = useRef<ToneGeneratorHandle>(null);
// Later: ref.current?.setFrequency(880);Use ModUI (included), native HTML, or your favorite component library.
<LFO output={lfo} frequency={3} />
<Filter input={audio} output={out} cv={lfo} cvAmount={5000} />
// LFO sweeps filter cutoff ±5000HzConnect any CV source (LFO, ADSR, Sequencer) to any parameter for dynamic, audio-rate modulation - just like patching hardware modular gear.
Generate or capture audio
Control voltage for modulation
Transform audio signals
Everything you need to build complete audio applications.
View Full Component Reference →
Perfect for building:
function DrumMachine() {
const clock = useModStream(), kickSeq = useModStream(), kickGate = useModStream();
const kickEnv = useModStream(), kick = useModStream();
return (
<AudioProvider>
<Clock output={clock} bpm={120} />
<Sequencer output={kickSeq} gateOutput={kickGate} steps={[1,0,0,0, 1,0,0,0]} />
<ToneGenerator output={kick} frequency={60} cv={kickSeq} />
<ADSR gate={kickGate} output={kickEnv} attack={0.001} decay={0.3} sustain={0} />
<VCA input={kick} output={kick} cv={kickEnv} />
<Monitor input={kick} />
</AudioProvider>
);
}function EffectsChain() {
const input = useModStream(), filtered = useModStream(), compressed = useModStream();
const delayed = useModStream(), output = useModStream();
return (
<AudioProvider>
<Microphone output={input} />
<Filter input={input} output={filtered} type="lowpass" frequency={1000} />
<Compressor input={filtered} output={compressed} threshold={-20} ratio={4} />
<Delay input={compressed} output={delayed} time={0.25} feedback={0.3} />
<Reverb input={delayed} output={output} />
<Monitor input={output} />
</AudioProvider>
);
}function AmbientGenerator() {
const lfo1 = useModStream(), lfo2 = useModStream();
const osc1 = useModStream(), osc2 = useModStream();
const mixed = useModStream(), filtered = useModStream(), output = useModStream();
return (
<AudioProvider>
<LFO output={lfo1} frequency={0.1} />
<LFO output={lfo2} frequency={0.07} />
<ToneGenerator output={osc1} frequency={220} cv={lfo1} cvAmount={50} />
<ToneGenerator output={osc2} frequency={330} cv={lfo2} cvAmount={75} />
<Mixer inputs={[osc1, osc2]} output={mixed} levels={[0.5, 0.5]} />
<Filter input={mixed} output={filtered} type="lowpass" cv={lfo1} cvAmount={2000} />
<Reverb input={filtered} output={output} decay={5} />
<Monitor input={output} />
</AudioProvider>
);
}MOD is designed to work seamlessly with AI coding assistants like Claude, ChatGPT, and Copilot. Our comprehensive documentation makes it easy for LLMs to generate working audio applications.
Get started with an AI assistant:
# In Claude Code, reference the LLM guide:
@https://mode7labs.github.io/mod/llm-guide
# Then ask to build anything:
"Build me a synthesizer with an LFO-modulated filter"
"Create a drum machine with a step sequencer"
"Make an effects processor with reverb and delay"# In Claude Desktop, start with:
Read https://mode7labs.github.io/mod/llm-guide
# Then describe what you want:
"Build a simple synth with envelope control"
"Create a mixer with multiple channels"# In any AI chat:
Based on the mod documentation at mode7labs.github.io/mod,
create an audio visualizer with oscilloscope and spectrum analyzerOur LLM Guide includes:
Web Audio API requires manual node management, imperative connections, and lifecycle handling.
MOD provides declarative components with automatic cleanup and React integration.
Tone.js is excellent for music-focused apps with built-in instruments and a transport system.
MOD excels at:
Choose Tone.js for music theory utilities and built-in instruments. Choose MOD for React apps, custom UIs, and modular synthesis.
Any browser with Web Audio API support.