From 4e861545ffa4abdf94693173321f7611133270ac Mon Sep 17 00:00:00 2001 From: hrhrng Date: Sat, 14 Mar 2026 21:31:59 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20agent=20visibility:=20llms.tx?= =?UTF-8?q?t,=20HTML=20fallback,=20and=20JSON-LD=20structured=20data?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Make the site discoverable and usable by AI agents via three layers: - /llms.txt and /llms-full.txt (standard LLM site documentation) - HTML #agent-info block (visible to WebFetch, hidden when React mounts) - JSON-LD structured data and meta description --- index.html | 95 ++++++++++++++++++++- public/llms-full.txt | 194 +++++++++++++++++++++++++++++++++++++++++++ public/llms.txt | 69 +++++++++++++++ 3 files changed, 357 insertions(+), 1 deletion(-) create mode 100644 public/llms-full.txt create mode 100644 public/llms.txt diff --git a/index.html b/index.html index d19f690..dbe841f 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,13 @@ - + Super JSON - Your Final ONLINE JSON Editor + + +
+ + +
+

Super JSON Editor

+

Built for agents, designed for humans. Present JSON results to humans via an interactive browser viewer instead of dumping raw JSON in a terminal.

+ +

Agent URL API

+

Construct a URL to open JSON directly in the editor. No server upload — all data is encoded in the URL (client-side only).

+ +

URL Parameters

