JSON Viewer for Confluence - User Guide

1 Overview
2 Key Features
3 Quick Start
- 3.1 Step 1: Insert the Macro
- 3.2 Step 2: Configure Your JSON Data
- 3.3 Step 3: Enter JSON and Preview
- 3.4 Step 4: Set Display Options
- 3.5 Step 5: Save and View
4 Using the Viewer
- 4.1 Statistics Bar
- 4.2 Navigation Controls
- 4.3 Interactive Tree
- 4.4 Context Menu

Overview

JSON Viewer is a powerful Confluence macro that transforms raw JSON data into interactive, visually rich tree structures. It helps teams visualize complex JSON data directly in Confluence pages with real-time statistics, expand/collapse controls, and an intuitive interface.

Key Features

✅ Interactive Tree View - Navigate nested JSON structures with expandable/collapsible nodes
✅ Real-time Statistics - View data metrics (nodes, depth, types) at a glance
✅ Live Preview - See changes instantly while editing
✅ Smart Controls - Quick expand/collapse all nodes
✅ Context Menu - Right-click to copy values

Quick Start

Step 1: Insert the Macro

Edit a Confluence page
Type /json in the editor
Select JSON Viewer from the macro list

Step 2: Configure Your JSON Data

The configuration dialog opens with two panels:

Left Panel: JSON Editor

Enter or paste your JSON data
Supports syntax highlighting
Line numbers for easy reference

Right Panel: Live Preview

Real-time visualization as you type
Shows tree structure immediately
Displays parsing errors if JSON is invalid

Step 3: Enter JSON and Preview

Step 4: Set Display Options

Expand by default (checkbox at bottom):

☑️ Checked: All nodes expand automatically when page loads
☐ Unchecked: All nodes collapse by default (users can expand manually)

Step 5: Save and View

Click Save to insert the macro into your page.

Using the Viewer

Statistics Bar

Located at the top of the viewer, displaying:

Nodes: Total number of JSON elements
Depth: Maximum nesting level
Objects: Count and average keys
Arrays: Count and average items
Types: Breakdown by data type (String, Number, Boolean, Null)

Navigation Controls

Expand All / Collapse All buttons (top-right):

Expand All: Opens all nested nodes to full depth
Collapse All: Collapses all nodes to minimal view

Interactive Tree

Click nodes to expand/collapse:

▶ icon indicates collapsed node (click to expand)
▼ icon indicates expanded node (click to collapse)
Light blue background highlights expanded nodes

Data Type Colors:

Red: Strings
Purple: Numbers
Green: Booleans
Gray: Null values

Context Menu

Right-click any node to:

Copy Value: Copy the node's value to clipboard (formatted for objects/arrays)