A general purpose visual programming. This is the main repository for Blackprint that contains source code of cable, node, and container sketch for visualization.
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.
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 is included in the editor, if you want to help contributing or modify you can fork the editor and modify files in this directory. Blackprint Engine and Sketch does have a TypeScript definition files, so if you working with TypeScript you may see a code suggestion in your code editor like Visual Studio Code.
If you're looking for minimal sketch example to get started integrate for your editor project:
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.
https://github.com/Blackprint/Blackprint/assets/11073373/fe3d767b-e340-4371-8685-ef7a12709e0f
Mouse + Keyboard | Touchscreen | Target | Description |
---|---|---|---|
LeftClick + move |
1 touch + move |
Container | Select nodes and cable branch |
Middle/Right click + move |
2 touch + move |
Container | Move the container |
Ctrl + MouseWheel RightClick + MouseWheel |
3 touch + move |
Container | Zoom the container |
RightClick |
tap hold 1 sec |
Node, Cable, Container | Context menu |
Ctrl + LeftClick |
- | Cable | Create cable branch |
Ctrl + RightClick |
- | Port, Cable | Node suggestion |
Shift + LeftClick |
- | Port | Detach last connected cable |
Mouse + Keyboard | Touchscreen | Target | Description |
---|---|---|---|
Ctrl + C |
- | Selected Node | Copy nodes |
Ctrl + V |
- | Selected Node | Paste copied nodes |
Delete |
- | Selected Node | Delete node |
Ctrl + Alt + LeftClick |
- | Anything | ScarletsFrame's element inspector (dev mode) |
This roadmap could be changed on the future, feel free to request feature or report an issue.
Name | JavaScript | PHP | Golang | Python | C# | |
---|---|---|---|---|---|---|
Browser | Deno/Node.js | |||||
Blackprint Engine | - | |||||
Minimal example | ✔️ Link | ✔️ Link | ✔️ Link | ✔️ Link | ✔️ Link | - |
Environment variables | ✔️ | ✔️ | ✔️ | 🚧 | ✔️ | - |
Import modules from URL | ✔️ | ✔️ | ✖ | ✖ | ✖ | ✖ |
Pausable and routable data flow | ✔️ | ✔️ | 🧪 | 🚧 | 🧪 | - |
Remote control | 🧪 | 🧪 | ✖ | - | 🧪 | - |
Code generation | 🧪 | 🧪 | 🚧 | 🚧 | 🧪 | 🚧 |
🚧 = Under development (In the current working plan)
🧪 = Experimental/Alpha stage (Being tested and may have rapid changes)
✖ = Not supported (Either it can't be implemented or it has better solution)
❔ = Should we add the feature? (Please start a discussion if you need it)
- = Haven't been decided
With remote control you can easily manage connection to the target environment (Node.js/Python/etc) from the browser. Please always run your app inside of isolated container (like Docker) if you allow someone to remote control your system.
Example case where you may need remote control:
blackprint.config.js
importCurrently the main focus is Blackprint for JavaScript. Blackprint Engine for PHP, Python, Golang, etc may follow the implementation of JavaScript version.
Blackprint Engine:
Each engine may have different compatibilities.
For the example:
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.
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 .
# You can also use npm or yarn instead of pnpm
$ pnpm i
$ npm start
>> [Browsersync] Access URLs:
>> -----------------------------------
>> Local: http://localhost:6789
>> -----------------------------------
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 .
# You can also use npm or yarn instead of pnpm
$ pnpm i
$ npm run compile
$ npm test
Breaking changes may happen every increment of v0.x.0
, while v0.0.x
usually will have new feature or bug fixes.
After version v1.0.0 any feature addition may have long delay before actually being merged.
Feel free to request a feature or give a feedback at this moment.
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.