Note

Unfinished and unmaintained, at least for the time being.

I'm putting this on the back burner because I want to allocate more of my time towards uni and working on my other major OSS project, Cyma. I'm still very interested in exploring the capabilites of WebView UIs, so I'll probably return to this project, maybe in a couple months. No guarantees though.

The docs are also currently down because I deleted my Vercel account¹. They were out of date either way - I will update them if and when I return to this project.

If you want to roll your own case-specific React GUI, check out nih-plug-webview (which this is based on) or JUCE 8.

React-Plug is a crate that allows you to build Rust audio plug-ins with React GUIs. It renders your React code through your operating system's built-in WebView, bundles and includes your React GUI, automagically handles plugin-to-GUI communication, and more. It strives to be a batteries-included, opinionated, easy-to-use framework. Here are some of its standout features:

• Rich API for parameters
• Custom GUI/plugin messages
• Macros for TS codegen
• GUI Hot-reloading

It integrates into nih-plug and is based on nih-plug-webview, which uses native WebView to display web UIs.

✨ Getting Started

Requirements

• First, make sure that you have the rust toolchain. If not, install it from rustup.rs.
• You also need to have a node.js package manager, such as:
  • npm
  • pnpm
  • yarn
  • bun

Generating a Plugin

The most straight-forward way to create a new plugin with React-Plug is to use cargo-generate. If you don't already have it, install it using:

cargo install cargo-generate

Finally, you can generate your new plugin using the following command:

cargo generate gh:exa04/react-plug-template

Once you've run it command, you will be prompted to enter all the necessary bits about your plugin. After that, a new project will be created for you.

You can now build your plugin using:

cargo xtask bundle <your-plugin>

For some next steps, check out the "Getting Started" guide.

🚧 Limitations

If you want to want something like this, but more mature, give JUCE 8's WebView UIs a try.

You should also be aware of these limitations before you start using React-Plug for your project:

• It's extremely early in development, and I'd consider its API very unstable
• nih-plug-webview, which it's based on, is also very early in development
• It's very opinionated, necessitating a React-based UI stack
• It relies on macros such as rp_params!, which can make it less flexible than other options / implementing your own case-specific React UI
• It has only been tested on Windows 11 (so far) and will likely never be compatible with Linux
• WebView UIs generally aren't as performant as other options
• Some features, such as nih-plug's EnumParams are not (yet) supported

In my personal opinion, React-Plug is really useful for plug-ins that use a lot of web resources - samplers that download web content, synths that can load presets from an online store, anything like that. For other use cases, maybe go with one of the other fantastic UI options that exist for nih_plug, such as iced and VIZIA.

Footnotes

1. The reason being that Vercel's CEO Guillermo Rauch has publically endorsed and praised Donald Trump. I'm a trans woman who has trans friends that live in the US. They're threatened by Trump's agenda (see project 2025) and his party's fearmongering. ↩