Implementation:FlowiseAI Flowise ArrayRenderer

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

Overview

ArrayRenderer is a React component that renders a dynamic, editable list of structured input items within Flowise node configuration panels, supporting add, delete, and per-field change operations.

Description

ArrayRenderer manages an array of input items where each item is a set of key-value pairs defined by inputParam.array field definitions. It supports dynamic show/hide rules for fields within each item (via showHideInputs), delegates rendering to either NodeInputHandler (for canvas nodes) or DocStoreInputHandler (for document store nodes), and maintains synchronized output anchors on condition agentflow nodes when items are added or deleted. The component deep-clones data to avoid direct state mutation and recalculates display parameters on every field change.

Usage

Use ArrayRenderer inside node configuration panels when a node parameter has an array type definition. Pass the inputParam (with its array field definitions), the node data object, and optionally disabled and isDocStore flags.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/ui-component/array/ArrayRenderer.jsx
• Lines: 1-282

Signature

export const ArrayRenderer = ({ inputParam, data, disabled, isDocStore = false }) => { ... }

Import

import { ArrayRenderer } from '@/ui-component/array/ArrayRenderer'

I/O Contract

Inputs

Name	Type	Required	Description
inputParam	object	Yes	Parameter definition containing name, label, and array (field definitions with name, type, default, show/hide rules)
data	object	Yes	Node data object with inputs and node metadata (id, name, outputAnchors)
disabled	bool	No	When true, all input fields are rendered as read-only
isDocStore	bool	No	When true, renders DocStoreInputHandler instead of NodeInputHandler (defaults to false)

Outputs

Name	Type	Description
(rendered JSX)	React element	A list of bordered item boxes, each containing rendered input fields, delete buttons, index chips, and an "Add" button at the bottom

Usage Examples

Basic Usage

import { ArrayRenderer } from '@/ui-component/array/ArrayRenderer'

const inputParam = {
    name: 'conditions',
    label: 'Condition',
    array: [
        { name: 'variable', type: 'string', label: 'Variable', default: '' },
        { name: 'operation', type: 'options', label: 'Operation', default: 'equals' }
    ]
}

<ArrayRenderer
    inputParam={inputParam}
    data={nodeData}
    disabled={false}
    isDocStore={false}
/>

Related Pages

• Principle:FlowiseAI_Flowise_Dynamic_Form_Input