JSON Outline

json-outline.html is a lightweight, single-file JSON viewer focused on two core workflows:

• Visualizing JSON hierarchy
• Copying outline content and paths

For example, it can be used to quickly browse OpenClaw’s very large JSON LLM request files (typically with context sizes in the tens of kilobytes).

What It Does

This tool parses JSON input and renders it as a readable tree-style outline.

You can:

• Inspect nested objects and arrays by level
• Expand/collapse branches
• Copy one path from a node
• Copy all visible paths
• Copy the current outline as plain text

Core Features

1) JSON Hierarchy Display

• Real-time parsing while typing
• Clear type hints for object, array, string, number, boolean, and null
• Depth filter (1, 2, 3, 4, All) for fast structural inspection
• Node stats for quick structural overview

2) Outline Copy

• Copy Path: copy a single JSON path (dot notation)
• Copy Outline: copy the currently rendered outline as text
• Copy All Paths: copy all visible node paths line by line

Quick Start

1. Open json-outline.html in your browser.
2. Paste JSON into the left input panel.
3. View the hierarchy on the right.
4. Use the copy buttons for paths or outline export.

Path Format

Paths use dot notation, for example:

user.profile.address.city

Array indexes are included as numeric segments in the same format.