JavaScript Interface

The JavaScript interface controls the complete application logic of a Gorilla Engine plugin. It is responsible for what appears on screen, but its role is not limited to visual controls.

The application layer can:

• Locate and load the .blob files exported by Gorilla Editor
• Read, observe, and update exposed instrument or effect parameters
• Manage application, session, and preset state
• Save and recall presets
• Respond to user input and host callbacks
• Coordinate multiple views and instruments
• Load images, fonts, animations, presets, and other product assets
• Present dialogs, notifications, activation, and licensing workflows
• Record diagnostic information and handle application errors

The sonic core remains responsible for producing and processing sound. The JavaScript interface connects that core to the product experience and to the surrounding standalone or DAW environment.

Choose an Application Layer

Gorilla Engine provides two complementary ways to build this application logic.

Gorilla Engine React

Gorilla Engine React is the recommended application layer for new products. It brings React components, hooks, context, JSX, and TypeScript to Gorilla Engine’s native runtime. It is a custom renderer, not a browser: React components create and update native Gorilla Engine controls without HTML or a DOM.

React substantially reduces the code required for application and state management. State changes flow declaratively through components, shared behavior can be packaged into providers and hooks, and complex interfaces can be assembled from reusable parts instead of manually synchronizing native objects.

Gorilla Engine React does not prevent direct runtime access. Use React for the application structure and call the native API where a lower-level capability is required.

Native JavaScript or TypeScript API

The native Gorilla Engine API exposes UI classes, instrument loading and parameter access, host information, session callbacks, file dialogs, and other runtime facilities. A complete plugin application can be written directly against this API.

Use @types/gorilla-engine when working in TypeScript. The declarations provide typed access to the native API and are documented in the Gorilla Engine JavaScript API.

Direct API access is useful when you need precise low-level control, are maintaining a native JavaScript application, or are implementing functionality beneath a higher-level abstraction. It does, however, leave component composition, state propagation, lifecycle handling, and much of the surrounding product infrastructure to the application developer.

Available Gorilla Engine React Packages

The following packages cover project scaffolding, developer convenience scripts, the React application layer, and reusable product functionality. The scaffolding and script packages are development tools; the remaining packages provide runtime behavior for your plugin.

@gorilla-engine-sdk/create-gorilla-engine-plugin

Scaffolds a complete plugin project with a Gorilla Engine project file (.ugep), a React and TypeScript interface, instrument and asset templates, and build and deployment scripts.

@gorilla-engine-sdk/gorilla-engine-react

Provides the custom React renderer for Gorilla Engine’s native interface, including native component wrappers, declarative parameter bindings, instrument hooks, and TypeScript definitions. It uses native controls rather than HTML or a browser DOM.

@gorilla-engine-sdk/gorilla-engine-scripts

Provides developer convenience scripts for bundling and deploying TypeScript and TSX interfaces, exporting instrument blobs, generating instrument typings, and watching for changes. It also runs Gorilla Compiler to build installers, with optional installation, and can launch and restart the installed standalone plugin during development.

@gorilla-engine-sdk/ge-blob-manager

Locates and loads Gorilla Engine blob files across macOS and Windows. It supports default and remembered locations, native file selection, persistent settings, and both React component and standalone APIs.

@gorilla-engine-sdk/ge-session-presets-lib

Manages DAW session save and restore, factory and user preset discovery, preset loading and saving, deletion, change tracking, and lifecycle callbacks. It exposes this state through a React provider and hooks.

@gorilla-engine-sdk/ge-preset-browser

Provides a ready-to-use preset browser on top of ge-session-presets-lib, including preset selection, previous and next navigation, Save, Save As, Delete, category handling, and related dialogs.

@gorilla-engine-sdk/ge-dialogs-lib

Provides reusable modals, tooltips, and notifications for Gorilla Engine React applications.

@gorilla-engine-sdk/ge-product-hub

Integrates plugin activation and trials with Gorilla Engine Product Hub. It covers local activation persistence, offline validation, signature verification, trial tracking, and hardware fingerprint integration.

@gorilla-engine-sdk/ge-labeled-components

Provides parameter-aware labeled knobs, sliders, toggles, combo boxes, and meter sliders with consistent labels, value display, formatting, interaction behavior, and styling.

@gorilla-engine-sdk/ge-winston-logging

Provides structured console and file logging for plugin instances through a React provider and hook. It supports log levels, instance identification, custom Winston transports and formats, and optional interception of standard console methods.

Recommended Approach

Start new applications with Gorilla Engine React and use the packages above for established product concerns. This keeps product code focused on the behavior and experience that make the plugin distinct.

Use the native API directly where necessary rather than rebuilding the entire application at the low level. A React application can still use any capability declared by @types/gorilla-engine.

Continue with the Gorilla Engine React examples to see this structure in complete instrument and effect projects.