https://github.com/xzitlou/jsontr.ee

Effortlessly visualize JSON structures as dynamic tree diagrams
https://github.com/xzitlou/jsontr.ee

javascript json json-parser json-schema json-vi json-visu jsonlint jsonlint-tree jsontree jsontree-library

Last synced: 25 days ago
JSON representation

Effortlessly visualize JSON structures as dynamic tree diagrams

• Host: GitHub
• URL: https://github.com/xzitlou/jsontr.ee
• Owner: xzitlou
• License: mit
• Created: 2024-11-25T19:04:10.000Z (27 days ago)
• Default Branch: main
• Last Pushed: 2024-11-25T19:27:40.000Z (27 days ago)
• Last Synced: 2024-11-25T20:22:11.318Z (27 days ago)
• Topics: javascript, json, json-parser, json-schema, json-vi, json-visu, jsonlint, jsonlint-tree, jsontree, jsontree-library
• Language: JavaScript
• Homepage: https://jsontr.ee
• Size: 9.77 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# jsontr.ee

Effortlessly visualize JSON structures as interactive and dynamic tree diagrams. [See example](https://jsontr.ee/)

## Description:

jsontr.ee is a lightweight JavaScript library that transforms JSON data into beautifully rendered, interactive tree diagrams using SVG. Designed for simplicity and flexibility, it supports both arrays and nested objects, ensuring clear and intuitive visualizations of complex data structures.

## Features:

- Automatically generates tree diagrams from JSON data.

- Dynamically positions nodes to avoid overlaps.

- Supports arrays and nested objects with labeled parent nodes.

- Interactive SVG-based rendering with customizable styles.

- Lightweight and easy to integrate into any web project.

### Perfect for:

- Debugging JSON structures.

- Visualizing API responses.

- Representing hierarchical data.

### How to Use

To get started, include the jsontr.ee library in your HTML:

```

```

Basic Usage

1. Prepare Your JSON Data: Ensure you have your JSON data ready. For example:

javascript

```

const jsonData = {

    "name": "Lou Alcalá",

    "projects": [

        {

            "name": "JSONtr.ee",

            "description": "JSON Formatter, Validator & Viewer Online | JSONtr.ee",

            "url": "https://jsontr.ee"

        },

        {

            "name": "PixSpeed.com",

            "description": "Image compressor | Compress and optimize WebP, PNG, JPG, JPeG and AVIF",

            "url": "https://pixspeed.com"

        }

    ]

};

```

2. Create a Container for the Diagram: Add a 
 element in your HTML where the diagram will be rendered.


```



```


3. Render the Tree Diagram: Use the jsontr.ee function to visualize the JSON data.

```

const container = document.getElementById('json-tree');

container.innerHTML = generateJSONTree(jsonData);

```