https://github.com/mohitkumartoshniwal/jsonlens

Visualize JSON using interactive Graphs
https://github.com/mohitkumartoshniwal/jsonlens

approuter graph json nextapprouter nextjs pnpm pnpm-monorepo pnpm-workspace pwa react reactflow turborepo visualization vite vscode-extension

Last synced: 12 days ago
JSON representation

Visualize JSON using interactive Graphs

• Host: GitHub
• URL: https://github.com/mohitkumartoshniwal/jsonlens
• Owner: mohitkumartoshniwal
• License: mit
• Created: 2024-04-23T08:08:53.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-05-18T14:16:48.000Z (6 months ago)
• Last Synced: 2024-10-11T01:09:59.670Z (28 days ago)
• Topics: approuter, graph, json, nextapprouter, nextjs, pnpm, pnpm-monorepo, pnpm-workspace, pwa, react, reactflow, turborepo, visualization, vite, vscode-extension
• Language: TypeScript
• Homepage: https://www.jsonlens.com/
• Size: 32.2 MB
• Stars: 58
• Watchers: 1
• Forks: 11
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
## JSON Lens

JSON Lens is an open-source data visualization app which allows visualization of JSON in the form of interactive graphs. It works in Web and VSCode.

### [Web](https://jsonlens.vercel.app/)

![Web Preview](https://github.com/mohitkumartoshniwal/jsonlens/raw/main/assets/web.gif)

### [VSCode](https://marketplace.visualstudio.com/items?itemName=mohitkumartoshniwal.jsonlens)

![VSCode Preview](https://github.com/mohitkumartoshniwal/jsonlens/raw/main/assets/extension.gif)

## Features

- Dark/Light mode

- Graph mode

- Export JSON

- Download graphs in PNG, SVG and JPEG formats

- Zoom and panning support

- Import Data from URLs or File System

- PWA Support

## Tech Stack

- [Next.js](https://nextjs.org/) – Framework

- [TypeScript](https://www.typescriptlang.org/) – Language

- [Tailwind](https://tailwindcss.com/) – CSS

- [Turborepo](https://turbo.build/repo) – Monorepo

- [ReactFlow](https://reactflow.dev/) - Visualization

- [Zustand](https://docs.pmnd.rs/zustand/getting-started/introduction) - State Management

- [Vercel](https://vercel.com/) – Deployments

## Roadmap

- Support other formats like YAML, TOML and XML

- Show Node Details like json path

- Offline Support

Feel free to [create an issue](https://github.com/mohitkumartoshniwal/jsonlens/issues) for feature requests or suggestions.

## ⭐️ Show Your Support

Please give a ⭐️ if this project helped you!

## Resources

Shared my learnings on how I built the application in this [playlist](https://www.youtube.com/playlist?list=PLpM_sf_d5YTP8tXfvK2uxdVYRnMffwMwr)

## References

- https://jsoncrack.com/

- https://www.jsonsea.com/