Node Editor

The Node Editor, introduced in Bricksforge 3.0, empowers you to create dynamic, interactive actions visually without writing a single line of code. Imagine building functionality like connecting puzzle pieces—each node represents a specific task or decision, and linking them together creates logic flows. It replaces the previous “Events” panel (now labeled as “Legacy”) with an intuitive drag-and-drop interface for crafting complex interactions effortlessly.

Node Editor

What is a Node-Based System?

A node-based system is like a visual flowchart. Each node represents an action, decision, or input/output, and the connections between them define the flow of logic. By connecting nodes, you can create sophisticated workflows in an intuitive and accessible way.

For example, you might start with an event like “When a button is clicked,” and then link it to actions such as “Change the background color” or “Display a message.” This approach is user-friendly and ideal for those who prefer visual over textual programming.

Video Introduction

Key Node Types

The Node Editor uses different colored nodes to help you quickly identify their purpose:

Event Nodes (Yellow)

Event Node

Event Nodes are like triggers - they’re always the starting point of any sequence. Think of them as “When this happens…” statements. Common examples include:

  • When someone clicks something
  • When someone hovers over an element
  • When a page finishes loading
  • When a form gets submitted
  • When a custom event occurs (for advanced users)

Every sequence of nodes MUST start with an Event Node - it’s like the “Start” button that sets everything in motion.

Action Nodes (Gray)

Action Node

Action Nodes are the “do something” blocks. They represent actual tasks you want to perform, such as:

  • Changing how something looks (color, size, visibility)
  • Showing or hiding elements on the page
  • Starting or stopping videos/audio
  • Changing text content
  • Making requests to get or send data
  • Storing information in variables (like temporary storage)

You can connect multiple Action Nodes one after another to create a sequence of actions that happen in order.

Condition Nodes (Gray with red Output Pin)

Condition Node

Condition Nodes are your “if/then” decision makers. They check if something is true or false and help you create different paths based on the answer. They can check things like:

  • Is an element visible on the page?
  • Does the URL contain certain parameters?
  • What is the current value of a variable?
  • Is a custom condition met?

For example, you could check “Is the user logged in?” and show different content based on the answer.

Working with Pins

Nodes connect to each other using special connection points called pins. Think of them like puzzle pieces that need to match to fit together. There are different types of pins:s

Execution Pins (Triangle Shaped)

Execution Pin

Execution pins are used to control the flow of your sequence. They are always located on the left (input) and right (output) sides of nodes. Here are some key points about execution pins:

  • Located on the left (input) and right (output) sides of nodes
  • Show which way the actions flow (always left to right)
  • Can only have ONE connection - like a single chain of events
  • Control WHEN things happen

Input Pins (Small Circles on Left)

Input Pin

Input pins are used to accept information that the node needs to work. They are located on the left side of the node.

  • Different colors mean different types of information:
    • Green: Text (words, sentences)
    • Blue: Numbers (1, 2, 3.14, etc.)
    • Red: True/False (yes/no values)

Output Pins (Small Circles on Right)

Output Pin

Output pins are used to send information to other nodes. They are located on the right side of the node.

  • Send information to other nodes
  • Use the same color system as input pins
  • Must connect to matching colored inputs
  • Like passing notes with specific types of information

Data Type Compatibility

Just like puzzle pieces, not all pins can connect to each other. When you try to connect pins, you’ll see either:

  • Green highlight: “Yes, these can connect!”
  • Red highlight: “No, these don’t match!”

This helps prevent mistakes and ensures your logic will work correctly. Always check the data type of the pins before connecting them.

Special Helper Nodes

The Node Editor includes some extra-helpful nodes for more advanced features:

Branch Node

The Branch Node is used to create multiple paths in your sequence. It splits the flow into two separate branches, allowing you to handle different scenarios. This Node expects a boolean value as input. This can be passed with a “Condition” Node. If the value is true, the flow will continue down the “True” branch. If the value is false, the flow will continue down the “False” branch.

Condition Group

The Condition Group Node is used to check multiple conditions at once. It combines multiple conditions using AND or OR logic. For very complex conditions, you can even use Condition Groups inside Condition Groups.

Delay Node

The Delay Node is used to add a pause or delay in your sequence. It waits for a specified amount of time before continuing.

Tips

Here are some tips to help you get started with the Node Editor.

  • Start with simple connections and test them before adding more
  • Give your variables clear, descriptive names (like “isVideoPlaying” instead of “var1”)
  • Keep related nodes close together visually - it helps you understand the flow

Take time to experiment and explore the Node Editor. With practice, you’ll find yourself crafting intricate, interactive experiences with ease.