# JSON Viewer

## Overview

JSON Viewer displays JSON and objects highlighting the syntax. The component supports three *display modes*: Tree, Code, and Preview.

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2Faqt0lyE58wB38W7nKmMa%2FCleanShot%202025-08-04%20at%2016.37.24%402x-min.png?alt=media&#x26;token=9df116e5-f1df-4b50-8c0a-e8bdf09c6a16" alt=""><figcaption></figcaption></figure>

### Properties

<table><thead><tr><th width="141.4609375">Name</th><th width="114.18359375">Type</th><th>Description</th></tr></thead><tbody><tr><td><code>name</code></td><td><code>string</code></td><td>Component name</td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Current component value</td></tr><tr><td><code>parsedValue</code></td><td><code>any</code></td><td>Component parsed value</td></tr></tbody></table>

### Methods

<table><thead><tr><th width="112.09765625">Name</th><th width="155.42578125">Parameters</th><th width="101.72265625">Returns</th><th>Description</th></tr></thead><tbody><tr><td><code>setValue</code></td><td><p><code>data: object |</code></p><p> <code>string</code></p></td><td><code>void</code></td><td>Set component value</td></tr><tr><td><code>reset</code></td><td>–</td><td><code>void</code></td><td>Reset component to the initial value</td></tr></tbody></table>

### Triggers

<table><thead><tr><th width="109.9375">Name</th><th>Description</th></tr></thead><tbody><tr><td><strong>On Init</strong></td><td>Triggered when the component is initialized</td></tr></tbody></table>