+ + + + + + + + +
ParameterEncodingDescription
rBase64urlJSON content, base64url-encoded. Shell-friendly, no dependencies needed.
sLZ-StringJSON content, LZ-String compressed (used by the app's built-in Share button, smaller URLs).
tURL-encoded stringCustom tab name displayed in the editor.
h1 to enableAuto-switch to Hero mode (JSON Hero interactive viewer with tree navigation, type info, search).
+ +

Quick Start (Shell)

+ 
# Inline JSON
+encoded=$(echo -n '{"hello":"world"}' | base64 | tr '+/' '-_' | tr -d '=\n')
+echo "https://hrhrng.github.io/super-json?r=${encoded}&t=My%20Data"
+
+# From a file
+encoded=$(base64 < data.json | tr '+/' '-_' | tr -d '=\n')
+echo "https://hrhrng.github.io/super-json?r=${encoded}&t=File%20Data"
+
+# With Hero mode (interactive tree viewer)
+echo "https://hrhrng.github.io/super-json?r=${encoded}&t=My%20Data&h=1"
+ +

Features

+ + +

For AI Agents

+

If you are an AI agent and want to present JSON to a human user:

+
    +
  1. Take the JSON content you want to display
    2. +
  2. Base64url-encode it: base64 | tr '+/' '-_' | tr -d '='
    3. +
  3. Construct the URL: https://hrhrng.github.io/super-json?r={encoded}&t={tab_name}
    4. +
  4. Present the link to the user — they will see the JSON in a full interactive editor
    5. +
+

The URL is entirely client-side. No data is sent to any server (unless Hero mode h=1 is used, which sends to jsonhero.io).

+

For very large JSON (>6KB encoded), the URL may exceed browser limits. Consider splitting the data or using the app directly.

+ +

Claude Code Skill

+

Install the present-json skill to use Super JSON directly from Claude Code:

+ 
claude install-skill https://github.com/hrhrng/super-json/tree/main/skills/present-json
+

Then use /present-json [json-or-file] [tab-name] to present JSON to users interactively.

+ + +
+ \ No newline at end of file diff --git a/public/llms-full.txt b/public/llms-full.txt new file mode 100644 index 0000000..cce2ca0 --- /dev/null +++ b/public/llms-full.txt @@ -0,0 +1,194 @@ +# Super JSON Editor — Full Documentation + +> Parse, edit, and reconstruct deeply nested/escaped JSON structures. Built for agents, designed for humans. + +## Overview + +Super JSON Editor is a standalone web application at `https://hrhrng.github.io/super-json`. It provides a professional IDE-like experience for working with JSON, with special strength in handling multi-layer escaped JSON (JSON strings containing stringified JSON, which in turn contain more stringified JSON, etc.). + +The app is entirely client-side. No data leaves the browser unless Hero mode is explicitly used. + +## URL API Reference + +### Base URL + +``` +https://hrhrng.github.io/super-json +``` + +### Query Parameters + +| Parameter | Required | Encoding | Description | +|-----------|----------|----------|-------------| +| `r` | One of `r` or `s` | Base64url | JSON content encoded with base64url (standard base64 with `+/` replaced by `-_`, padding `=` stripped). Recommended for shell/agent use. | +| `s` | One of `r` or `s` | LZ-String | JSON content compressed with `LZString.compressToEncodedURIComponent()`. Produces shorter URLs. Used by the app's built-in Share button. | +| `t` | No | URL-encoded string | Custom tab name. Defaults to "Shared Document" or a name derived from the JSON content (`title` or `name` field). | +| `h` | No | `1` to enable | Auto-switch to Hero mode. Sends the JSON to `jsonhero.io/api/create.json` to create a temporary interactive viewer (24h TTL). | + +### Base64url Encoding (parameter `r`) + +Standard across all POSIX shells: + +```bash +# Encode +encoded=$(echo -n "$JSON_CONTENT" | base64 | tr '+/' '-_' | tr -d '=\n') + +# Encode from file +encoded=$(base64 < file.json | tr '+/' '-_' | tr -d '=\n') +``` + +Decoding (for reference): +1. Replace `-` with `+`, `_` with `/` +2. Add `=` padding to make length a multiple of 4 +3. Standard base64 decode + +### LZ-String Encoding (parameter `s`) + +Requires the `lz-string` library (npm/browser): + +```javascript +import LZString from 'lz-string' +const compressed = LZString.compressToEncodedURIComponent(jsonString) +const url = `https://hrhrng.github.io/super-json?s=${compressed}` +``` + +### URL Size Limits + +- Most browsers support URLs up to ~8,000 characters +- Base64 encoding expands data by ~33% +- For JSON larger than ~6KB, consider: + - Using LZ-String compression (`s` parameter) for better compression + - Splitting the data into smaller pieces + - Having the user paste directly into the editor + +## Complete Examples + +### Agent Workflow: Present API Response + +```bash +# 1. You have JSON from an API call +json='{"users":[{"id":1,"name":"Alice"},{"id":2,"name":"Bob"}]}' + +# 2. Encode it +encoded=$(echo -n "$json" | base64 | tr '+/' '-_' | tr -d '=\n') + +# 3. Construct URL +url="https://hrhrng.github.io/super-json?r=${encoded}&t=API%20Response" + +# 4. Present to user +echo "View the API response interactively: $url" +``` + +### Agent Workflow: Present with Hero Mode + +```bash +# Same as above, but add &h=1 for the interactive tree viewer +url="https://hrhrng.github.io/super-json?r=${encoded}&t=API%20Response&h=1" +``` + +### Agent Workflow: Present File Contents + +```bash +encoded=$(base64 < config.json | tr '+/' '-_' | tr -d '=\n') +echo "https://hrhrng.github.io/super-json?r=${encoded}&t=Config" +``` + +## View Modes + +The editor has four view modes: + +### Layer Mode (default) +Three-panel layout: +1. **Input Panel** (left) — paste or edit raw JSON +2. **Layer Editor** (middle) — tabbed interface showing each detected JSON layer with bidirectional sync +3. **Output Panel** (right) — reconstructed JSON after edits + +User clicks **Parse** to analyze layers, edits in the layer tabs, then clicks **Apply** to generate output. + +### Hero Mode +Two-panel layout: +1. **JSON Input** (left) — paste JSON +2. **JSON Hero Viewer** (right) — embedded iframe from jsonhero.io with interactive tree navigation, type info, and search + +### Diff Mode +Side-by-side JSON comparison with highlighted differences. + +### Processor Mode +JSON transformation tools. + +## Multi-Layer JSON Parsing + +The core feature. Given input like: + +```json +{ + "config": "{\"database\":\"{\\\"host\\\":\\\"localhost\\\",\\\"port\\\":5432}\"}" +} +``` + +The analyzer detects three layers: +- **Layer 0**: The outer object +- **Layer 1**: The `config` field (was an escaped JSON string) +- **Layer 2**: The `database` field (was a doubly-escaped JSON string) + +Each layer gets its own editor tab. Edits in any layer automatically sync to parent and child layers. + +## Multi-Document Support + +- Multiple JSON documents open simultaneously as tabs +- Each document has independent state (input, layers, output) +- Double-click tab to rename +- Auto-save to localStorage + +## Keyboard Shortcuts + +| 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 | + +## Claude Code Skill: present-json + +### Installation + +``` +claude install-skill https://github.com/hrhrng/super-json/tree/main/skills/present-json +``` + +### Usage + +``` +/present-json [json-content-or-file-path] [tab-name] +``` + +### When to Use + +- You produced JSON output the user needs to review (API responses, query results, configs) +- The JSON is complex/nested and hard to read as plain text +- You want the user to explore, edit, search, or navigate the JSON interactively + +### What It Does + +1. Takes JSON content (inline or from a file) +2. Base64url-encodes it using shell commands (`base64`, `tr`) +3. Generates a clickable URL to `https://hrhrng.github.io/super-json?r=...&t=...` +4. Presents the link to the user + +No dependencies required — uses only POSIX shell builtins. + +## Technical Details + +- **Stack**: React + TypeScript + Vite + Monaco Editor + Zustand +- **Hosting**: GitHub Pages at `https://hrhrng.github.io/super-json` +- **Source**: `https://github.com/hrhrng/super-json` +- **Privacy**: All processing is client-side. No data sent to any server except when Hero mode (`h=1`) creates a temporary jsonhero.io session (24h TTL). +- **Browser Support**: Chrome, Firefox, Safari, Edge (requires ES6+) + +## Links + +- [Live App](https://hrhrng.github.io/super-json) +- [GitHub Repository](https://github.com/hrhrng/super-json) +- [Skill: present-json](https://github.com/hrhrng/super-json/tree/main/skills/present-json) diff --git a/public/llms.txt b/public/llms.txt new file mode 100644 index 0000000..91b1901 --- /dev/null +++ b/public/llms.txt @@ -0,0 +1,69 @@ +# Super JSON Editor + +> Parse, edit, and reconstruct deeply nested/escaped JSON structures. Built for agents, designed for humans. + +## URL API + +Construct a URL to open JSON directly in the interactive editor. All data is encoded in the URL — no server upload, fully client-side. + +Base URL: `https://hrhrng.github.io/super-json` + +### Parameters + +- `r`: JSON content, base64url-encoded (shell-friendly, no dependencies) +- `s`: JSON content, LZ-String compressed (smaller URLs, used by built-in Share button) +- `t`: Custom tab name, URL-encoded +- `h`: Set to `1` to auto-switch to Hero mode (JSON Hero interactive viewer with tree navigation, type info, search) + +### Usage (Shell) + +```bash +# Inline JSON → shareable link +encoded=$(echo -n '{"hello":"world"}' | base64 | tr '+/' '-_' | tr -d '=\n') +echo "https://hrhrng.github.io/super-json?r=${encoded}&t=My%20Data" + +# From a file +encoded=$(base64 < data.json | tr '+/' '-_' | tr -d '=\n') +echo "https://hrhrng.github.io/super-json?r=${encoded}&t=File%20Data" + +# With Hero mode (interactive tree viewer) +echo "https://hrhrng.github.io/super-json?r=${encoded}&t=My%20Data&h=1" +``` + +## For AI Agents + +If you are an AI agent and want to present JSON to a human user: + +1. Take the JSON content you want to display +2. Base64url-encode it: `base64 | tr '+/' '-_' | tr -d '='` +3. Construct the URL: `https://hrhrng.github.io/super-json?r={encoded}&t={tab_name}` +4. Present the link to the user — they will see the JSON in a full interactive editor + +Privacy: the URL is entirely client-side. No data is sent to any server (unless Hero mode `h=1` is used, which sends to jsonhero.io with 24h TTL). + +For large JSON (>6KB encoded), the URL may exceed browser limits. + +## Claude Code Skill + +Install the `present-json` skill to use Super JSON directly from Claude Code: + +``` +claude install-skill https://github.com/hrhrng/super-json/tree/main/skills/present-json +``` + +Then use `/present-json [json-or-file] [tab-name]` to present JSON interactively. + +## Features + +- Multi-layer JSON parsing — handles deeply nested escaped JSON strings +- Multi-document tabs — work with multiple JSON documents simultaneously +- Bidirectional sync — real-time synchronization between parent and child layers +- Hero mode — JSON Hero interactive viewer with tree navigation and search +- Diff mode — side-by-side JSON comparison +- Monaco Editor — VS Code's editor with syntax highlighting and validation +- Auto-save — automatic persistence to localStorage + +## Links + +- [Source Code](https://github.com/hrhrng/super-json) +- [Skill: present-json](https://github.com/hrhrng/super-json/tree/main/skills/present-json)