An interactive and visually appealing JSON Tree Visualizer built with React, TypeScript, and React Flow.
This app dynamically parses and visualizes JSON data as an expandable and connected tree structure — perfect for developers and data enthusiasts.
- JSON Parsing: Paste or input JSON data and instantly visualize its hierarchical structure.
- Interactive Tree: Expand, collapse, and navigate nodes with smooth transitions.
- Search Functionality: Quickly locate any node in large JSON structures.
- Highlighting: Focus or highlight specific nodes in the tree for better clarity.
- Responsive Layout: Works seamlessly across desktop and mobile devices.
- React Flow Integration: Beautiful, zoomable graph view powered by
reactflow. - Dark Mode Support: Toggle between light and dark themes.
- Node Details View: Displays key/value details on node selection.
- Error Handling: Graceful fallback for invalid JSON input.
- Frontend: React, TypeScript, Vite, TailwindCSS
- Visualization: React Flow
- Icons: Lucide React
- Deployment: Frontend hosted on Vercel
-
Navigate to the folder cd json-tree-visualizer
-
Install dependencies npm install
-
Start the server npm run dev