JSON Viewer for Confluence - User Guide

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

1. Edit a Confluence page

2. Type /json in the editor

3. Select JSON Viewer from the macro list

Open

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

Open

Step 3: Enter JSON and Preview

Open

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)

Open

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)

Open

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

Open

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)

Best Practices

For Small JSON (< 100 nodes)

• ✅ Enable "Expand by default" for immediate visibility

• ✅ Use in API documentation pages

• ✅ Perfect for configuration examples

For Large JSON (> 100 nodes)

• ✅ Disable "Expand by default" for better performance

• ✅ Users can expand sections as needed

• ✅ Ideal for sample API responses or logs

Tips

• Format your JSON: Use proper indentation before pasting (the editor preserves formatting)

• Validate first: Use a JSON validator if unsure about syntax

• Update anytime: Click the macro and select "Edit" to modify the data

Troubleshooting

"JSON Parse Error" Message

Cause: Invalid JSON syntax
Solution:

• Check for missing commas, quotes, or brackets

• Validate JSON at jsonlint.com

• Common issues: trailing commas, unquoted keys, single quotes instead of double quotes

Preview Not Updating

Cause: Browser cache or unsaved changes
Solution:

• Click Save in the configuration dialog

• Refresh the Confluence page

• Clear browser cache if issue persists

Page Loads Slowly with Large JSON

Cause: Thousands of nodes expanded simultaneously
Solution:

• Uncheck "Expand by default" in configuration

• Consider splitting very large JSON into multiple macros

• Use Collapse All button after page loads