JSON & MD Renderer

User Manual

Overview

The JSON & MD Renderer is a single-page tool for reading documents rather than editing them. Drop a .json or .md file and it picks the right view automatically: an interactive, collapsible tree for JSON, or clean typographic rich text for Markdown. It runs entirely in your browser — the files you open are never uploaded, and the only thing stored is a local copy of your last document so you can pick up where you left off. It loads a few rendering libraries from a public CDN, so the first load needs an internet connection; after that it keeps working.

Getting Started

Opening / loading a document

• Drag & drop — drop a file anywhere on the page. A full-window overlay confirms the drop.
• Open file… — click the button on the start screen or in the top bar to pick a file.
• Paste — press Ctrl+V anywhere (outside the search box) to load JSON or Markdown straight from your clipboard.
• Restore last file — the start screen offers to reopen the document you viewed most recently.

Saving / exporting

This is a reader, so there is no save step. To pull content out, hover any JSON row and use copy (value) or path, or switch to the Raw view and copy the source directly.

The Toolbar

Reading JSON

Valid — or repaired — JSON renders as a collapsible tree, auto-expanded two levels deep. Click a caret, or a { 5 keys } / [ 12 items ] summary, to open or close a branch. Values are colour-coded by type, and every row reveals two actions on hover:

• path — copy the location of the value, e.g. root.users[3].email.
• copy — copy the value itself; for an object or array, the whole pretty-printed subtree.

Very long string values are previewed to the first 300 characters with a show all toggle. A breadcrumb bar above the tree shows the path of whatever is at the top of your screen as you scroll; click any segment to jump back up to that ancestor.

JSON inside JSON

When a string value is itself valid JSON, it gets an EMBEDDED JSON badge and expands as its own sub-tree — recursively, up to ten levels deep, so stringified JSON buried inside stringified JSON unfolds cleanly.

Markdown inside JSON

String values that look like Markdown get a purple MD chip. Click it to render that value as rich text in place; click again to return to the raw string.

Reading Markdown

Markdown files render with headings, tables, task lists, blockquotes, and syntax-highlighted code blocks. The Outline sidebar is built from the headings — click an entry to jump, and the current section highlights as you scroll. Content is sanitised before display, so a dropped file can't run scripts; harmless inline tags like <mark>, <sub>, <sup>, and <kbd> are kept.

Highlighting with <mark>

Anywhere a <mark>…</mark> tag appears — in a Markdown file, in a JSON string value, or in rendered embedded Markdown — it shows as a highlight, exactly as it would in a browser.

Broken JSON

Invalid JSON isn't rejected. A tolerant parser repairs the common problems and shows a banner listing what it fixed. Repairs include:

• Trailing, extra, and missing commas
• Single-quoted strings and unquoted keys or values
• // line comments and /* … */ block comments
• NaN, Infinity, hexadecimal numbers, and leading-dot numbers
• Python-style True / False / None, and undefined
• = used instead of :, and unterminated strings or truncated files
• Multiple top-level values (rendered together as an array)

If a single entry can't be salvaged, it's skipped and its siblings still render — one bad record in a thousand-item array costs you one item. Only genuinely unreadable input falls back to the raw source, with the failing line highlighted and its position named in the banner.

Search

Press Ctrl+F or click Find. In Markdown every match is highlighted, with the current one in orange. In JSON the search runs over the underlying data — keys and values — so matches inside collapsed branches, and even inside embedded JSON, are found and the tree auto-expands straight to them. Use Enter / Shift+Enter or the arrows to move between matches.

Keyboard Shortcuts

Privacy

The JSON & MD Renderer processes everything locally in your browser. No data is transmitted to any server — not the files you open, not the content you paste. Your most recently opened document (up to 2 MB) and your view preferences are stored in localStorage on your device only, and you can forget the saved document at any time from the start screen. The one external dependency is the rendering libraries loaded from a public CDN on first visit.

Supported File Types

.json  ·  .md  ·  .markdown  ·  .txt