# Source: https://dev.writer.com/components/jsonviewer.md

# JSON Viewer

A component to explore JSON data as a hierarchy.

<img src="https://mintcdn.com/writer/mFPGVlLcGxKIh_Y1/framework/public/components/jsonviewer.png?fit=max&auto=format&n=mFPGVlLcGxKIh_Y1&q=85&s=ff2e334d157c3cdc5eac0ae716a49c47" data-og-width="550" width="550" data-og-height="263" height="263" data-path="framework/public/components/jsonviewer.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/writer/mFPGVlLcGxKIh_Y1/framework/public/components/jsonviewer.png?w=280&fit=max&auto=format&n=mFPGVlLcGxKIh_Y1&q=85&s=a8f8f68769f2421d7a6703338ffe0c28 280w, https://mintcdn.com/writer/mFPGVlLcGxKIh_Y1/framework/public/components/jsonviewer.png?w=560&fit=max&auto=format&n=mFPGVlLcGxKIh_Y1&q=85&s=3eaa26713cf822e163f9aace0064a7ef 560w, https://mintcdn.com/writer/mFPGVlLcGxKIh_Y1/framework/public/components/jsonviewer.png?w=840&fit=max&auto=format&n=mFPGVlLcGxKIh_Y1&q=85&s=9f1ed9b4e4bd1653b6fb1a361214bb49 840w, https://mintcdn.com/writer/mFPGVlLcGxKIh_Y1/framework/public/components/jsonviewer.png?w=1100&fit=max&auto=format&n=mFPGVlLcGxKIh_Y1&q=85&s=809d62a92dcc95bf7306e09ffe131ced 1100w, https://mintcdn.com/writer/mFPGVlLcGxKIh_Y1/framework/public/components/jsonviewer.png?w=1650&fit=max&auto=format&n=mFPGVlLcGxKIh_Y1&q=85&s=0e9036164166c4c48e3bedc9a7f0eee2 1650w, https://mintcdn.com/writer/mFPGVlLcGxKIh_Y1/framework/public/components/jsonviewer.png?w=2500&fit=max&auto=format&n=mFPGVlLcGxKIh_Y1&q=85&s=e533174e2a94b0f9ad1aa3f7a6e0ad30 2500w" />

## Fields

<table className="componentFields">
  <thead>
    <th>Name</th>
    <th>Type</th>
    <th class="desc">Description</th>
    <th>Options</th>
  </thead>

  <tbody>
    <tr>
      <td>Data</td>
      <td>Object</td>
      <td>-</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Initial depth</td>
      <td>Number</td>
      <td>Sets the initial viewing depth of the JSON tree hierarchy. Use -1 to display the full hierarchy.</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Hide root</td>
      <td>Boolean</td>
      <td>Don't show the type of the root node when it's an Object or an Array.</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Enable copy button</td>
      <td>Boolean</td>
      <td>Enable a copy button that lets users to copy the contents in this field to their clipboard</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>JSON indentation</td>
      <td>Width</td>
      <td>-</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Secondary text</td>
      <td>Color</td>
      <td>-</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Separator</td>
      <td>Color</td>
      <td>-</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Custom CSS classes</td>
      <td>Text</td>
      <td>CSS classes, separated by spaces. You can define classes in custom stylesheets.</td>

      <td>
        <span>-</span>
      </td>
    </tr>
  </tbody>
</table>