Flow Studio
JSON Tree Navigation
Input data, output data, and pinned data are displayed as interactive JSON trees — not raw JSON text. Nodes expand and collapse, values are syntax-highlighted by type, and nested paths are copyable.
JSON Tree Visual Example
"customerData": {
"id": 42,
"name": "Acme Corp",
"tier": "gold",
"active": true,
"contacts": [ 3 items ]
}
Syntax Highlighting
| JSON Type | Colour |
|---|---|
| Keys | Blue (#60a5fa) |
| String values | Green (#34d399) |
| Number values | Amber (#fbbf24) |
| Boolean values | Purple (#a78bfa) |
| null | Grey (#718096) |
| Collapsed arrays/objects | Summary count in grey |
Interaction
- Click / — expand or collapse any object or array
- Expand All / Collapse All buttons at the top of each section
- Click a leaf value — copies the value to the clipboard
- Click a key — copies the JSON path (e.g.,
customerData.contacts[0].email) to the clipboard, ready to paste into an expression field as$output.{nodeId}.customerData.contacts[0].email
Large Data Objects
Objects with more than 100 keys at the top level are collapsed by default. Arrays with more than 50 elements show the first 50 with a "Load 50 more" button to avoid UI slowdown.