Open Editor

Documentation

Parse, edit, and rebuild deeply nested escaped JSON structures. Four specialized modes, shareable links, and an agent skill for AI-to-human JSON handoff.

Open Editor GitHub
Features

Four Modes

Each mode is purpose-built for a specific JSON workflow. Switch instantly via the sidebar.

Layer

Smart multi-layer parser. Detects and unwraps up to 10 levels of escaped JSON strings.

  • Auto-detect nested escaped JSON
  • Interactive breadcrumb navigation
  • Bidirectional parent/child sync
  • Real-time validation
  • Multi-document tabs
  • Save layer as new document

Tools

Swiss-army knife of JSON processing utilities.

  • Format & Minify
  • Escape & Unescape
  • Base64 Encode / Decode
  • URL Encode / Decode
  • Sort keys alphabetically
  • camelCase ↔ snake_case

Hero

Visual JSON exploration via JSON Hero integration.

  • Interactive tree structure
  • Rich data visualization
  • Share & collaborate links
  • Open in new tab

Diff

Side-by-side JSON comparison with Monaco DiffEditor.

  • Compare any two documents
  • Inline & side-by-side view
  • Toggle unchanged regions
  • Document selector
Sharing

Share JSON via URL

Compress and share JSON in a single URL. No server involved — everything is client-side.

Click Share to generate a compressed URL. Hover to set a custom tab name. The recipient opens the link and sees the JSON instantly.

ParamEncodingDescription
cGzip + Base64urlCompressed JSON data (recommended)
tURL-encodedCustom tab name
h1Auto-switch to Hero mode on import
sLZ-StringLegacy compressed format
rRaw Base64urlNo compression fallback
Agent Skill

present-json

A Claude Code skill that lets AI agents present JSON results to humans via interactive browser links. Built for agents, designed for humans.

$ npx skills add hrhrng/super-json
Skill

present-json

Instead of dumping raw JSON in the terminal, the agent opens an interactive viewer in the browser.

1

Install the skill

Run npx skills add hrhrng/super-json in your project.

2

Agent invokes the skill

When an agent has JSON to show, it calls /present-json with the data.

3

Browser opens automatically

The script compresses JSON with gzip, generates a URL, and opens the default browser.

Usage

# macOS / Linux
bash scripts/present.sh '{"status":"ok","data":[1,2,3]}' --tab "API Response"

# From a file
bash scripts/present.sh /path/to/data.json --tab "My Data"

# With Hero mode (interactive tree viewer)
bash scripts/present.sh '{"key":"value"}' --tab "My Data" --hero
# Windows PowerShell
./scripts/present.ps1 '{"status":"ok"}' -Tab "API Response"

# With Hero mode
./scripts/present.ps1 '{"key":"value"}' -Tab "My Data" -Hero

Under the hood

# The script does this automatically:
echo -n '{"status":"ok","data":[1,2,3]}' \
  | gzip -9 | base64 | tr '+/' '-_' | tr -d '=\n'

# Then opens:
# https://superjson.org?c=H4sIA...&t=API+Response

URL Parameters

ParamEncodingDescription
cGzip + Base64urlCompressed JSON data
tURL-encoded stringCustom tab name
h1 to enableAuto-switch to Hero mode

Notes

  • Zero dependencies — uses shell utilities only (gzip, base64, tr)
  • Cross-platform: macOS, Linux, and Windows PowerShell
  • Client-side only — no data is sent to any server
  • Temp redirect files are auto-cleaned after ~5 seconds
  • For very large JSON (>6 KB), URLs may exceed browser limits
Reference

Keyboard Shortcuts

Productivity shortcuts for common operations.

Analyze / ParseCtrl+Enter
Generate OutputCtrl+S
New DocumentCtrl+T
Close DocumentCtrl+W
Next DocumentCtrl+Tab
Getting Started

Quick Start

Use Online

No installation needed. Open the editor in your browser.

Open Editor

Run Locally

git clone https://github.com/hrhrng/super-json.git
cd super-json
npm install
npm run dev