Gorilla Engine React

Gorilla Engine React is a custom React renderer for building native audio plugin interfaces with Gorilla Engine. It provides React components, hooks, state, JSX, and TypeScript while rendering through Gorilla Engine’s native UI runtime instead of an embedded browser.

Why a custom React renderer?

Browser-based plugin interfaces bring HTML, CSS, and the web component ecosystem, but they also bring a browser rendering runtime into an environment where users may open many plugin instances. Gorilla Engine React keeps React’s declarative programming model while targeting the bounded set of native controls used by audio software.

This gives plugin developers:

• React components, hooks, context, fragments, and keyed lists
• TypeScript definitions and JSX intrinsic-element support
• Native controls for knobs, sliders, buttons, labels, meters, waveforms, keyboards, and editors
• Declarative bindings between controls and instrument parameters
• Gorilla Engine hooks for loading instruments and observing parameter values
• Reusable component packages for common plugin features

How it works

Your React components
        |
        v
Gorilla Engine React reconciler
        |
        v
Gorilla Engine native UI runtime
        |
        v
Standalone application or DAW plugin host

The reconciler translates changes in the React tree into operations on Gorilla Engine’s native components. React remains responsible for composition and state updates; Gorilla Engine remains responsible for the plugin UI and runtime integration.

Differences from browser React

Gorilla Engine React does not render HTML and does not provide a browser DOM. HTML elements such as <div> and <span>, CSS stylesheets, browser globals such as window and document, and browser-oriented component libraries do not apply.

Build interfaces from Gorilla Engine elements such as <geKnob>, <geSlider>, <geLabel>, and <geMidiKeyboard>, or compose them into your own React components. Higher-level components are available from packages including ge-labeled-components, ge-preset-browser, and ge-skinnable-keyboard.

Standard React hooks such as useState, useEffect, useContext, and useReducer work normally. Gorilla Engine React additionally provides:

• useInstrument to load an instrument from a blob
• useInstrumentProperty to observe and update an exposed instrument property

Controls can also connect directly to parameters through declarative bindings.

Project structure

A Gorilla Engine React example is a complete plugin project:

assets/       Images, fonts, presets, and other runtime resources
instrument/   Gorilla Editor instruments and Gorilla Script sources
src/          React and TypeScript application code
*.ugep        Gorilla Compiler project configuration
package.json  Build, install, and development commands