Implementation:FlowiseAI Flowise JsonViewer

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

Overview

The JSONViewer component renders a read-only, syntax-highlighted view of JSON data with color-coded tokens for keys, strings, numbers, booleans, and null values.

Description

JSONViewer takes a JavaScript object as its data prop, serializes it to a formatted JSON string with JSON.stringify, and then tokenizes it using a regex-based parser (parseJsonToElements) that applies color styles via a helper JsonToken component. The color scheme adapts automatically based on the dark/light mode setting from the Redux customization store. The rendered output is wrapped in a scrollable Box with a configurable maxHeight prop.

Usage

Use this component to display JSON data in a read-only, visually appealing format within dialogs, panels, or detail views where users need to inspect structured data without editing it.

Code Reference

Source Location

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

Signature

export const JSONViewer = ({ data, maxHeight = '400px' }) => {
    // ...
}

Import

import { JSONViewer } from '@/ui-component/json/JsonViewer'

I/O Contract

Inputs

Name	Type	Required	Description
data	object	Yes	The JavaScript object to display as formatted, syntax-highlighted JSON
maxHeight	string	No	Maximum height of the viewer container with scroll overflow (defaults to '400px')

Outputs

Name	Type	Description
Rendered JSX	React element	A scrollable box containing syntax-highlighted, formatted JSON text

Usage Examples

Basic Usage

<JSONViewer
    data={{
        model: "gpt-4",
        temperature: 0.7,
        messages: [
            { role: "system", content: "You are helpful." }
        ]
    }}
    maxHeight="300px"
/>

Related Pages

• Principle:FlowiseAI_Flowise_Data_Visualization