Documentation

import { EffectPlugin, SynthPlugin } from '@the-plug/core';
import type { AudioFrame, PluginAPI, MidiEvent } from '@the-plug/core';

import { Knob, Slider, Button, Canvas, CurveEditor, Dropdown } from '@the-plug/ui';

import { adsr, svf, compress, lerp, dbToGain, sine } from '@the-plug/dsp';

import { EffectPlugin } from '@the-plug/core';
import { Knob } from '@the-plug/ui';

type Params = { gain: number; mix: number };

export default class SimpleGainPlugin extends EffectPlugin<Params> {
  static id = 'com.theplug.gain';
  static pluginName = 'Simple Gain';

  static parameters = [
    { id: 'gain', name: 'Gain', default: 1.0, min: 0, max: 2, units: 'x' },
    { id: 'mix',  name: 'Mix',  default: 1.0, min: 0, max: 1 },
  ];

  // Called once per audio sample — think in single samples, not blocks
  process(frame: AudioFrame<Params>) {
    const g = frame.getParam('gain');
    const m = frame.getParam('mix');
    frame.outL = dryWet(frame.inL, frame.inL * g, m);
    frame.outR = dryWet(frame.inR, frame.inR * g, m);
  }

  // Return JSX describing your plugin's UI
  render(api: PluginAPI<Params>) {
    return (
      <div style={{ display: 'flex', gap: 24, padding: 20 }}>
        <Knob value={api.getParam('gain')}
              onChange={v => api.setParam('gain', v)}
              label="Gain" min={0} max={2} />
        <Knob value={api.getParam('mix')}
              onChange={v => api.setParam('mix', v)}
              label="Mix" />
      </div>
    );
  }
}

import { SynthPlugin } from '@the-plug/core';
import { adsr, svf } from '@the-plug/dsp';
import { Knob, Slider } from '@the-plug/ui';

type Params = { cutoff: number; resonance: number; attack: number; release: number };

export default class SimpleSynth extends SynthPlugin<Params> {
  static id = 'com.theplug.synth';
  static pluginName = 'Simple Synth';
  static category = 'synth';

  static parameters = [
    { id: 'cutoff',    name: 'Cutoff',     default: 2000, min: 20,    max: 20000 },
    { id: 'resonance', name: 'Resonance',  default: 0.5,  min: 0,     max: 1 },
    { id: 'attack',    name: 'Attack',     default: 0.01, min: 0.001, max: 2 },
    { id: 'release',   name: 'Release',    default: 0.3,  min: 0.01,  max: 5 },
  ];

  // Auto-managed DSP state — the framework allocates & resets automatically
  static dsp = {
    env:    adsr(),       // ADSR envelope generator
    filter: svf(),        // State-variable filter
  };

  phase = 0;
  noteFreq = 0;
  gate = 0;

  process(frame: AudioFrame<Params>) {
    // Handle MIDI events at this exact sample
    for (let i = 0; i < frame.midiCount; i++) {
      const evt = frame.getMidiEvent(i);
      if (evt.type === 0x90) {          // Note On
        this.noteFreq = 440 * Math.pow(2, (evt.note - 69) / 12);
        this.gate = 1;
      } else if (evt.type === 0x80) {  // Note Off
        this.gate = 0;
      }
    }

    // Generate saw wave
    this.phase += this.noteFreq / frame.sampleRate;
    if (this.phase >= 1) this.phase -= 1;
    let osc = this.phase * 2 - 1;

    // Apply envelope & filter via auto-managed DSP
    const env = frame.dsp.env(
      this.gate,
      frame.getParam('attack'), 0.1, 0.7, frame.getParam('release')
    );
    const filtered = frame.dsp.filter(
      osc, frame.getParam('cutoff'), frame.getParam('resonance'), 'lp'
    );

    frame.outL = filtered * env;
    frame.outR = filtered * env;
  }

  render(api: PluginAPI<Params>) {
    return (
      <div style={{ display: 'flex', gap: 16, padding: 20 }}>
        <Knob value={api.getParam('cutoff')} onChange={v => api.setParam('cutoff', v)}
              label="Cutoff" min={20} max={20000} />
        <Knob value={api.getParam('resonance')} onChange={v => api.setParam('resonance', v)}
              label="Res" />
        <Slider value={api.getParam('attack')} onChange={v => api.setParam('attack', v)}
                label="Attack" min={0.001} max={2} />
        <Slider value={api.getParam('release')} onChange={v => api.setParam('release', v)}
                label="Release" min={0.01} max={5} />
      </div>
    );
  }
}

static parameters = [
  {
    id: 'gain',        // Unique ID — matches your Params type key
    name: 'Gain',      // Display name in the DAW
    default: 1.0,     // Initial value
    min: 0,           // Minimum (default: 0)
    max: 2,           // Maximum (default: 1)
    units: 'x',       // Display units (optional)
    precision: 2,     // Decimal places (optional)
  },
];

