Visualize, search, and explore JSON data — beautifully.
This is an interactive JSON visualizer built with React Flow, Next.js, and Tailwind CSS.
Paste your JSON and watch it transform into an elegant node-based graph you can explore, search, and analyze.
- 🔍 Smart Search — Find keys or values instantly across deeply nested structures.
- 🕸️ Interactive Graph — Each key/value pair becomes a node connected by edges.
- 🎨 Dark + Purple Theme — Minimal UI with subtle gradients and glow accents.
- ⚙️ React Flow Powered — Smooth panning, zooming, and node interactions.
- 🧩 Modular Design — Easy to extend with new features or data types.
Clone the repository and install dependencies:
git https://github.com/Brightdotdev/JSONVisualisser
cd JSONVisualisser
npm installRun the development server:
npm run dev
# or
yarn dev
# really any package manager you preferOpen http://localhost:3000 with your browser to see it in action.
- Next.js — App router + deployment ready
- React Flow — Graph rendering and interactivity
- Tailwind CSS — Styling and layout
- TypeScript — Type safety and clarity
This project started as a flash thought — “What if I could actually see my JSON?” It quickly turned into an experiment that helped me understand data structures and graph rendering in a deeper way.
I’d love to hear from you! If you have ideas for improving JSON Flow Visualizer — from UI tweaks to performance enhancements — open an issue or start a discussion.
You can also reach out directly on Twitter for quick chats or feedback threads.
This project is open source and welcomes all contributions!
Here’s how you can help:
- Fork the repository
- Create a branch for your feature or fix
- Commit your changes
- Open a Pull Request
Whether it’s fixing typos, improving the README, optimizing performance, or adding new visualization features — all contributions are welcome frfr
Built by Brightdotdev
If you like this project, drop a ⭐ on the repo or share it so more devs can visualize their JSON data beautifully!
This project is licensed under the MIT License — feel free to use, modify, and build upon it.