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: 12 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 (over 1 year ago)
• Default Branch: master
• Last Pushed: 2024-03-17T13:07:53.000Z (8 months ago)
• Last Synced: 2024-10-11T10:52:22.665Z (28 days ago)
• Topics: diagram-editor, json, nextjs, react, reaflow, tailwindcss
• Language: TypeScript
• Homepage: https://jsontree.vercel.app
• Size: 187 KB
• Stars: 22
• Watchers: 1
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

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.

---