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

Browser Requirements

For optimal rendering performance, please use a Chromium-based browser.

Customization

The default node UI design is inspired by UE4 Blueprint and can be customized using HTML/CSS. In the Blackprint Editor, you can select different themes from the settings. For creating your own theme, refer to the theme code.

Documentation

Documentation is available within the editor. If you'd like to contribute or make modifications, you can fork the editor and edit files in the documentation directory. Blackprint Engine and Sketch include TypeScript definition files, providing code suggestions in TypeScript-compatible editors like Visual Studio Code.

Getting Started

Quick Examples

To get started with integrating Blackprint into your project, check out these minimal sketch examples:

• JSBin (CDN)
• StackBlitz (with Vite)

Framework Integration Examples

If you want to see how Blackprint works with different frontend frameworks, here are some simple examples:

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

Using the Engine

If you just want to execute exported Blackprint JSON files, you can use the Blackprint Engine directly. For non-browser engines, examples are available in their respective repositories. You can copy and paste JSON into the Blackprint Editor to visualize the node arrangement. The examples above use this sample arrangement.

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 may changed in the future. Feel free to request features or report issues.

Important Note: Each Blackprint node must be rewritten and reimplemented for each programming language. While basic nodes may be available across all languages, some language-specific nodes may not be available to different language.

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

Remote Control

Blackprint's remote control feature allows you to easily manage connections to target environments (Node.js, Python, etc.) directly from your browser. For security reasons, please always run your application within an isolated container (like Docker) when allowing remote control access.

Example case where you may need remote control:

• Discord.js Bots: Create Discord bots (some library may not work in the browser if the endpoint has CORS)
• Collaboration: Work together with team members in real-time
• Remote Development: Modify and debug your running applications during runtime

Development Status

• [ ] 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 projects
  • [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 to front of other nodes (z-index)
  • [x] Automatically place cables on suitable ports when dropped on nodes
  • [x] Cable arrangement feature (cable branching)
  • [x] Variable nodes
  • [x] Hide unused ports on nodes
  • [x] Import node skeleton feature (use default node, no execution)
  • [ ] VS Code addons for previewing exported Blackprint
    • [ ] JSON preview for Visual Studio Code
  • [x] TypeScript definition file

• [ ] Blackprint Editor (repository)

  • [x] Online editor
  • [x] Basic nodes editor
  • [x] Detachable window and minimap
  • [x] Environment Variables editor
  • [x] Import sketch from URL
  • [ ] Move current sketch with minimap
  • [x] Node list editor (right-click and side panel)
  • [x] Error/log popup or overlay
  • [x] Show overview/notice when importing nodes from URL
  • [x] Multiple sketch workspaces or tabs

• [x] Auto blackprint.config.js import

• [x] Enhanced documentation

  • [x] In-editor node documentation tooltips
  • [x] Node documentation generator
  • [x] TypeScript definition file

• [x] Blackprint Nodes Package Manager

  • [x] NPM registry support for Node.js/Deno/Browser

Current Focus

The primary development focus is on Blackprint for JavaScript. Support for other languages (PHP, Python, Golang, etc.) will follow the JavaScript implementation roadmap.

Future Language Support

Potential plans for additional Blackprint Engine implementations:

• Java (or Kotlin for Android development)
• Rust (for IO and high performance application)
• Zig (for Arduino)
• C++ (for Arduino)

Architecture

Blackprint engine serves as an execution layer for each nodes written in each language. To use it with Node.js, Deno, or other JavaScript runtimes, you can export your visual programs to JSON and use the engine-js.

Important: Only exporting to JSON is not a complete solution by itself if the target language doesn't have the required nodes. You'll need to write registerNode and registerInterface functions for the nodes in your target engine if it's not exist. However, if someone has already created Blackprint modules (nodes and interfaces) for your target engine, you can easily plug and play those modules.

Contributing

For getting started, please start from the Contributing Guide before creating issues or pull request.

Development Setup

To compile and start the editor's web server locally:

$ 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
 >> -----------------------------------

Running Tests

To run the unit tests:

$ 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

Version Stability

• Breaking changes may occur with each v0.x.0 increment
• v0.0.x versions typically include new features and bug fixes
• After v1.0.0, new feature additions may experience longer delays before being merged

We welcome any feature requests and feedback at this stage of development.

License

Blackprint is an MIT-licensed open source project, completely free to use.

Support the Project

Please consider sponsoring the developers who contribute significant effort to maintaining and enhancing this project. Without their contributions, development may slow down or potentially pause.

Your support helps ensure the continued growth and active improvement for Blackprint!