Blackprint

A general purpose visual programming interface for lowering programming language's steep learning curve, and introduce an easy way to experimenting with your beautiful project for other developer.

Blackprint Sketch is built using ScarletsFrame (performance and features).
Blackprint Engine is distributed separately for different runtime environment.
Blackprint Editor is created as a online IDE for browser.

Note

Please use Chromium based browser for better rendering performance.

Default Node's UI design was inspired by UE4 Blueprint and can be modified with HTML/CSS. If you're using Blackprint Editor you can choose different theme on the settings, and here's the code for reference if you want to create your own theme.

Documentation

Warning: This project haven't reach it stable version

The documentation haven't been finished, there are inline documentation on the template and some information on CONTRIBUTING.md if you want to use Blackprint before reaching v1.0.0.

Example

If you're looking for minimal sketch example to get started integrate for your editor project:

• JSBin
• StackBlitz

If you just want to execute exported Blackprint JSON, you can just use the engine. I also provide few simple example for different framework in case you want to use integrate to your frontend framework. For non-browser engine, there are example on it's repository. You can copy and paste the JSON to Blackprint Editor to see the nodes arrangement. The example below is using this arrangement.

• Multiply - Event Listener
• Multiply - ScarletsFrame
• Multiply - Vue
• Multiply - React

Available Shortcut for Blackprint Sketch

Blackprint Roadmap

This roadmap could be changed on the future, feel free to request feature or report an issue.

Blackprint Engine

Name	JavaScript		PHP	Golang	Python	C#
	Browser	Deno/Node.js
Blackprint Engine					-	-
Minimal example	✔️ Link	✔️ Link	✔️ Link	✔️ Link	-	-
Environment variables	✔️	✔️	-	-	-	-
Import modules from URL	✔️	✔️	-	-	-	-
Pausable and routable data flow	🚧	🚧	-	-	-	-
Remote control	🧪	🧪	-	-	-	-

🚧 = Under development (In the current working plan)
🧪 = Experimental/Alpha stage (Being tested and may have rapid changes)

With remote control you can easily manage connection to the target environment (Node.js/PHP/etc) from the browser. Please always run your app inside of container (like Docker) if you allow someone to remote control your system.

Example case where you may need remote control:

• Creating Discord.js bot (because the library doesn't have support for browser)
  • Support for browser was dropped due to CORS at the Discord endpoint
• Collaboratively work with your friend
• Remotely modify your running application in realtime

• Blackprint Sketch (this repository)
  • Mirrored sketch on detachable window
  • Mini sketch for preview
  • Hot Reload 🧪
  • Export single sketch to JSON
  • Importable minimal sketch for different project
  • Select and move multiple nodes at once
    • Bulk delete
    • Add feature to put nodes into a group
    • Create a function from nodes 🚧
  • Clicked nodes should be moved on front of the other nodes (z-index)
  • Automatically put cable on suitable port when it's dropped on top of a node
  • Add feature to arrange cable (cable branching)
  • Add variable's node
  • Add feature to hide some unused port on a node
  • Add feature to import node skeleton (use default node, and no execution)
    • Create addons for VS Code for previewing exported Blackprint
    • Add JSON preview for Visual Studio Code
• Blackprint Editor (repository)
  • Demo
  • Basic nodes editor
  • Detachable window (with ScarletsFrame)
  • Add Environment Variables editor 🧪
  • Import sketch from URL
  • Move current sketch with minimap
  • Node list editor (right click and from side panel)
  • Error/log popup or overlay
  • Show overview or notice when importing nodes from URL
  • Multiple sketch workspaces or tabs
    • Export multiple sketch workspaces to JSON
• Simplify node development for new developer
  • Auto blackprint.config.js import
  • Add example for using ES6 modules importing system
    • It's possible to use Snowpack or something else, but it currently can't compile .sf
• Better documentation
  • Add TypeScript definition file
• Nodes docs generator
• Blackprint Nodes Package Manager
  • Use NPM registry for Node.js/Deno/Browser

Currently the main focus is Blackprint for JavaScript. PHP, and Golang engine could have some changes on the future.

Other possible plan

Blackprint Engine:

• Lua (because it's embeddable language)
• Java (or maybe Kotlin)
• Rust (may get removed from this list)
• C++ (for Arduino if possible)

Some Note

Each engine may have different compatibilities.
For the example:

• WebAudio is only compatible in the browser.
• Web server is not compatible in the browser.

Blackprint will act as an interface for each engine. To use it on NodeJS, Deno, or other JavaScript runtime, you can export it to JSON and use engine-js. But it doesn't mean exporting is just like a magic, you also need to write registerNode and registerInterface on the target engine. Except if someone already write the Blackprint Module (node and interface) on target engine, you can easily plug and play the module.

Contributing

To make things easier, please make sure to read the Contributing Guide before creating a issue/request.

If you want to compile and start the editor's web server on your machine, you can run the command below:

$ cd /your/project/folder
$ git clone --depth 1 --recurse-submodules https://github.com/Blackprint/Blackprint.git .
$ npm i
$ npm start
 >> [Browsersync] Access URLs:
 >> -----------------------------------
 >> Local: http://localhost:6789
 >> -----------------------------------

Build and run the unit test

If you're trying to run the unit test, you can use npm run compile and then npm test.

$ cd /your/project/folder
$ git clone --depth 1 --recurse-submodules https://github.com/Blackprint/Blackprint.git .
$ npm i
$ npm run compile
$ npm test

License

Blackprint is a MIT licensed open source project and completely free to use.

But please consider sponsoring the people who work and contribute amount of effort to maintain and develop new features for this project. Because without their contribution, this project may get slowed down or possible to getting paused.