A general-purpose visual programming interface designed to reduce the learning curve of programming languages and provide an intuitive way to experiment with your projects for other developers.

Blackprint Sketch is built using ScarletsFrame (performance and features).
Blackprint Engine is distributed separately for different runtime environments.
Blackprint Editor is available as an online IDE for web browsers.

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

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

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

• JSBin (CDN)
• StackBlitz (with Vite)

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

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.

1. Build Telegram bot with Blackprint

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.

Name	JavaScript		PHP	Golang	Python	Lua	C#
	Browser	Node.js
Blackprint Engine							-
Minimal example	✔️ Link	✔️ 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

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

• 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 projects
  • Select and move multiple nodes at once
    • Bulk delete
    • Add feature to put nodes into a group
  • Clicked nodes should be moved to front of other nodes (z-index)
  • Automatically place cables on suitable ports when dropped on nodes
  • Cable arrangement feature (cable branching)
  • Variable nodes
  • Hide unused ports on nodes
  • Import node skeleton feature (use default node, no execution)
  • VS Code addons for previewing exported Blackprint
    • JSON preview for Visual Studio Code
  • TypeScript definition file

• Blackprint Editor (repository)

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

• Auto blackprint.config.js import

• Enhanced documentation

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

• Blackprint Nodes Package Manager

  • NPM registry support for Node.js/Deno/Browser

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

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)

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.

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

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

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

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

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

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!