Skip to content
Gorilla Engine SDK Documentation

Drum Sequencer

Drum Sequencer is the advanced Gorilla Engine React example. It implements an eight-lane, sixteen-step sequencer with separate Steps, Velocity, and Rolls views and synchronizes playback with DAW transport.

What it demonstrates

Section titled “What it demonstrates”
  • Coordinating a substantial interface with React context and useReducer
  • Reading and writing instrument arrays for sequencer data
  • Building reusable step editors, lane settings, selection controls, and playback displays
  • Splitting a complex Gorilla Script instrument across multiple source files
  • Testing transport-dependent behavior inside a DAW

Explore the project

Section titled “Explore the project”

The application is organized around these locations:

  • src/app/Root.tsx loads the instrument and installs the state provider.
  • src/app/state/ defines application state, actions, and reducer behavior.
  • src/app/components/Sequencer.tsx coordinates the three editing views.
  • src/app/components/StepEditor.tsx and BarStepEditor.tsx edit sequence data.
  • src/app/components/LaneSettings.tsx edits the selected lane.
  • src/app/components/LedDisplay.tsx presents playback position.
  • instrument/ contains the instrument and its supporting Gorilla Script files.

Simple controls can bind declaratively to instrument properties. Sequencer grids need bulk array operations, so the example also uses the instrument runtime API to read an array, update it, and write it back.

Build and install

Section titled “Build and install”

From the Drum Sequencer example directory:

Terminal window
npm ci
npm run buildAndInstall

Build and install before starting the watcher. This creates the plugin formats and installed assets that subsequent deployments update.

Iterate in a DAW

Section titled “Iterate in a DAW”

The sequencer needs host transport to produce sound. Use the deployment watcher instead of the standalone workflow:

Terminal window
npm run deploy

After a deployment, remove and re-add the plugin instance in the DAW to load the changes. Keep only one instance running while changing the instrument’s sample set because preloaded audio content can be shared among instances.

State ownership

Section titled “State ownership”

React state owns application concerns such as the selected lane and editing page. Instrument state owns values that must participate in plugin behavior, automation, persistence, or audio processing. The reducer provides predictable UI transitions while instrument properties and arrays remain the connection to the audio runtime.

This division is useful for any plugin with multiple views or coordinated editors; Redux is not required.

Continue

Section titled “Continue”

Start with Basic Synth if you first need the simpler parameter-binding pattern. Consult the generated Gorilla Engine JavaScript API reference for the instrument array methods used by this example.