JSON Tree Viewer

WHAT IT DOES

JSON Tree Viewer is a floating panel that transforms raw JSON data into an interactive, visual tree structure. Paste your JSON into the input area and click "View Tree"—the panel parses the data and displays it as a collapsible tree with syntax highlighting for keys (pink), strings (green), numbers (blue), booleans (yellow), and null values (red). Objects and arrays are expandable and collapsible with a single click, making it easy to navigate complex nested structures. You can click on any node to copy its full path (e.g., "data.users[0].name") to your clipboard, making it perfect for API debugging and data exploration. The panel also includes JSON validation with clear error messages, pretty‑printing, and the ability to copy the entire JSON or a selected node's value. You can insert the JSON or a specific node value directly into any editable field on the page (input, textarea, or contenteditable). Perfect for developers debugging API responses, data analysts exploring nested structures, QA engineers validating JSON payloads, or anyone working with complex JSON data.

WHERE IT RUNS

The panel overlays any website that loads the BotGentz extension—whether you're on a documentation page, an API console, a code editor, a data dashboard, or any other web page. It works on all modern Chromium‑based browsers (Chrome, Edge, Brave, Arc) and Firefox. The script injects a self‑contained UI element that does not interfere with the host page's layout, styles, or JavaScript execution. It runs client‑side only, with no external API calls or cloud dependencies.

HOW TO USE

After installing the free BotGentz extension, visit any page and click the extension icon to activate the panel. The first time you use JSON Tree Viewer, it will appear as a draggable widget near the bottom‑right corner of your viewport. To view JSON:

- Paste your JSON data into the input area. A sample dataset is pre‑filled.

- Click "View Tree" to parse and render the data as a collapsible tree.

- Click any object or array node to expand or collapse its children.

- Click any value node to copy its full path (e.g., "address.city") to your clipboard.

- Click "Validate" to check the syntax of your JSON without rendering the tree.

To use the output:

- Click "Copy JSON" to copy the current data as a pretty‑printed string.

- Click "Copy Selected Path" to copy the path of the last clicked node.

- Click "Insert JSON into Active Field" to paste the JSON into the focused editable field.

The panel remembers your last entered JSON across sessions, so you can return to it later.

RECURSIVE TREE RENDERER WITH PATH TRACKING AND SYNTAX HIGHLIGHTING

Unlike simple JSON viewers that only display raw text, this panel uses a recursive tree renderer that builds a DOM‑based hierarchical representation of the parsed JSON. The renderer traverses the object graph depth‑first, creating a node for each key‑value pair and array element. Each node stores its full path (e.g., "data.users[0].name") by accumulating keys and array indices during traversal. The syntax highlighting is applied via inline styled spans with distinct colors for each data type: keys in pink (#f472b6), strings in green (#4ade80), numbers in blue (#60a5fa), booleans in yellow (#fbbf24), and null in red (#f87171). The expand/collapse functionality is implemented using CSS display toggling with a state flag stored on the toggle element, ensuring smooth performance even with large JSON objects. The path tracking is updated on every node click using a closure that captures the accumulated path string. The JSON validator uses `JSON.parse()` with try‑catch error handling, providing specific syntax error messages to help users debug malformed input.

THE PANEL

- Drag: Click and hold the panel's header bar to move it anywhere on the screen.

- Per‑site position: The panel stores its last position separately for each domain using the browser's localStorage, keyed by hostname.

- Snap: When dragged near any edge of the viewport, the panel snaps to that edge with a 16px margin for a clean, docked feel.

- Collapse: Click the "−" button in the header to collapse the panel to a compact title bar, preserving all current values. Click "+" to expand it back.

- Resize: Drag the bottom‑right corner handle to resize the panel from 280px to 600px wide and 200px to 500px tall; the layout adapts responsively.

- Escape: Press the Escape key while the panel is focused to close it entirely (you can reopen it from the extension toolbar).

PLEASE NOTE

This script requires the free BotGentz extension to run—it is not a standalone bookmarklet or user script. Websites frequently update their DOM structures and security policies; while we strive to keep the panel functional across thousands of sites, occasional updates may be needed. The viewer performs all operations entirely in your browser—no data is sent to any server, and no cookies or tracking identifiers are used. Your JSON data remains private to your local session and is persisted only via GM_setValue (the extension's local storage) for convenience, not shared across devices or sessions. The tree viewer is optimized for JSON objects up to a few thousand nodes; extremely large datasets may impact performance. The "Copy Selected Path" feature only copies the path of the last clicked node; to copy a specific value, click the node, then use the path as a reference. The validation feature checks JSON syntax only; it does not validate against schemas or data types.