https://user-images.githubusercontent.com/11073373/185776245-e883cadb-631e-497c-9fec-1de60098d4b1.mp4

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

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.

Example

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

• JSBin (CDN)
• StackBlitz (with Vite)

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

Video Example:

1. Build Telegram bot with Blackprint

https://github.com/Blackprint/Blackprint/assets/11073373/fe3d767b-e340-4371-8685-ef7a12709e0f

Available Shortcut for Blackprint Sketch

| Mouse + Keyboard | Touchscreen | Target | Description | | --- | --- | --- | --- | | LeftClick + move | 1 touch + move | Container | Select nodes and cablebranch | | Middle/Right click + move | 2 touch + move | Container | Move the container | | Ctrl + MouseWheelRightClick + 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 |

Available Shortcut for Blackprint Editor

| 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 elementinspector (dev mode) |

Blackprint Roadmap

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

🚧 = 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:

• 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 runtime

• [ ] Blackprint Sketch (this repository)
  • [x] Mirrored sketch on detachable window
  • [x] Mini sketch for preview
  • [x] Hot Reload
  • [x] Export single sketch to JSON
  • [x] Importable minimal sketch for different project
  • [x] Select and move multiple nodes at once
    • [x] Bulk delete
    • [x] Add feature to put nodes into a group
  • [x] Clicked nodes should be moved on front of the other nodes (z-index)
  • [x] Automatically put cable on suitable port when it's dropped on top of a node
  • [x] Add feature to arrange cable (cable branching)
  • [x] Add variable's node
  • [x] Add feature to hide some unused port on a node
  • [x] 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
  • [x] Add TypeScript definition file
• [ ] Blackprint Editor (repository)
  • [x] Online editor
  • [x] Basic nodes editor
  • [x] Detachable window and minimap
  • [x] Add Environment Variables editor
  • [x] Import sketch from URL
  • [ ] Move current sketch with minimap
  • [x] Node list editor (right click and from side panel)
  • [x] Error/log popup or overlay
  • [x] Show overview or notice when importing nodes from URL
  • [x] Multiple sketch workspaces or tabs
• [x] Auto blackprint.config.js import
• [x] Better documentation
  • [x] Add in-editor node documentation in a tooltip
  • [x] Nodes docs generator
  • [x] Add TypeScript definition file
• [ ] Blackprint Nodes Package Manager
  • [x] Use NPM registry for Node.js/Deno/Browser

Currently the main focus is Blackprint for JavaScript. Blackprint Engine for PHP, Python, Golang, etc may follow the implementation of JavaScript version.

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)
• Zig (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 .

# You can also use npm or yarn instead of pnpm
$ pnpm 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 .

# You can also use npm or yarn instead of pnpm
$ pnpm i
$ npm run compile
$ npm test

Stability

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.

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.