Basic

Source: examples/basic/.

Run this page’s package-local commands from examples/basic/, unless noted otherwise.

Edit code opens its UI files under the plugin: change them and the plugin runs your version.

One Soundor plugin, a gain, built for two runtimes from one config and one UI.

soundor.config.ts   identity, the `gain` parameter, both runtimes
src/main.tsx        mounts src/App.tsx
src/App.tsx         the plugin UI (@soundor/react): a fader, the host's
                    transport, a preset name kept in soundor:storage

runtimes/juce/      JUCE (C++): applies `gain` in PluginProcessor.cpp
runtimes/web/       Web (TypeScript): applies `gain` with a GainNode in
                    src/audio.ts

The UI is the same in both. Only the audio code is written per runtime, in each runtime's own language: about ten lines of C++ in runtimes/juce/PluginProcessor.cpp, and about ten of TypeScript in runtimes/web/src/audio.ts:

export const setupAudio: WebAudioSetup = ({ context, input, output }) => {
  const gain = context.createGain();
  gain.gain.value = parameters.gain.get();
  const unsubscribe = parameters.gain.subscribe((value) =>
    gain.gain.setTargetAtTime(value, context.currentTime, 0.01),
  );
  input.connect(gain);
  gain.connect(output);
  // …
};

In the browserCopy Anchor Link

pnpm dev:web     # soundor dev web: the host, with an inspector
pnpm build:web   # soundor build web: a static site in .soundor/dist/web

Press ▶ to play the host's input (an oscillator, or an audio file of yours) and move the fader: the plugin UI sets gain, and the GainNode follows it.

The build works from any path and inside an iframe, so a docs page can show the code above next to the running plugin:

<iframe src="examples/basic/" width="840" height="720"></iframe>

As a JUCE pluginCopy Anchor Link

pnpm dev          # soundor dev juce: a debug build, the Standalone launched
pnpm build:juce   # soundor build juce: VST3 and Standalone in .soundor/dist/juce

JUCE must be installed (see soundor doctor).

TestsCopy Anchor Link

pnpm test
pnpm typecheck
pnpm build:web

Behavioral tests render the real App with @soundor/testing-library/react, semantic queries, and userEvent.setup(). The four testing dependencies are explicitly declared. These run against the simulated runtime, with no browser or native engine. See the Testing guide. Root repository checks exclude examples; run these commands explicitly.