<json-viewer>

A dependency-free Web Component for rendering any JS value as a collapsible tree. Path/glob API, source-data search, correct Map/Set handling, and a CSS-tokens theme contract.

View Demos API Reference

Features

Collapsible Tree

Shadow DOM, native <details> for every node, lazy child rendering so 10k-element trees open instantly.

Path & Glob API

Expand and collapse by path string, glob (*, **), RegExp, or predicate function.

Source-Data Search

Searches a flat record array built from the source value — no expandAll, just open the ancestors of the focused match.

Map & Set Fidelity

Entry segments like cache@0 preserve original key references via .entryAt(path), even when keys are objects.

VB Token Contract

Style with --json-viewer-* CSS custom properties; falls back to --vb-* then hardcoded light-dark().

Exotic Types

Renders BigInt, Date, RegExp, Function, Map, Set, and circular references — never throws on weird input.

Quick Start

Install

npm install @profpowell/json-viewer

Or include the built module directly in any HTML page:

<script type="module" src="https://unpkg.com/@profpowell/json-viewer"></script>

Basic usage

<json-viewer expanded="2" show-sizes></json-viewer>
<script type="module">
  import '@profpowell/json-viewer'
  document.querySelector('json-viewer').data = await fetch('/api').then(r => r.json())
</script>

Programmatic API

const v = document.querySelector('json-viewer')
v.expand('users[*].name')          // glob
v.search('error', { regex: true }) // iterator with next/prev/current/count
v.entryAt('cache@0')               // { key, value } — preserves Map key identity
await v.copy()                     // BigInt-safe full snapshot to clipboard

See All Demos Full API Reference

Related Components

Part of the ProfPowell vanilla web components suite: