The latest articles on DEV Community by Dipankar Das (@dipankar_das). https://dev.to/dipankar_das https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3917404%2Fd27bb18a-c969-4bdc-a95b-195150f5a82f.png https://dev.to/dipankar_das en Dipankar Das Thu, 07 May 2026 15:55:37 +0000 https://dev.to/dipankar_das/tired-of-messy-json-i-made-a-tool-that-visualizes-your-data-as-both-a-tree-and-a-pannable-graph-5c17 https://dev.to/dipankar_das/tired-of-messy-json-i-made-a-tool-that-visualizes-your-data-as-both-a-tree-and-a-pannable-graph-5c17 <p>Hey everyone! 👋</p> <p>I’ve always found it a bit painful to debug deeply nested JSON files, so I decided to build my own visualizer. Instead of just a boring list, I wanted something more interactive and visual.</p> <p>I call it JSON Tree Viewer.</p> <p>Live Demo: <a href="https://debabratasaha-dev.github.io/JSON-tree-viewer/" rel="noopener noreferrer">https://debabratasaha-dev.github.io/JSON-tree-viewer/</a><br> GitHub Repo: <a href="https://github.com/debabratasaha-dev/JSON-tree-viewer" rel="noopener noreferrer">https://github.com/debabratasaha-dev/JSON-tree-viewer</a></p> <p>Key Features:<br> 🕸️ Dual View: Switch between a classic interactive Tree View and a zoomable Graph View.<br> 🔍 Interactive Graph: Drag, pan, and zoom to explore complex JSON structures visually.<br> 🎨 Modern UI: Built with a glassmorphism sidebar, smooth animations, and a sleek dark mode.<br> 🏷️ Smart Tagging: Automatically detects data types (Strings, Numbers, Objects, etc.) with clean icons.<br> 🚀 Lightweight: Zero heavy frameworks—just pure HTML, CSS, and JavaScript.<br> I’d love to hear your feedback! What features should I add next? If you find it useful, I’d really appreciate a ⭐️ on GitHub!</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0wcu735b5fx79j5eclq8.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0wcu735b5fx79j5eclq8.png" alt=" " width="800" height="380"></a></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu7tigsj6wzlaaf9ikr8b.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu7tigsj6wzlaaf9ikr8b.png" alt=" " width="800" height="381"></a></p> javascript showdev tooling webdev