Building a Synth Patch Library with Claude (Part 2: The Generator)

Session 1: Nothing Worked

First version shipped with a bug that broke everything. No buttons responded at all.

Root cause: a 246KB single-line JSON blob was breaking JavaScript parsing. The PATCHES constant was improperly formatted, causing all event handlers to fail silently. No errors in console, just nothing happening.

Fix:

• Used Python's json.dump() with proper separators to format the data correctly
• Separated HTML structure from data injection to prevent syntax collisions
• Rebuilt all JavaScript event handlers cleanly

The lesson here applies broadly: when you embed a large data structure directly in a JavaScript file, formatting matters. A single-line 246KB string will choke parsers in ways that are hard to debug because the failure is silent.

Session 2: Stack Mode

The next request was the most architecturally interesting: allow stacking multiple patches per category, but respect the voice limitations of each synth.

A Moog Little Phatty is monophonic. You can't stack three Phatty patches simultaneously. There's only one voice. A Yamaha PSR-730 is multitimbral. You can stack it multiple times in the same category. The generator needed to know the difference.

Synth classification:

const MULTI = ['Yamaha PSR-730', 'Alesis Micron'];
const SINGLE = ['Moog Little Phatty', 'Modal Argon8', 'Dave Smith Poly Evolver', 'Korg microKORG'];

Validation function:

function canStack(synth, usedLayers) {
    return MULTI.includes(synth) || !usedLayers.some(l => l.synth === synth);
}

Multi-voice synths can appear multiple times per category. Single-voice synths can only appear once. This prevents generating a combination that's physically impossible to play.

Stack controls use HTML range inputs (1-3 layers per category), real-time display updates, and per-layer edit/delete/regenerate controls.

Sessions 3-5: The Reaper Export (The Interesting Part)

This is where it got genuinely complex.

The first attempt at a Reaper export created new tracks from scratch. That approach had an immediate problem: the user already had a Reaper session with MIDI routing configured for each synth: specific MIDI channels, effects chains, audio routing, everything. Creating new tracks from scratch threw all of that away. It was useless.

The second attempt broke the buttons again. A function was inserted mid-declaration block, breaking JavaScript scope. Same symptom as Session 1, different cause. Solution: complete file rebuild using a Python script to regenerate the entire HTML with proper structure rather than patching.

The third approach was the right one. The user uploaded their actual Reaper session template, a 954-line .RPP file. The instruction was simple: use that template, don't create new tracks. Just update the track names with the patch info.

What that required:

Reverse-engineering the .RPP format to find the relevant pieces:

• Track structure: <TRACK {GUID}>
• Track names: NAME "track name here"
• MIDI routing: MIDIOUT values
• Each synth already had a named track with routing pre-configured

Synth-to-track mapping extracted from the template:

const SYNTH_TRACK = {
    'Modal Argon8':           'Argon8 Midi',
    'Moog Little Phatty':     'Midi To Moog',
    'Yamaha PSR-730':         'MidiKeyz',
    'Alesis Micron':          'Midi To Micron',
    'Dave Smith Poly Evolver':'Midi to DSI',
    'Korg microKORG':         'Midi To MKorg'
};

The export logic:

Object.entries(synthPatches).forEach(([synth, patches]) => {
    const trackName = SYNTH_TRACK[synth];
    const patchList = patches.join(' | ');
    const newName = trackName + ' :: ' + patchList;
    rpp = rpp.split('NAME "' + trackName + '"').join('NAME "' + newName + '"');
});

The entire 954-line template was base64-encoded and embedded in the HTML (38KB encoded). On export, it decodes client-side, updates only the track names, and downloads as a .RPP file ready to open.

The result: exported sessions preserve all MIDI routing, all audio tracks, all effects chains, all session settings. Track names get updated with the generated patch combination. Nothing else changes.

When multiple patches stack to the same synth, they appear together in one track name:

Midi To Moog :: BASS: Thick Bass 909 | PAD: Dark Atmosphere

Sessions 6-7: Preset Fixes and Logo Animation

Preset bug: The Chill and Aggressive presets were generating 2 pads every time regardless of settings. Hardcoded stack counts in the preset functions were overriding user selections and skipping categories. Fixed by making each preset generate all 4 categories with appropriate stack emphasis. Aggressive gets heavy bass and lead stacks, Chill gets pad emphasis, etc.

Logo animation: The glitch effect on hover uses layered CSS keyframe animation with multi-color drop shadows cycling through electric blue and purple:

@keyframes glitch {
    0%   { transform: translate(0); }
    20%  { transform: translate(-3px, 3px);
           filter: drop-shadow(0 0 30px #00d4ff) drop-shadow(0 0 50px #7b2ff7); }
    40%  { transform: translate(-3px, -3px);
           filter: drop-shadow(0 0 35px #a0c4ff) drop-shadow(0 0 55px #b794f6); }
    60%  { transform: translate(3px, 3px);
           filter: drop-shadow(0 0 40px #00d4ff) drop-shadow(0 0 60px #7b2ff7); }
    80%  { transform: translate(3px, -3px);
           filter: drop-shadow(0 0 45px #a0c4ff) drop-shadow(0 0 65px #b794f6); }
    100% { transform: translate(0); }
}

Chromatic aberration effect via alternating blue/purple shadow layers at different radii.