|
10 | 10 |
|
11 | 11 | 
|
12 | 12 |
|
| 13 | +> Inspired by low-code editors such as [Blender Nodes](https://docs.blender.org/manual/en/latest/compositing/introduction.html) and [Unreal Engine Blueprint](https://docs.unrealengine.com/4.27/en-US/ProgrammingAndScripting/Blueprints/), the Blocks Editor makes it possible to build [Motoko smart contracts](https://smartcontracts.org/docs/language-guide/motoko.html) using a simple drag-and-drop interface. |
| 14 | +
|
| 15 | +## Getting Started |
| 16 | + |
| 17 | +Here are a few tips for learning the Blocks user interface: |
| 18 | + |
| 19 | +- Complete the [interactive tutorials](https://blocks-editor.github.io/blocks/?menu=tutorials) to learn the basic editor workflow. |
| 20 | +- Browse a variety of [examples and templates](https://blocks-editor.github.io/blocks/?menu=load) available in the application. |
| 21 | +- Select a block and press 'Q' on your keyboard to view the corresponding [Quick Reference](https://blocks-editor.github.io/blocks/?menu=reference) information. |
| 22 | +- Try hovering your mouse over a block name, connection socket, or input field to view a tooltip with more context. |
| 23 | +- Open the 'Compile' panel and press 'Build & Run' to compile, deploy and test your code on the Internet Computer. |
| 24 | +- If you're running into an issue or have any questions, feel free to ask our [Discord community](https://discord.gg/jDDWtKwWQf)! |
| 25 | + |
13 | 26 | ---
|
14 | 27 |
|
| 28 | + |
| 29 | + |
| 30 | +> Combine visual logic with Motoko language syntax using custom Expression blocks. |
| 31 | +
|
| 32 | +## Advanced Usage |
| 33 | + |
| 34 | +- Customize the editor and view keyboard shortcuts for common block types in the [Options](https://blocks-editor.github.io/blocks/?menu=settings) menu. |
| 35 | +- Hold 'Ctrl' or 'Cmd' when opening the right-click placement menu to view and search all blocks available in the editor. |
| 36 | +- Quickly remove connections by holding the 'Ctrl' or 'Cmd' key and clicking on a connection socket. |
| 37 | +- 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 }`. |
| 38 | +- Convert a standard Motoko file to a Blocks smart contract using the `{ Import }` and `{ Member }` block (view the [DIP721 NFT template](https://blocks-editor.github.io/blocks/?menu=load) for an example). |
| 39 | +- Simulate an embedded environment using the `?embed=true` query parameter. |
| 40 | + |
15 | 41 | ## Embedded Mode
|
16 | 42 |
|
17 | 43 | Customize the Blocks Editor for your React application using the [react-blocks-editor](https://www.npmjs.com/package/react-blocks-editor) npm package.
|
|
0 commit comments