Awesome

Blocks is an online visual smart contract builder for the Internet Computer.

Homepage / Web Application / Twitter / Discord

Inspired by low-code editors such as Blender Nodes and Unreal Engine Blueprint, the Blocks Editor makes it possible to build Motoko smart contracts using a simple drag-and-drop interface.

Getting Started

Here are a few tips for learning the Blocks user interface:

• Complete the interactive tutorials to learn the basic editor workflow.
• Browse a variety of examples and templates available in the application.
• Select a block and press 'Q' on your keyboard to view the corresponding Quick Reference information.
• Try hovering your mouse over a block name, connection socket, or input field to view a tooltip with more context.
• Open the 'Compile' panel and press 'Build & Run' to compile, deploy and test your code on the Internet Computer.
• If you're running into an issue or have any questions, feel free to ask our Discord community!

Combine visual logic with Motoko language syntax using custom Expression blocks.

Advanced Usage

• Customize the editor and view keyboard shortcuts for common block types in the Options menu.
• Hold 'Ctrl' or 'Cmd' when opening the right-click placement menu to view and search all blocks available in the editor.
• Quickly remove connections by holding the 'Ctrl' or 'Cmd' key and clicking on a connection socket.
• Add a GitHub library using a Package block, import a file using an Import block, and call a library function using an expression block such as { Expression } or { Statement }.
• Convert a standard Motoko file to a Blocks smart contract using the { Import } and { Member } block (view the DIP721 NFT template for an example).
• Add test cases to ensure your smart contract works as intended.

Embedded Mode

Customize the Blocks Editor for your React application using the react-blocks-editor npm package.

Contributions

PRs are welcome! If you are looking for ideas on how to contribute, please check out the currently open issues and feel free to request clarification about anything that catches your interest.

Local Environment

git clone https://github.com/Blocks-Editor/blocks
cd blocks
npm install

Serve (http://localhost:3000):

npm start

Test:

npm test

Build:

npm run build

Support the Project

Blocks is a 100% open-source IC community project. Please donate to help keep the application running.

• ICP: 184d1794cba6d6384e8487c702436eee7614aeb17cbfc94fcfa328b3f7bf7f75
• ETH: 0xE977fa3a79fC45eB7c2C628d7D7De65483Cd0751
• BTC: 3QpW3YxLBEvBpNn8PP53kvHXRktvKafu4w

This project was made possible via the DFINITY Developer Grant Program.