JSON Viewer

Interactive JSON tree viewer with syntax highlighting, collapsible nodes, search, and light/dark themes.

Basic JSON Viewer

Preview

data.json 3 keys

{
- name UX Library
- version 3.0.0
- components 148
- stable true
- deprecated null
}

<div class="json-viewer">
  <div class="json-viewer-header">
    <div class="json-viewer-title">
      <span>data.json</span>
      <span class="json-viewer-badge">3 keys</span>
    </div>
    <div class="json-viewer-actions">
      <button class="json-viewer-btn">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
        Copy
      </button>
    </div>
  </div>
  <div class="json-viewer-content">
    <ul class="json-viewer-tree">
      <li class="json-viewer-node">
        <div class="json-viewer-row">
          <button class="json-viewer-toggle json-viewer-toggle-expanded"><svg viewBox="0 0 10 10"><path d="M3 1l4 4-4 4" fill="none" stroke="currentColor" stroke-width="1.5"/></svg></button>
          <span class="json-viewer-bracket json-viewer-bracket-open">{</span>
        </div>
        <ul class="json-viewer-children">
          <li class="json-viewer-node">
            <div class="json-viewer-row">
              <span class="json-viewer-key">name</span>
              <span class="json-viewer-value-string">UX Library</span>
            </div>
          </li>
          <li class="json-viewer-node">
            <div class="json-viewer-row">
              <span class="json-viewer-key">version</span>
              <span class="json-viewer-value-string">3.0.0</span>
            </div>
          </li>
          <li class="json-viewer-node">
            <div class="json-viewer-row">
              <span class="json-viewer-key">components</span>
              <span class="json-viewer-value-number">148</span>
            </div>
          </li>
          <li class="json-viewer-node">
            <div class="json-viewer-row">
              <span class="json-viewer-key">stable</span>
              <span class="json-viewer-value-boolean">true</span>
            </div>
          </li>
          <li class="json-viewer-node">
            <div class="json-viewer-row">
              <span class="json-viewer-key">deprecated</span>
              <span class="json-viewer-value-null">null</span>
            </div>
          </li>
        </ul>
        <div class="json-viewer-row">
          <span class="json-viewer-bracket">}</span>
        </div>
      </li>
    </ul>
  </div>
</div>

Requires: ux.min.css

<div class="font-mono text-sm leading-relaxed rounded-box overflow-hidden" style="background: #1e1e2e">
  <div class="flex items-center justify-between px-4 py-3" style="background: #181825; border-bottom: 1px solid #313244">
    <span class="text-xs" style="color: #6c7086">data.json</span>
    <button class="text-xs px-2 py-1 rounded" style="color: #6c7086">Copy</button>
  </div>
  <div class="p-4 overflow-auto max-h-125">
    <div><span style="color: #f38ba8">name</span>: <span style="color: #a6e3a1">"UX Library"</span></div>
    <div><span style="color: #f38ba8">version</span>: <span style="color: #a6e3a1">"3.0.0"</span></div>
    <div><span style="color: #f38ba8">components</span>: <span style="color: #fab387">148</span></div>
  </div>
</div>

Requires: tw.min.css

// Toggle node: toggle.addEventListener('click', () => {
//   toggle.classList.toggle('json-viewer-toggle-expanded');
//   children.hidden = !children.hidden;
// });
// Copy: navigator.clipboard.writeText(JSON.stringify(data, null, 2));

Light Theme

Preview

response.json

status 200
message OK
url https://api.example.com

<div class="json-viewer json-viewer-light">
  <div class="json-viewer-header">
    <div class="json-viewer-title">response.json</div>
  </div>
  <div class="json-viewer-content">
    <ul class="json-viewer-tree">
      <li class="json-viewer-node">
        <div class="json-viewer-row">
          <span class="json-viewer-key">status</span>
          <span class="json-viewer-value-number">200</span>
        </div>
      </li>
      <li class="json-viewer-node">
        <div class="json-viewer-row">
          <span class="json-viewer-key">message</span>
          <span class="json-viewer-value-string">OK</span>
        </div>
      </li>
      <li class="json-viewer-node">
        <div class="json-viewer-row">
          <span class="json-viewer-key">url</span>
          <span class="json-viewer-value-url">https://api.example.com</span>
        </div>
      </li>
    </ul>
  </div>
</div>

Requires: ux.min.css

<div class="font-mono text-sm leading-relaxed rounded-xl overflow-hidden bg-base-100 border border-base-300">
  <div class="flex items-center justify-between px-4 py-3 bg-base-200 border-b border-base-300">
    <span class="text-xs font-medium text-base-content/60">response.json</span>
  </div>
  <div class="p-4 overflow-auto max-h-125">
    <div class="py-0.5"><span style="color: #a626a4;">status</span><span class="text-base-content/40 mx-0.5">:</span> <span style="color: #986801;">200</span></div>
    <div class="py-0.5"><span style="color: #a626a4;">message</span><span class="text-base-content/40 mx-0.5">:</span> <span style="color: #50a14f;">"OK"</span></div>
    <div class="py-0.5"><span style="color: #a626a4;">url</span><span class="text-base-content/40 mx-0.5">:</span> <span class="underline cursor-pointer" style="color: #4078f2;">https://api.example.com</span></div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required for static display

Class	Description
`.json-viewer`	Base container (dark theme)
`.json-viewer-header`	Header bar
`.json-viewer-title`	Title area
`.json-viewer-badge`	Key count badge
`.json-viewer-btn`	Action button (copy)
`.json-viewer-content`	Scrollable content
`.json-viewer-tree`	Tree list
`.json-viewer-node`	Tree node
`.json-viewer-row`	Node row
`.json-viewer-toggle`	Expand/collapse toggle
`.json-viewer-toggle-expanded`	Expanded state (rotated arrow)
`.json-viewer-key`	Property key (red)
`.json-viewer-value-string`	String value (green)
`.json-viewer-value-number`	Number value (orange)
`.json-viewer-value-boolean`	Boolean value (cyan)
`.json-viewer-value-null`	Null value (purple)
`.json-viewer-value-url`	Clickable URL (blue)
`.json-viewer-bracket`	Brackets [ ]
`.json-viewer-children`	Nested children (indented)
`.json-viewer-count`	Collapsed count badge
`.json-viewer-preview`	Collapsed preview text
`.json-viewer-highlight`	Search highlight
`.json-viewer-search-input`	Search field
`.json-viewer-raw`	Raw JSON display
`.json-viewer-light`	Light theme variant
`.json-viewer-sm`	Small font size
`.json-viewer-lg`	Large font size
`.json-viewer-compact`	Compact spacing
`.json-viewer.glass`	Glass morphism variant