Node Graph Panel

The Node Graph panel is where you build visual scripts by connecting nodes together. Instead of writing code, you create logic by placing nodes on a canvas and drawing connections between them. Each node performs a specific action, and connections define how data and execution flow through your graph.

---

Understanding the Node Graph

What is a Node Graph?

A node graph is a visual script. Rather than typing lines of code, you:

1. Place nodes on a canvas (each node does something specific)
2. Connect nodes with wires (connections define flow)
3. Run the graph to execute your logic

When you receive a Twitch donation, play a sound effect, animate a 3D model, or spawn confetti, those actions are defined by nodes connected together in a graph.

Key Terminology

Term	Description
Node	A single unit that performs one action or operation
Port	Connection points on nodes (inputs on left, outputs on right)
Wire	A connection line between two ports
Process	A running execution of a node graph
Trigger	A special port that controls execution flow (white arrows)

---

Opening and Managing Graphs

Creating a New Graph

1. Go to File > New Graph or press Ctrl + N
2. Name your graph (use descriptive names like “Donation_Alert” or “Confetti_Burst”)
3. The new graph opens in a tab

Opening Existing Graphs

Graphs automatically open when OverMox connects to a project. You can also:

• Use File > Open Graph to browse for .ovgraph files
• Double-click a graph file in your project folder

Working with Multiple Graphs

Each graph opens in its own tab. Click tabs to switch between graphs. Changes are saved automatically.

---

Navigating the Canvas

Panning (Moving the View)

Method	How
Middle mouse drag	Click and drag with middle mouse button
Right mouse drag	Click and drag with right mouse button
Arrow keys	Nudge the view in any direction

Zooming

Method	How
Scroll wheel	Scroll up to zoom in, down to zoom out
Zoom to fit	Press Home to fit all nodes in view

Quick Navigation

Press Home to instantly zoom and center the view to show all nodes in your graph. Great for getting your bearings in a large graph.

---

Creating Nodes

Using the Right-Click Menu

1. Right-click anywhere on the canvas
2. Browse categories or type to search
3. Click a node to place it at your cursor

Searching for Nodes

The search bar in the right-click menu lets you find nodes by name:

• Type “delay” to find the Delay node
• Type “animation” to see all animation-related nodes
• Type “twitch” to find Twitch integration nodes

Node Categories

Nodes are organized into categories based on what they do:

Category	Purpose	Examples
Triggers	Start your graph running	Button Trigger, Stream Events
Flow	Control execution order and timing	Delay, Conditional, For Loop
Animations	Play and control animations	Play Animation, Stop Animation
Audio	Sound playback and control	Play Audio, Stop Audio
Scene Objects	Manipulate objects in your scene	Spawner, Tween, Set Transform
Variables	Store and retrieve data	Get Variable, Set Variable
Math	Calculations and comparisons	Add, Multiply, Comparison
Web	External service integration	Twitch Events, HTTP Request
Text	String manipulation	Text Formatter, Text Parser
Components	Modify object behaviors	Set Property, Add Component

See the Nodes Reference for complete documentation of all available nodes.

---

Connecting Nodes

Understanding Ports

Nodes have ports for connections:

• Input ports appear on the left side of a node
• Output ports appear on the right side of a node
• Trigger ports (white arrows) control execution flow
• Data ports (colored circles) pass values like numbers, text, or colors

Drawing Connections

1. Click and hold on an output port
2. Drag to an input port on another node
3. Release to create the connection

A wire appears showing the connection. Data flows from output to input, left to right.

Port Compatibility

Not all ports can connect:

• Trigger to Trigger - Execution flow connections
• Data type matching - Numbers connect to numbers, text to text, etc.
• Some ports auto-convert - A number port might accept an integer or float

When dragging a connection, compatible ports highlight to show valid targets.

Disconnecting Wires

Right-click on a wire to delete it, or:

1. Click on the input port end of a wire
2. Drag it away and release on empty canvas

---

Working with Nodes

Selecting Nodes

Action	How
Select one node	Click on it
Add to selection	Ctrl + Click
Box select	Click and drag on empty canvas
Select all	Ctrl + A

