Implementation:FlowiseAI Flowise JsonViewer
| Knowledge Sources | |
|---|---|
| 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"
/>