UI Text

Alignment controls how the text is anchored relative to its X/Y position point.

Horizontal Alignment (H Align)

• 0 — Left: The left edge of the text is placed at the X position. Text extends to the right.
• 1 — Center: The text is centered horizontally on the X position. This is the default.
• 2 — Right: The right edge of the text is placed at the X position. Text extends to the left.

Vertical Alignment (V Align)

• 0 — Top: The top edge of the text is placed at the Y position. Text extends downward.
• 1 — Middle: The text is centered vertically on the Y position. This is the default.
• 2 — Bottom: The bottom edge of the text is placed at the Y position. Text extends upward.

Combining H Align and V Align lets you anchor the text to any of the nine standard reference points (top-left, top-center, top-right, middle-left, center, middle-right, bottom-left, bottom-center, bottom-right).

Display Only (default)

With both Interactive and Editable off, UI Text is a passive label. It displays text and reports its dimensions, but does not respond to any mouse interaction. The Hover, Click, and Editing outputs remain false.

Interactive Mode

Enable Interactive to make the text field respond to mouse events. The Hover output becomes true when the cursor is over the text, and Click outputs true on the frame when the user clicks it. This is useful for building clickable labels, buttons, or status indicators that trigger downstream logic.

Editable Mode

Enable both Interactive and Editable to allow the user to click the text in the output viewport and edit it directly. The cursor appears inside the text field, and every keystroke updates the Text output port in real time.

Editable mode has two requirements:

1. Interactive must be enabled. Editable has no effect without Interactive.
2. The Text input port must have no cable connected. When a cable is connected, the incoming data takes priority and editing is disabled, preventing conflicts between the data source and user input.

When the user finishes editing (clicks away or presses Enter/Tab), the final text is saved to the node's port value and persists with the project file.

• HUD Displays: Overlay frame rate counters, timers, connection status, or any real-time data on the output viewport using zero GPU resources.
• Debug Information: Display live node values, coordinates, or state variables during development. Connect any data source to the Text input and position the readout wherever it is convenient.
• User Input Forms: Create on-screen text fields where users can type custom values that feed into the graph. Combine with Math Expression or JSON Parse to process user input.
• Interactive Labels: Build clickable text elements that trigger actions elsewhere in the graph by connecting the Click output to downstream logic.
• Data Dashboards: Arrange multiple UI Text nodes with different alignments and sizes to create information-dense overlays without any GPU texture cost.
• Formatted Readouts: Use the Wrap Mode and Max Width settings to create multi-line text blocks with controlled layout, such as comma-separated sensor lists that auto-wrap at each delimiter.

• Performance: Because UI Text is a native AppKit overlay, it has no GPU texture memory cost and no impact on Metal rendering performance. Use it freely for informational overlays.
• Font selection: Open the Settings tab on the node to choose from all installed system fonts and font weights.
• Multiline text: Insert newline characters in the Text input to create multi-line displays. You can also use Max Width with Wrap Mode to auto-wrap long strings.
• Scaling behavior: The Size input is relative to the viewport height, so text maintains consistent proportions when the output window is resized.
• Connecting data sources: When a cable is connected to the Text input, the incoming value overrides the stored text and editing is automatically disabled. Disconnect the cable to re-enable editing.
• Measuring text: Use the Width and Height outputs to position other elements relative to the text. For example, connect Width to a Rectangle node to create a background that automatically matches the text size.
• Custom wrap delimiters: Set Wrap Mode to 2 (Custom) and Wrap Char to any character (such as | or ;) to control exactly where long strings break into new lines.
• UI Text vs. Text as Image: Use UI Text for informational overlays, debug readouts, and editable fields where native text rendering is preferred. Use Text as Image when you need the text rendered as a GPU texture for compositing with blend modes, masking, or shadow effects on the Canvas.