https://github.com/erik3010/json-visualizer

JSON Visualizer is a tool to visualize your JSON data in a tree view by simply pasting the JSON into the provided text area in the left sidebar and the tree view will be displayed beside it.
https://github.com/erik3010/json-visualizer

Last synced: about 2 months ago
JSON representation

JSON Visualizer is a tool to visualize your JSON data in a tree view by simply pasting the JSON into the provided text area in the left sidebar and the tree view will be displayed beside it.

• Host: GitHub
• URL: https://github.com/erik3010/json-visualizer
• Owner: Erik3010
• Created: 2023-01-12T12:30:41.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2023-07-06T09:03:42.000Z (over 2 years ago)
• Last Synced: 2025-06-08T17:41:21.619Z (4 months ago)
• Language: JavaScript
• Homepage: https://erik3010.github.io/json-visualizer/
• Size: 101 KB
• Stars: 10
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# JSON Visualizer

![Preview](https://github.com/Erik3010/json-visualizer/blob/master/preview.png?raw=true)

## Description

JSON Visualizer is a tool to visualize your JSON data in a tree view by simply pasting the JSON into the provided text area in the left sidebar and the tree view will be displayed beside it. This is a web-based application built using vanilla javascript and SVG.

This project was built because sometimes it is hard to read the JSON data in a text format within this tool, it will help you to visualize the JSON data in a tree view also I wanted to learn more about how to build a tree data structure and how to traverse it.

## Features

- Visualize JSON data in a tree view

- Pan and zoom the tree view

- Highlight the node when hovering over it

## Upcoming Features

- [ ] Collapse and expand nodes

- [ ] Copy the path of the node

## Credit

This project is highly inspired by [JSON Crack](https://github.com/AykutSarac/jsoncrack.com)