Implementation:FlowiseAI Flowise NodeOutputHandler

Knowledge Sources	FlowiseAI Flowise
Domains	Canvas, ReactFlow
Last Updated	2026-02-12 07:00 GMT

Overview

NodeOutputHandler is a React component that renders output connection handles on the right side of canvas nodes, supporting single outputs, multiple anchor outputs, conditional (if/else) branching outputs, and dropdown-selectable output types.

Description

This component manages the visual representation and positioning of React Flow source handles for node outputs. It uses useUpdateNodeInternals to keep handle positions synchronized with the DOM layout. The component handles four distinct rendering modes: (1) a single output anchor when the type is not 'options', (2) multiple anchor outputs displayed as a vertical list for nodes with anchor-flagged options, (3) a special if/else layout for ifElseFunction nodes that renders "True" and "False" output handles at fixed offsets, and (4) a dropdown-based output selector for nodes with non-anchor options. Each handle includes a CustomWidthTooltip showing the output type and validates connections via isValidConnection.

Usage

Use this component within canvas node rendering to display output handles. It is placed at the bottom of node configuration panels and is responsible for the entire output side of node-to-node connectivity on the canvas.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/views/canvas/NodeOutputHandler.jsx
• Lines: 1-233

Signature

const NodeOutputHandler = ({ outputAnchor, data, disabled = false }) => { ... }

export default NodeOutputHandler

Import

import NodeOutputHandler from '@/views/canvas/NodeOutputHandler'

I/O Contract

Inputs

Name	Type	Required	Description
outputAnchor	object	Yes	The output anchor definition containing id, type, label, name, options, and default properties
data	object	Yes	The node data object containing id, name, selected, and outputs properties
disabled	boolean	No	Whether the output dropdown is disabled (defaults to false)

Outputs

Name	Type	Description
Rendered JSX	React Element	React Flow Handle elements positioned on the right side of the node, with tooltips and optional Dropdown selector
Side effects	void	Updates data.outputs[outputAnchor.name] when a dropdown selection changes, and triggers updateNodeInternals

Usage Examples

Basic Usage

import NodeOutputHandler from '@/views/canvas/NodeOutputHandler'

<NodeOutputHandler
  outputAnchor={{
    id: 'output_0',
    type: 'string',
    label: 'Output',
    name: 'output'
  }}
  data={nodeData}
  disabled={false}
/>

Related Pages

• Principle:FlowiseAI_Flowise_Node_Parameter_Configuration