The Ultimate Multi-Layer Escaped JSON Editor - Parse, Edit, and Rebuild Complex Nested JSON with Ease! 🎯
Ever struggled with deeply nested, escaped JSON strings? Like this nightmare:
{
"config": "{\"settings\":{\"theme\":\"dark\",\"nested\":\"{\\\"level3\\\":{\\\"deep\\\":\\\"{\\\\\\\"level4\\\\\\\":\\\\\\\"final\\\\\\\"}\\\"}}\"}}"
}Super JSON Editor transforms it into beautiful, editable layers! 🎨
Clean and intuitive interface with multi-layer JSON parsing
Navigate through complex nested JSON layers with ease
- Smart Analysis - Automatically detects and parses up to 10 layers of escaped JSON
- Interactive Breadcrumb - Navigate through JSON layers with visual hierarchy
- Bidirectional Sync - Changes in any layer automatically sync across parent/child layers
- Real-time Validation - Instant JSON validation with error notifications
- Multi-Document Tabs - Work on multiple JSON documents simultaneously
- Format & Minify - Beautiful formatting or compact minification (with best-effort fallback for invalid JSON)
- Escape & Unescape - Handle escaped JSON strings with ease
- Base64 Encode/Decode - Convert JSON to/from Base64
- URL Encode/Decode - Make JSON URL-safe
- Sort Keys - Alphabetically sort all object keys
- Case Conversion - camelCase ↔ snake_case key conversion
- Apply to Input - Instantly apply processed output back to input
- JSON Hero Integration - Visualize JSON structure with JSON Hero
- Interactive Preview - Explore your JSON in a beautiful interface
- Share & Collaborate - Generate shareable links for your JSON
- Open in New Tab - Full JSON Hero experience in a new window
- Side-by-Side Diff - Compare two JSON documents with Monaco DiffEditor
- Document Selector - Pick any open document to compare against
- Toggle Unchanged - Show or hide unchanged regions
Share JSON instantly via URL — no server required:
- Share Button - One-click share with gzip compression (
?c=parameter) - Custom Tab Names - Hover "Share" to name your tab before sharing (
?t=parameter) - Hero Direct Link - Add
?h=1to auto-open JSON Hero viewer on import
The skills/present-json/ directory contains a first-class Claude Code skill that lets AI agents present JSON results to humans via interactive browser links.
Install via skills.sh:
npx skills add hrhrng/super-jsonHow it works — agent generates a shareable link from any JSON:
# Agent generates a compressed shareable link from any JSON
encoded=$(echo -n '{"status":"ok","data":[1,2,3]}' | gzip -9 | base64 | tr '+/' '-_' | tr -d '=\n')
echo "https://hrhrng.github.io/super-json?c=${encoded}&t=API+Response"
# With Hero mode for interactive visualization
echo "https://hrhrng.github.io/super-json?c=${encoded}&t=API+Response&h=1"URL Parameters:
| Param | Description | Example |
|---|---|---|
c |
Gzip + Base64url compressed JSON | ?c=H4sIA... |
t |
Custom tab name | &t=My+Results |
h |
Auto-switch to Hero mode | &h=1 |
Just open https://hrhrng.github.io/super-json - No installation needed! 🎉
# Clone the repository
git clone https://github.com/hrhrng/super-json.git
# Navigate to the directory
cd super-json
# Install dependencies
npm install
# Start development server
npm run dev
# then visit http://localhost:3000/super-json/
# Or build for production
npm run build
npm run previewPerfect for:
- 🔧 API Development - Debug complex API responses
- 🗄️ Database Management - Edit JSON columns with nested data
- 📊 Data Processing - Clean and transform multi-layer JSON
- 🔍 Debugging - Understand complex JSON structures
- 📝 Configuration Files - Manage nested config files
- 🤖 AI Agent Output - Agents share JSON results via
present-jsonskill for human review
graph LR
A[Input JSON] --> B[Parse Button]
B --> C[Layer Detection]
C --> D[Interactive Breadcrumb]
D --> E[Edit Any Layer]
E --> F[Auto-Sync All Layers]
F --> G[Apply Button]
G --> A
- Paste your nested/escaped JSON into the input panel
- Click "Parse" to analyze and detect all layers
- Navigate through layers using the interactive breadcrumb
- Edit any layer - changes auto-sync to related layers
- Click "Apply" to update the input with your changes
- Input your JSON in the left panel
- Select any processing tool (Format, Escape, Base64, etc.)
- View the processed result in the output panel
- Apply the result back to input if needed
- Input your JSON data
- Load into the embedded JSON Hero viewer
- Explore your data structure visually
- Open in new tab for full experience
- React 18 - Modern reactive UI framework
- TypeScript - Type-safe development with strict mode
- Monaco Editor - VS Code's powerful editor in your browser
- Zustand - Lightweight state management with Immer middleware
- Vite - Lightning-fast build tool
- LZ-String - URL-safe JSON compression for sharing
- Playwright - E2E snapshot testing
- Vitest - Unit testing
- LocalStorage API - Persistent storage without servers
- JSON Hero API - Visual JSON exploration
- GitHub Actions - CI/CD with preview deployments
super-json/
├── src/
│ ├── components/
│ │ ├── Layout/
│ │ │ ├── MainLayout.tsx # Core layout with mode routing
│ │ │ ├── components/ # DocumentTabs, ViewModeButtons
│ │ │ └── modes/ # LayerMode, ProcessorMode, HeroMode, DiffMode
│ │ ├── Breadcrumb/ # Layer navigation breadcrumb
│ │ ├── Notification/ # Toast notification system
│ │ └── ShareButton/ # Share link generator with dropdown
│ ├── hooks/
│ │ ├── useKeyboardShortcuts.ts # Ctrl+Enter, Ctrl+S, Ctrl+T, etc.
│ │ └── useSimpleImport.ts # URL parameter import (s, r, t, h)
│ ├── stores/
│ │ ├── documentStore.ts # Document state (Zustand + Immer)
│ │ └── appStore.ts # App settings state
│ ├── utils/
│ │ ├── jsonAnalyzer.ts # Core layer detection engine
│ │ ├── jsonFormatter.ts # Format/minify with best-effort fallback
│ │ ├── jsonDiff.ts # Deep diff comparison
│ │ ├── simpleShare.ts # URL sharing (LZ-String + base64url)
│ │ └── monacoTheme.ts # Custom neon dark theme
│ └── types/index.ts # TypeScript interfaces
├── skills/
│ └── present-json/SKILL.md # Claude Code skill for agent → human JSON sharing
├── tests/ # Playwright E2E tests
├── .github/workflows/ # CI, deploy, preview cleanup
└── index.html # Entry point (preview branch title detection)
| Shortcut | Action |
|---|---|
Ctrl+Enter |
Analyze/Parse JSON |
Ctrl+S |
Generate Output |
Ctrl+T |
New Document |
Ctrl+W |
Close Current Document |
Ctrl+Tab |
Switch to Next Document |
- ✅ Multi-layer JSON parsing - Handle up to 10 layers of nested escaped JSON
- ✅ Four specialized modes - Layer editing, processing tools, visual exploration, diff comparison
- ✅ Multi-document support - Work with multiple JSONs simultaneously
- ✅ Shareable links - Compress and share JSON via URL (LZ-String or base64url)
- ✅ Claude Code skill - AI agents can present JSON to humans interactively
- ✅ Auto-save - Never lose your work (localStorage persistence)
- ✅ Real-time validation - Instant error feedback
- ✅ Bidirectional sync - Smart parent-child layer synchronization
- ✅ JSON processing tools - Format, minify, escape, encode, sort, case-convert
- ✅ JSON Hero integration - Beautiful interactive visualization
- ✅ Preview deployments - Branch preview URLs with title indicator
- ✅ Modern dark theme - Neon-styled interface with custom Monaco theme
- ✅ Responsive design - Works on all devices
Contributions are what make the open source community amazing! Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Preview deployments are automatically created for each branch at:
https://hrhrng.github.io/super-json/preview/<branch-name>/
Distributed under the MIT License. See LICENSE for more information.
- Monaco Editor by Microsoft
- JSON Hero for interactive JSON visualization
- LZ-String for URL-safe compression
- Inspired by the pain of debugging nested JSON
- Built with ❤️ for developers by developers
If this tool saved you time, please consider giving it a star! ⭐
Made with ❤️ by developers who hate escaped JSON as much as you do!