Implementation:FlowiseAI Flowise JsonEditor

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

Overview

The JsonEditorInput component provides an interactive JSON editor using flowise-react-json-view that supports inline editing, deletion, clipboard operations, and variable selection via a popover.

Description

JsonEditorInput renders a ReactJson viewer/editor that parses an initial JSON string value into an object. In disabled mode, it shows a read-only JSON view. In editable mode, it supports in-place editing and deletion of JSON keys and values, with changes serialized back to a JSON string via the onChange callback. When acceptVariable is enabled on the input parameter, clicking a JSON key opens a SelectVariable popover that allows inserting a variable reference (e.g., Template:NodeId.data.instance) as the value for that key. The component supports both light and dark themes via the isDarkMode prop and adapts for sequential agent workflows via the isSequentialAgent flag.

Usage

Use this component when a node parameter expects a JSON object value and the user needs a visual tree editor with support for variable interpolation into individual JSON fields.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/ui-component/json/JsonEditor.jsx
• Lines: 1-152

Signature

export const JsonEditorInput = ({
    value,
    onChange,
    inputParam,
    nodes,
    edges,
    nodeId,
    disabled = false,
    isDarkMode = false,
    isSequentialAgent = false
}) => {
    // ...
}

Import

import { JsonEditorInput } from '@/ui-component/json/JsonEditor'

I/O Contract

Inputs

Name	Type	Required	Description
value	string	No	JSON string to parse and display in the editor
onChange	func	Yes	Callback invoked with the updated JSON string when edits occur
inputParam	object	Yes	Configuration with acceptVariable flag and input id
nodes	array	No	Canvas nodes for variable resolution
edges	array	No	Canvas edges for connectivity traversal
nodeId	string	No	Current node ID
disabled	bool	No	When true, renders a read-only JSON view (defaults to false)
isDarkMode	bool	No	When true, applies the "ocean" theme (defaults to false)
isSequentialAgent	bool	No	When true, passes sequential agent context to SelectVariable (defaults to false)

Outputs

Name	Type	Description
Rendered JSX	React element	An interactive JSON tree editor with optional variable selection popover

Usage Examples

Basic Usage

<JsonEditorInput
    value='{"temperature": 0.7, "maxTokens": 1000}'
    onChange={(jsonString) => updateParam('config', jsonString)}
    inputParam={{ acceptVariable: true, id: 'config' }}
    nodes={canvasNodes}
    edges={canvasEdges}
    nodeId="node_config_1"
    isDarkMode={true}
/>

Related Pages

• Principle:FlowiseAI_Flowise_Node_Parameter_Configuration