---
title: "JSON Data Visualization"
slug: "json-data-visualization"
updated: 2024-08-12T13:54:39Z
published: 2024-08-12T13:54:39Z
canonical: "docs.processmaker.com/json-data-visualization"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.processmaker.com/llms.txt
> Use this file to discover all available pages before exploring further.

# JSON Data Visualization

See JSON format in ProcessMaker Platform.

## Overview

The [JSON](/v1/docs/json) data format is present mainly in the [Request data](/v1/docs/request-data-and-json). The following features also contain JSON format:

- [Data tab](/v1/docs/editable-request-data) in completed Requests
- [Data tab](/v1/docs/open-a-task#editable-task-data) in in-progress Tasks
- [Process Testing](/v1/docs/create-and-run-a-test-for-a-process)
- Data in the [Screen preview](/v1/docs/preview-a-screen-for-desktop-and-mobile-devices)
- Output data when [testing a Script](/v1/docs/test-your-script)
- Response body when [testing a Resource in a Data Connector](/v1/docs/edit-a-rest-type-data-connector#test-a-resource-in-a-data-connector)

[Embedded content](https://cdn.iframe.ly/WQbpJPI)

*JSON Data Browser*

## Data Browser

Alternatively to the classic JSON structure, use the Data Browser to explore the tree representation of JSON as a data model to understand different structural elements within it.

![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/eef314f6-44a9-4e1e-b2c5-51fb78133a5a.png)Data Browser canvas

Do any of the following from the Data Browser:

- [Navigate around the Data Browser](/v1/docs/json-data-visualization#navigate-around-the-data-browser)
- [Adjust the viewing size](/v1/docs/json-data-visualization#adjust-the-viewing-size)
- [Search nodes](/v1/docs/json-data-visualization#search-nodes)
- [See node content](/v1/docs/json-data-visualization#see-node-content)

### Navigate Around the Data Browser

Follow these steps to navigate around the Data Browser:

1. Drag and drop with the cursor to navigate the Data Browser canvas.

### Adjust the Viewing Size

If your Data Browser does not display in your browser window well such that you are navigating around your map with your cursor, adjust the zoom perspective of your map:

- Increase the viewing percentage to view a big map.
- Decrease the viewing percentage to view a small map.

Follow these steps to adjust the viewing size of your Data Browser:

1. Adjust the viewing percentage of the Data Browser canvas following these guidelines:
  - **Zoom out from the Data Browser canvas:**
    - Press the keyboard key combination **Control**+**-** (**Command**+**-** for Apple keyboards).
    - Click the **Zoom Out** ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/6e4815ee-73d4-4943-a1f3-b5c6ec1be0fe.png) button from the top-right of the Data Browser canvas.
  - **Zoom in to the Data Browser canvas:**
    - Press the keyboard key combination **Control**+**+** (**Command**+**+** for Apple keyboards).
    - Click the **Zoom In** ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/d9d5971e-e59c-4856-a14c-bad449566c3b.png) button from the top-right of the Data Browser canvas.
  - Click the **Center Canvas** ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/3935ceed-2f61-4d2a-9612-f724f72657f7.png) button to reset the Data Browser canvas viewing percentage to 100%, and center the map.
2. [Navigate around your Data Browser](/v1/docs/json-data-visualization#navigate-around-the-data-browser) as necessary.

### Search Nodes

Search nodes by entering a text. Follow these steps to search nodes in your map:

1. From the top-right in the **Search Node** ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/ceb7ddd7-4c25-4c5f-8efe-e9d51ac9cb45.png) field, enter a text to find it in all nodes. The nodes with the entered text display with green-colored highlighting. Line instances with the entered text display with yellow-colored highlighting. The **Search Node** field displays how many instances are there in the map nodes.

![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/8234f8ea-2e04-4f55-9bf7-46fa286b860a.png)Green-colored highlighting is entered text. Yellow-colored highlighting show line instances.
2. While the **Search Node** field is focusing, press the **Enter** key to go to the next instance. The instance displays with yellow-colored highlighting.

### See Node Content

See a node in a separate window node. Follow these steps to see the node content:

1. Locate the node you want to see.
2. Click the node. The **Node Content** window displays the **Content** and **Node Path** sections.

![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/2aa7c3fe-26bd-4303-bd68-38ceb5950012.png)
3. In the **Content** section, click the **Copy to clipboard** ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/7993b150-a535-407d-b719-710d49a5f1ed.png) icon to copy the node content.
4. In the **Node Path** section, click the **Copy to clipboard** ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/7993b150-a535-407d-b719-710d49a5f1ed.png) icon to copy the node path.