https://github.com/BUMBAIYA/jsontree

Visualize JSON data format as a tree or graph
https://github.com/BUMBAIYA/jsontree

diagram-editor json nextjs react reaflow tailwindcss

Last synced: 7 days ago
JSON representation

Visualize JSON data format as a tree or graph

• Host: GitHub
• URL: https://github.com/BUMBAIYA/jsontree
• Owner: BUMBAIYA
• License: mit
• Created: 2023-07-04T15:53:55.000Z (about 1 year ago)
• Default Branch: master
• Last Pushed: 2024-03-17T13:07:53.000Z (4 months ago)
• Last Synced: 2024-03-17T18:03:17.129Z (4 months ago)
• Topics: diagram-editor, json, nextjs, react, reaflow, tailwindcss
• Language: TypeScript
• Homepage: https://jsontree.vercel.app
• Size: 187 KB
• Stars: 7
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-jekyll - BUMBAIYA/jsontree - Visualize JSON data format as a tree or graph (TypeScript)
• awesome-stars - BUMBAIYA/jsontree - Visualize JSON data format as a tree or graph (TypeScript)

README

        
# JsonTree Visualizer

Visualisation tool to help visualise json format in Graph and Tree form.

👉 [View live](https://jsontree.vercel.app/)

![screencapture-jsontree-vercel-app-2023-07-19-04_35_43](https://github.com/BUMBAIYA/jsontree/assets/85615075/0978c0ba-4871-4722-8cf8-f695a86d11ea)

## Development setup 🛠

Steps to locally setup development after cloning the project.

```sh

git clone https://github.com/BUMBAIYA/jsontree.git

```

### Step 1 - NodeJS

You will need:

- [node](https://nodejs.org/)

Please install them if you don't have them already.

### Step 2 - Install dependencies

```shell

cd jsontree

```

```shell

npm install

```

### Step 3 - Run app

Once the dependencies are installed, you can run the app:

```shell

npm run dev

```

Your application should be running on `http://localhost:3000`.

## License

Licensed under the MIT license.

---