Basic Synth

Basic Synth is the most approachable complete Gorilla Engine React instrument. It combines a virtual-analog sound core with a React interface for amplifier and filter envelopes, cutoff, resonance, envelope amount, velocity, and glide.

What it demonstrates

• Binding React controls to exposed instrument properties
• Reusing labeled knob components with shared visual configuration
• Organizing an instrument interface into functional sections
• Loading the instrument blob from the React root
• Integrating session state, presets, notifications, and dialogs
• Using image filmstrips and macOS Retina assets

Explore the project

The important locations are:

• instrument/Basic Synth.inst contains the sound core and exposed parameters.
• src/app/Root.tsx loads the instrument and initializes session and preset behavior.
• src/app/components/UserInterface.tsx composes the synth controls.
• src/app/pluginConfig.ts contains product configuration used by the application.
• assets/ contains fonts, control graphics, and factory presets.

Controls receive an instrument and an instrument property. Shared props keep repeated controls visually consistent while each instance supplies its position, label, and parameter.

Build and install

From the Basic Synth example directory:

npm ci
npm run buildAndInstall

The command compiles the TypeScript application, prepares the plugin, creates an installer, and installs it. Gorilla Compiler prompts for your Gorilla Engine account credentials when required.

Iterate in standalone mode

npm start

The development process watches the instrument, scripts, application source, and assets. Successful changes are deployed to the installed product and the standalone application is relaunched.

Test the plugin format in a DAW regularly as well. Remove and re-add the plugin instance after a deployment so the host loads the updated application and assets.

Assets and Retina graphics

Reference the standard-resolution image in the application. On macOS, when a matching @2x image exists in the same asset directory, Gorilla Engine can select it on a Retina display. For example, a control referencing images/Rotary.png can use images/Rotary@2x.png without changing the component code. This automatic selection does not apply on Windows.

Continue

Use FX - Reverb to see the same core workflow in an effect, or Drum Sequencer for a more stateful application.