jianinz / blueprint

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

Blueprint

A JUCE rendering backend for React.js

Blueprint is an experimental JavaScript/C++ framework that enables a React.js frontend for a JUCE application or plugin. It provides an embedded, ECMAScript-compliant JavaScript engine via Duktape, native hooks for rendering the React component tree via 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

Examples

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

Besides that, you can check out the BlueprintPlugin example in the examples/ directory. See the "Getting Started" section below for building and running the demo plugin.

Getting Started

First, you'll need to collect the code and its dependencies.

Getting the code

$ git clone --recurse-submodules [e-mail]:nick-thompson/blueprint.git

or

$ git clone [e-mail]:nick-thompson/blueprint.git
$ cd blueprint
$ git submodule update --init --recursive

Running the examples

$ cd blueprint/packages/juce-blueprint
$ npm install
$ npm run build
$ cd ../../examples/BlueprintPlugin/Source/ui/
$ npm install
$ npm run build

Then open up the appropriate exporter for your platform from the appropriate example plugin directory and build as usual.

Starting your project

$ cd blueprint/packages/juce-blueprint
$ npm install
$ npm run build
$ npm run init -- path/to/your/project/directory
$ cd path/to/your/project/directory
$ npm start

Now Webpack will watch your JavaScript files for changes and update the bundle on save. The last step is to add the blueprint::ReactApplicationRoot to your project and mount it into your editor. See the PluginEditor.cpp file in the BlueprintPlugin example for how to do that.

Contributing

Yes, please! I would be very happy to welcome your involvement. Take a look at the open issues or the project tracker to see if there's outstanding work that you might be able to get started. Or feel free to propose an idea or offer feedback by opening an issue as well.

I don't have a formal style guide at the moment, so please try to match the present formatting in any code contributions.

License

See LICENSE.md