Network View

Overview

The Network View is the primary workspace in NodeFox — an infinite canvas where you design workflows by placing nodes and drawing routes between them. Each network appears as its own canvas tab.

Live NodeFox product capture from the live NodeFox application: node palette on the left, graph canvas on the right, and deterministic run controls in the top bar.

Live NodeFox product capture from the live NodeFox application showing the deeper authoring workspace beneath the initial network canvas view.

Canvas basics

Adding nodes

Drag nodes from the Generics tab in the left sidebar onto the canvas. Click to place, or drag to position precisely. You can also use the node search: press / to open it, type a node type name, and press Enter to place.

Selecting and moving nodes

Click a node to select it. Drag to move. ⌘+A selects all nodes. Hold Shift and click to multi-select. Selected nodes can be moved, copied, cut, and deleted.

Opening sub-networks from the canvas

If a node is a Network node, hold Option and click the node to open and inspect its child network directly.

Use this when reviewing parent/child contracts, debugging sub-network behavior, or jumping into reusable modules without manually searching the Networks list.

Connecting nodes

Hover over a node to reveal its slot handles on the left (inputs) and right (outputs).

Press a number key while hovering a node to start a route from that output slot, then click the target node to complete it.

Running a network

Press ⌘+Enter or click Run in the toolbar to execute. NodeFox applies deterministic runtime rules until no more nodes are eligible to run.

Press ⌘+Escape or click Stop to halt execution at any point.

Debugging

Logs panel

Press ⌘+3 or click the Logs tab to see real-time execution logs. Each node reports when it starts, what data it processes, and what it outputs.

Set log depth to control verbosity:

You can set log depth per-node for targeted debugging — increase verbosity on the node you're investigating while keeping the rest quiet.

When teams operate larger workflows, the practical debugging pattern is to isolate one branch, raise verbosity only for that branch’s nodes, and compare emitted slot values between expected and actual paths. This keeps diagnosis fast without flooding the log stream.

Inspecting node state

Click any node during or after execution to see its current state in the settings panel. The output field shows what the node last produced.

Chat panel

Press ⌘+K to open the chat panel. Decision (Options) nodes present their choices here. Code nodes can send messages via nodefox.chat(). UI artifacts render here.

Analytics

Press ⌘+I or go to View > Analytics to see token usage, cost breakdown by model, and execution history.

Keyboard shortcuts

File operations

Edit operations

Run operations

View & navigation

Sidebar tabs (chord: ⌘+G then letter)

Settings panel navigation

Script Console

Open via View > Script Console to programmatically create, edit, and delete workspace assets using the JavaScript DSL. Build entire networks from code, perform bulk modifications, or generate repetitive structures. See Advanced Features for full documentation.