Selected nodes show a highlight border.

Moving Nodes

• Click and drag selected nodes to move them
• Hold Shift while dragging for axis-locked movement
• Multiple selected nodes move together

Deleting Nodes

Method	Shortcut
Press Delete key	Delete
Right-click > Delete	-

Deleting a node also removes all its connections.

Copy and Paste

Action	Shortcut
Copy	Ctrl + C
Paste	Ctrl + V
Duplicate	Ctrl + D

Pasted nodes appear near the original with connections preserved between copied nodes.

Duplicate for Variations

Use Ctrl + D to quickly duplicate a node setup, then modify the copy. Great for creating variations of effects with slightly different timing or values.

---

Execution and Processes

How Graphs Run

A graph runs when a trigger node fires:

1. A trigger node activates (button press, stream event, timer, etc.)
2. Execution flows through connected trigger ports
3. Each node performs its action in sequence
4. The Process continues until it reaches an endpoint

Running a Graph Manually

Click the Play button or press F5 to run the graph. This triggers any Button Trigger nodes in your graph.

Understanding Processes

A Process is a single running instance of your graph:

• Multiple processes can run simultaneously
• Each process tracks its own state
• Use Process Management nodes to control running processes

See Process Management Nodes for details on managing concurrent processes.

Stopping Execution

Click the Stop button or press Shift + F5 to stop all running processes in the current graph.

---

Organizing Your Graphs

Using Note Nodes

Add notes to explain complex sections:

1. Right-click > Misc > Note
2. Click the note to edit its text
3. Use notes to document what sections of your graph do

Grouping Related Nodes

Keep your graphs readable by:

• Placing related nodes close together
• Using consistent left-to-right flow
• Leaving space between logical sections
• Adding notes for complex sections

Naming Conventions

Use clear names for your graphs:

• Donation_Alert_v2 - Purpose and version
• Follower_Confetti_Burst - Action description
• Camera_Shake_On_Sub - Trigger and effect

---

Real-Time Visualization

Execution Highlighting

When a graph runs, you see execution in real-time:

• Active nodes show a highlight or glow
• Data values update on ports
• Wires may animate to show data flow

This helps you debug and understand how your graph executes.

Port Value Preview

Hover over connected ports to see current values. This shows what data is flowing through your graph during execution.

---

Tips for Effective Graphs

Start Simple

Begin with the simplest version of your effect. Add complexity incrementally. A working simple graph is better than a complex broken one.

Use Delays Wisely

The Delay node is your friend for creating sequences. Chain multiple delays to space out actions: play sound, wait 1 second, spawn particles, wait 2 seconds, reset.

Test Frequently

Run your graph often while building. It is easier to find problems when you have only added a few nodes since the last test.

Save Working Versions

Before making big changes, duplicate your graph or create a backup. This lets you experiment without risk.

---

Keyboard Shortcuts

Action	Shortcut
New graph	Ctrl + N
Save	Ctrl + S
Undo	Ctrl + Z
Redo	Ctrl + Y
Copy	Ctrl + C
Paste	Ctrl + V
Duplicate	Ctrl + D
Delete	Delete
Select all	Ctrl + A
Run graph	F5
Stop graph	Shift + F5
Zoom to fit	Home

---

Common Streaming Examples

Donation Alert Sequence

1. StreamElements Event Receiver triggers on donation
2. Play Animation shows the alert graphic
3. Delay waits 3 seconds
4. Play Animation fades out the alert

Follower Celebration

1. Twitch Follower Event triggers on new follow
2. Spawner creates confetti particles
3. Play Audio plays celebration sound
4. Delay waits 5 seconds
5. Particles Clear removes confetti

Interactive Chat Command

1. Twitch Chat Receiver listens for “!dance”
2. Cooldown prevents spam (10 second cooldown)
3. Play Animation triggers dance on your avatar
4. Delay waits for animation length
5. Reset Animation returns to idle

---

Related

• Nodes Reference - Complete documentation for all node types
• Variables Nodes - Storing and using data
• Flow Nodes - Controlling execution flow
• Process Management - Managing running graphs