Web User Interfaces for DPF

This project builds on top of the DPF audio plugin framework to add web-based UI support. Plugins can leverage JavaScript and related tech to provide complex user interfaces on the computer running the plugin and optionally over the local network.

Examples running on Bitwig for Linux

---

Features

• Based on DISTRHO Plugin Framework (DPF)
• C++ for DSP development
• WebKitGTK or CEF on Linux, WKWebView on macOS, Edge WebView2 on Windows
• VST3 / VST2 / CLAP / LV2 plugin formats
• Network UI support, eg. for remote control using a tablet
• Just the powerful basics

Example JavaScript UI code

class ExampleUI extends DISTRHO.UI {

    constructor() {
        super();
    
        // Connect <input type="range" id="gain"> element to a parameter

        document.getElementById('gain').addEventListener('input', (ev) => {
            this.setParameterValue(0, parseFloat(ev.target.value));
        });
    }

    parameterChanged(index, value) {
        // Host informs a parameter change, update input element value

        switch (index) {
            case 0:
                document.getElementById('gain').value = value;
                break;
        }
    }
    
}

The complete UI interface is defined here.

Plugin implementations

Consul
Castello Reverb

Related projects

Guinda
Pisco