graph editor

The graph editor is the primary interface to the [audio-graph] that forms the backbone of web-synth. It renders a direct view of the graph showing all nodes, their inputs and outputs, and the connections between them. It allows users to connect, disconnect, create, and delete nodes at will.

The graph editor is also used to set up [modulation] of parameters.

Under the hood, the graph editor serves as the UI interface to the [patch-network], which is the internal code structure which manages the audio graph nodes and their connections.

usage

Left-clicking nodes will open its small view on the right side of the screen, showing controls and visualizations for manipulating or monitoring it.

For nodes that are [view-context]s (meaning they correspond to one of the tabs at the top of the screen), they can be double-clicked to switch to the tab for that VC.

To add new nodes to the graph editor, double-click the background of the graph. This will open a menu that shows the full list of nodes that can be added:

small view

When a node is selected, a minimal UI for controlling it is rendered on the right side of the graph editor. This UI region is referred to as the [small-view].

Not all nodes have a small view and are configured by clicking on their applicable tab on the top of the application. However, for other simpler nodes like the [scale-and-shift] node, they only have a small view and the only way of interacting with them is through the graph editor.

port types

Each node can have any number of different input/output ports which can be connected to other nodes. Each of these ports can be one of three different types:

• audio (also referred to as customAudio)
• data (also referred to as cv or number)
• midi

Ports of a given type can only be connected to other ports of the same type (with a few exceptions). If you ever have a need to force a connection between ports with types of audio and data, you can use the Type Converter node to explicitly force the conversion.

subgraphs

The graph editor has support for organizing nodes into [subgraph]s. Nodes and modules in other subgraphs will not be visible in the current view, but they will still be active and can be interacted with by connecting to the purple subgraph node created in the graph editor.