React-JUCE

Write cross-platform native apps with React.js and JUCE

React-JUCE (formerly named Blueprint) is a hybrid JavaScript/C++ framework that enables a React.js frontend for a JUCE application or plugin. It provides an embedded, ES5 JavaScript engine via Duktape, native hooks for rendering the React component tree to juce::Component instances, and a flexbox layout engine via Yoga.

For more information, see the introductory blog post here: Blueprint: A JUCE Rendering Backend for React.js

Repository

This project is maintained at github.com/bobicloudvision/react-juce.

Status

Approaching Beta. We hope to announce a beta release in the coming weeks, after which we will aim our focus at stability and completeness on the path to a 1.0 release.

Anticipated Breaking Changes

• We'll be renaming Blueprint to react-juce before beta (#34)
• Updating the examples and npm init template to point to npm instead of the local package
• ReactApplicationRoot::evaluate and ReactApplicationRoot::evaluateFile (#115)
• Refactoring the hot reloader and decoupling the EcmascriptEngine from ReactApplicationRoot (#65)

Resources

• Community: The Audio Programmer Discord Server
  • Join the #blueprint channel and say hi!

Maintainers (this fork)

• @bobicloudvision

Original authors

• @nick-thompson
• @joshmarler

Examples

React-JUCE is a young project, but already it provides the framework on which the entire user interface for Creative Intent's Remnant plugin is built.

Besides that, you can check out the example code in the examples/ directory. If you have a project written with React-JUCE that you want to share, get in touch! I would love to showcase your work.

Build (examples)

After clone, run git submodule update --init --recursive (JUCE, Yoga, Hermes, Duktape). From the repo root, with CMake 3.15+ and a C++17 toolchain: npm install then npm run build configures build/, compiles the examples/GainPlugin/jsui bundle (webpack uses Node’s OpenSSL legacy provider for compatibility), and builds the plugin targets. Use npm run build:gainplugin if the build directory is already configured.

Playground (examples/PlaygroundPlugin) is a second example that exercises most react-juce UI pieces (View, Image, Canvas, Button, Text, TextInput, Slider, ListView, ScrollView, EventBridge, parameters). Build its bundle with npm run build:playground-jsui, or bundle + all native targets with npm run build:playground. To build both example UIs in one go (single react-juce compile): npm run build:examples-jsui. On macOS, ./build-mac.sh runs configure, build:examples-jsui, and build:native (Gain + Playground standalones and plugin formats).

Contributing

See CONTRIBUTING.md

License

See LICENSE.md