A powerful and interactive JSON Tree Visualizer built with React, Vite, Tailwind CSS, and React Flow.
It allows users to upload, view, and explore JSON data as a beautiful hierarchical graph — perfect for debugging and data visualization.
🔗 Live Demo: react-json-tree.netlify.app
✅ Convert any JSON structure into an interactive graph/tree
✅ Nodes are automatically styled and colored:
- 🟦 Objects — Blue
- 🟩 Arrays — Green
- 🟨 Primitives — Yellow
✅ Search bar to find values using JSONPath (e.g., $.user.address.city)
✅ Auto-layout using Dagre.js for clear tree visualization
✅ Clean and responsive UI with Tailwind CSS
✅ Supports nested objects, arrays, and primitive values
✅ Deployed on Netlify for fast global access
| Technology | Purpose |
|---|---|
| React (Vite) | Frontend framework |
| Tailwind CSS | Styling |
| React Flow | Node-based visualization |
| Dagre | Graph layout management |
| Netlify | Deployment |
Follow these steps to run the project locally 👇
git clone https://github.com/your-username/react-json-tree-visualizer.git
cd json-tree-visualizer
npm install
npm run dev
📸 Screenshots
📬 Contact
👤 Malladi Venkatesh 📞 Phone: 7799472047 📧 Email: venkym7799@gmail.com 💼 LinkedIn: linkedin.com/in/venkatesh-malladi-7b0a16343 💻 GitHub: github.com/venkym7