webdevpuneet.com

Related Snippets

85 in Tables category
1–6 of 60

SortableJS Sortable Table Rows with Live Ranking and Undo

Accessible Tree Table with Expandable Nested Rows

Virtualized 100,000-Row Table in Vanilla JavaScript

Grid.js Lightweight Searchable Table with Row Details

Tabulator Grouped Rows with Aggregates

Tabulator Editable Cells with Validation and Undo

JSON Tree Viewer — Collapsible JSON Explorer

JSON Tree Viewer · Tables · Plain HTML, CSS & JS · Live preview

CategoryTables
TagsClipboard APIDeveloper ToolsData Tables

Copy & paste

Source Code

<div class="jt-card">
  <div class="jt-bar">
    <span class="jt-title">response.json</span>
    <span class="jt-actions">
      <button type="button" class="jt-btn" id="jtExpand">Expand all</button>
      <button type="button" class="jt-btn" id="jtCollapse">Collapse all</button>
      <button type="button" class="jt-btn" id="jtCopy">Copy</button>
    </span>
  </div>
  <div class="jt-tree" id="jtTree"></div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Recursive renderer
One function renders any depth of nested objects and arrays.
Syntax colouring
Keys, strings, numbers, booleans, and null each get a color.
Correct type detection
Distinguishes null and arrays from plain objects.
Collapsible nodes
Per-node ▾/▸ toggles with a preview and key/item count.
Expand/collapse all
Toolbar buttons operate on the whole tree at once.
Copy to clipboard
Writes pretty-printed JSON via the Clipboard API.
Hover highlighting
Rows highlight for easy scanning of large payloads.
No library
Pure HTML/CSS/JS — no JSON-viewer dependency.

About this UI Snippet

JSON Tree Viewer — Collapsible, Syntax-Colored JSON Explorer

Screenshot of the JSON Tree Viewer snippet rendered live

A JSON tree viewer turns a raw JSON blob into an explorable, collapsible tree with syntax colouring — the view behind API consoles, debuggers, and config editors. This snippet recursively renders any JSON value into expandable nodes with type-based colours, per-node toggles, expand/collapse-all, and copy, in plain HTML, CSS, and vanilla JavaScript with no JSON-viewer library.

Recursive rendering

The core is a single build(value, key) function that inspects a value's type and returns a DOM node. Primitives (string, number, boolean, null) render as a coloured leaf; objects and arrays render an opening brace, a child container, and a closing brace, recursing into each entry. Because it's recursive, it handles arbitrary nesting depth — objects in arrays in objects — without any special-casing, and it works on any JSON you feed it by swapping the DATA constant.

Type-aware syntax colouring

Each value type gets its own colour the way a code editor does: keys in blue, strings in green, numbers in red, booleans in orange, null in grey, and structural braces in muted slate. A correct typeOf helper distinguishes null and arrays from plain objects (since typeof null is "object" and arrays are objects too), so the colouring and the { } vs [ ] braces are always right.

Collapsible nodes with previews

Every object and array has a ▾/▸ toggle that collapses its children. When collapsed, the node shows a compact … } preview plus a count ("3 keys", "2 items"), so you can see the shape of a large payload at a glance and drill in only where you need to. Expand-all and Collapse-all buttons operate on the whole tree at once (keeping the root open), which is invaluable for big API responses.

Copy and reuse

A Copy button writes the pretty-printed JSON to the clipboard via the Clipboard API, so the viewer doubles as a formatter. The data lives as a normal JavaScript object, so you can wire it to a fetch response, a textarea, or a file drop with one line — the renderer doesn't care where the JSON comes from.

Lightweight and themeable

Rows highlight on hover for easy scanning, the monospace type and dark palette read like a real console, and the whole thing is a couple of hundred lines with no dependencies. It's a clean, drop-in reference for the collapsible JSON-tree pattern that you'd otherwise pull a library in for.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA sample JSON object renders as a colored, collapsible tree.
  2. 2
    Feed your JSONReplace the DATA object with your own — any nesting works.
  3. 3
    Drill inClick a ▾ toggle to collapse or expand any object or array.
  4. 4
    Expand or collapse allUse the toolbar buttons to open or close the whole tree.
  5. 5
    Read the shape fastCollapsed nodes show a count like "3 keys" or "2 items".
  6. 6
    Copy itThe Copy button writes pretty-printed JSON to the clipboard.

Real-world uses

Common Use Cases

API response exploration
Explore payloads beside an API key manager, with one recursive function rendering objects and arrays of any depth.
Debug state panels
Show application state in a terminal window style container, with keys, strings, numbers, booleans and null each coloured.
Configuration editors
Render structured settings in a readable way, with each node showing a preview and an item count when collapsed.
Webhook and log inspection
Drill into nested event payloads, using correct type detection that tells null and arrays apart from plain objects.
Documentation examples
Display sample responses in API docs next to a changelog feed, with expand and collapse all plus copy controls.
Related: Table Inline Cell Validation
See the Table Inline Cell Validation for a related tables pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

The build function is recursive: for every object or array it creates a container and calls itself on each child, so nesting depth is unlimited and needs no special handling. Each level adds indentation and its own collapse toggle, so even a deeply nested API response stays navigable.

Pretty-printing gives you text, but not interactivity — you cannot collapse a noisy branch, scan counts, or color by type. A tree viewer lets you fold away the parts you do not care about and drill into the parts you do, which is essential when a payload is hundreds of lines. The Copy button still gives you the stringified version when you want it.

A typeOf helper returns "null" for null, "array" for arrays, and otherwise the JavaScript typeof. This matters because typeof null is "object" and arrays are objects too, so a naive check would mis-render both. Each resolved type maps to a CSS class, giving editor-style colors for keys, strings, numbers, booleans, and null.

Yes. The DATA constant is a normal JavaScript value, so assign it the parsed result of a fetch (await res.json()), a JSON.parse of a textarea, or a dropped file, then call build and append it. The renderer is agnostic about the source — it only needs a JavaScript object, array, or primitive.

Recreate the recursion as a component that renders itself for child nodes (a JsonNode that maps over entries and renders JsonNode again), holding each node's collapsed state locally. Pass the parsed JSON as a prop and color leaves by type. Expand/collapse-all can broadcast via context or a key. Tailwind users swap the classes for utilities; the recursive structure is the same.