📜 jsonick v1.0 documentation

jsonick

JSON Formatter & Table Viewer · Syntax Highlighting 100% client‑side

💻 Browser‑native 💡 Serverless 🔒 No logs, no cookies 📊 Table view

This document describes the internal architecture, JavaScript parsing mechanics, privacy guarantees, and security boundaries of jsonick — a JSON formatter that renders your data as a beautifully structured table with syntax highlighting, all inside your browser.

1. Specific Function core

jsonick is a client‑side tool that transforms raw JSON into an interactive, colour‑coded table view. It serves three primary purposes:

JSON to table rendering — Parses any valid JSON and displays it as a structured table. Nested objects and arrays are rendered recursively with clear indentation and visual hierarchy.
Syntax highlighting — Keys, strings, numbers, booleans, and null values are assigned distinct colours for instant readability, making it easy to scan and debug complex data.
Error resilience — When invalid JSON is provided, jsonick displays a clear error message in red, while still rendering all valid parts of the input. This helps you identify and fix issues without losing your data.

The tool is ideal for developers, data analysts, and anyone who needs to quickly visualise JSON structures, validate syntax, or share formatted data in a human‑friendly format.

🛠️ All parsing and rendering are performed entirely inside your browser using JavaScript's native JSON.parse() and DOM manipulation. No data is ever transmitted.

2. Local JavaScript Mechanism under the hood

Every operation in jsonick runs 100% inside the browser's memory. No user input — not even the JSON content — ever leaves the client.

Parsing — When the user clicks "Format & Render", the text from the <textarea> is passed to JSON.parse(). If the input is valid, a JavaScript object is created. If invalid, an error is caught and displayed.
Table generation — The parsed object is traversed recursively. For each key‑value pair, a table row is created. Nested objects and arrays are expanded into sub‑tables with a toggle (show/hide) for easy navigation.
Syntax colouring — Values are wrapped in <span> elements with CSS classes (e.g., .json-string, .json-number, .json-boolean, .json-null) to apply distinct colours.
Error handling — If JSON.parse() throws an error, the message is captured and displayed in a red box. The tool still attempts to render any valid parts that were parsed before the error (using a try‑catch around the entire rendering process).
Zero network I/O — The entire process uses only local variables, DOM manipulation, and the browser's built‑in JSON API. There are no fetch(), XMLHttpRequest, or WebSocket calls of any kind.

                
                    // Core rendering logic – triggered on button click

                    function renderJSON(input) {

                      try {

                        const data = JSON.parse(input);

                        // recursively build table from 'data'

                        const table = buildTable(data);

                        output.appendChild(table);

                      } catch (err) {

                        // show error, but still render valid parts

                        showError(err.message);

                      }

                    }

✅ This design guarantees that all processing happens in memory — nothing is serialised, stored, or transmitted outside the browser tab.

3. Dependencies / Libraries vanilla & zero

jsonick has zero external dependencies. It is built entirely with vanilla JavaScript (ES6), standard HTML5, and plain CSS.

JavaScript — Uses only native browser APIs: JSON.parse(), document DOM manipulation, addEventListener(), and Array/Object methods. No third‑party libraries, no npm packages, no CDN imports.
CSS — All styles are hand‑written in a single stylesheet. No frameworks (Bootstrap, Tailwind, etc.), no preprocessors, no icon libraries.
Fonts — The page uses system‑native font stacks ('Inter', -apple-system, BlinkMacSystemFont, ...) to avoid any external font requests. No Google Fonts or webfont services.
No analytics, no telemetry — There is no embedded tracking script, no pixel, no beacon, no crash‑reporting service.

📜 Zero dependencies means zero supply‑chain risk. Every line of code is auditable, self‑contained, and immune to third‑party compromise.

4. Storage Limitations ephemeral

jsonick does not persist any data — neither on the server (there is none) nor on the client beyond the current browser session.

No localStorage — The tool never writes to localStorage, sessionStorage, or IndexedDB. Your JSON input and the rendered table exist only in volatile memory (JavaScript variables and DOM).
No cookies — No cookies are created, read, or modified. The page does not set or access any document.cookie.
No cloud storage — Since no data is ever transmitted, there is no cloud storage, no database, no backup, no sync.
Lost on tab close — When you close the browser tab, all JavaScript state is destroyed. The next time you open the page, the input area is empty and no table is rendered.
Cache behaviour — The browser may cache the HTML, CSS, and JavaScript files for performance, but this is standard HTTP caching controlled by your browser — it does not store any user‑generated data.

🔒 Ephemeral by design — your interaction with jsonick leaves no trace. This is not a limitation; it is a deliberate privacy guarantee.

5. Input Security zero‑exfiltration

jsonick handles no sensitive user data in the traditional sense — it only processes JSON text. Nevertheless, the security model is absolute: nothing ever touches the network.

No form submissions — The textarea and file input are standard HTML elements with JavaScript listeners. There is no <form> and never a POST or GET request.
No input validation sent remotely — All parsing and validation happen locally using JSON.parse(). No validation payload is ever transmitted.
No data serialisation — The tool does not serialise user input into JSON, XML, or any other format for transmission. The JSON content is used exclusively for local rendering.
No external API keys — Since there are no external APIs, there are no API keys, no secrets, no authentication tokens embedded in the code or sent over the wire.
Network tab proof — Open your browser's Developer Tools (F12), go to the Network tab, and reload the page. You will see zero requests to external servers beyond the initial HTML and asset load (except for the initial HTML load and requests to official sandboxed subdomains.). No beacons, no analytics, no tracking pixels, no telemetry.

                
                    // The only "input" is the textarea — processed locally

                    document.getElementById('formatBtn').addEventListener('click', () => {

                      const raw = document.getElementById('jsonInput').value;

                      // data stays in the browser — never sent anywhere

                      renderJSON(raw);

                    });

                    // No fetch(), no XMLHttpRequest, no WebSocket

                    // No cookies, no localStorage, no IndexedDB

🛡️ Absolute input security is guaranteed by the architecture: the browser never initiates any outbound request containing user‑derived data. Your interaction with jsonick is completely offline after the initial page load.

📜 Ready to format your JSON?

Open jsonick and see your data as a beautiful table — instantly, privately.

▶ Open jsonick

🎯 zero‑tracking 💻 browser‑native 🔒 no server 📊 table view