process(inputs: AudioBus, outputs: AudioBus, api: AudioAPI, ctx: ProcessContext) {
  const inL  = api.inL;   // SampleBuffer (array-like)
  const outL = api.outL;

  // FFT-based processing
  const fft = fft_create(1024);
  fft_forward(fft, inL, freqReal, freqImag);
  // ... modify spectrum ...
  fft_inverse(fft, freqReal, freqImag, outL);
  fft_destroy(fft);
}

render(api: PluginAPI) {
  return (
    <div style={{
      display: 'flex',
      flexDirection: 'column',
      backgroundColor: '#1a1a2e',
      padding: 24,
      gap: 16,
    }}>
      <h1 style={{ color: '#fff', fontSize: 18 }}>My Plugin</h1>

      <div style={{ display: 'flex', gap: 24 }}>
        <Knob value={api.getParam('gain')}
              onChange={v => api.setParam('gain', v)}
              label="Gain" size={64} />

        <Slider value={api.getParam('mix')}
                onChange={v => api.setParam('mix', v)}
                label="Mix" orientation="vertical" />
      </div>

      <Button label="Bypass"
              active={api.getParam('bypass') > 0.5}
              onClick={() => api.setParam('bypass', api.getParam('bypass') > 0.5 ? 0 : 1)} />
    </div>
  );
}

import { adsr, svf, compress, ladder, smooth } from '@the-plug/dsp';

export default class MyPlugin extends EffectPlugin {
  // Declare DSP processors — state is auto-allocated by the framework
  static dsp = {
    env:    adsr(),       // ADSR envelope (4 floats of state)
    filt:   svf(),        // State-variable filter (2 floats)
    comp:   compress(),   // Compressor (2 floats)
    moog:   ladder(),     // Moog-style 4-pole (5 floats)
    smoother: smooth(),   // Exponential smoother (1 float)
  };

  process(frame) {
    // Call them via frame.dsp — state persists across samples
    const filtered = frame.dsp.filt(frame.inL, 1000, 0.7, 'lp');
    const compressed = frame.dsp.comp(filtered, -18, 4, 0.01, 0.1);
    frame.outL = compressed;
    frame.outR = compressed;
  }
}

interface MyState { tab: 'main' | 'settings'; loading: boolean; }

export default class MyPlugin extends EffectPlugin<Params, MyState> {
  state: MyState = { tab: 'main', loading: false };

  render(api) {
    return (
      <div>
        <Button label="Main"
                active={this.state.tab === 'main'}
                onClick={() => this.setState({ tab: 'main' })} />
        <Button label="Settings"
                active={this.state.tab === 'settings'}
                onClick={() => this.setState({ tab: 'settings' })} />

        {this.state.tab === 'main'
          ? <Knob value={api.getParam('gain')} />
          : <Slider value={api.getParam('mix')} />
        }
      </div>
    );
  }
}

process(frame) {
  // Read incoming MIDI at this exact sample
  for (let i = 0; i < frame.midiCount; i++) {
    const evt = frame.getMidiEvent(i);

    if (evt.type === 0x90 && evt.velocity > 0) {
      // Note On — evt.note (0–127), evt.velocity (0–127), evt.channel (0–15)
    } else if (evt.type === 0x80) {
      // Note Off
    } else if (evt.type === 0xB0) {
      // CC — evt.note = CC number, evt.velocity = value
    }
  }

  // Send MIDI out
  frame.noteOn(0, 60, 100);   // channel, note, velocity
  frame.noteOff(0, 60);         // channel, note
  frame.cc(0, 1, 64);            // channel, CC#, value
}

process(frame) {
  // phase() returns 0–1 within a musical division
  const lfoPhase = frame.phase('1/4');  // synced to quarter notes
  const depth = sine(lfoPhase) * 0.5 + 0.5;

  frame.outL = frame.inL * depth;
  frame.outR = frame.inR * depth;
}

<div style={{
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'space-between',
  alignItems: 'center',
  gap: 16,
  padding: 24,
  backgroundColor: '#1a1a2e',
  borderRadius: 8,
  width: 400,
  height: 300,
}}>
  <div style={{ flex: 1, alignSelf: 'stretch' }}>...</div>
</div>

static assets = {
  sampleBanks: [{
    id: 'drums',
    name: 'Drum Kit',
    path: './samples/drums',
    samples: [
      { id: 'kick',  name: 'Kick',  path: 'kick.wav',  rootNote: 36 },
      { id: 'snare', name: 'Snare', path: 'snare.wav', rootNote: 38 },
    ],
  }],
  assetFolders: [{
    id: 'wavetables',
    name: 'Wavetables',
    path: './wavetables',
    type: 'wavetable',
  }],
};