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.