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

VSCode

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 – Framework
• TypeScript – Language
• Tailwind – CSS
• Turborepo – Monorepo
• ReactFlow - Visualization
• Zustand - State Management
• Vercel – Deployments

Roadmap

• Support other formats like YAML, TOML and XML
• Show Node Details like json path
• Offline Support

Feel free to create an issue 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

References

• https://jsoncrack.com/
• https://www.jsonsea.com/