JSON Vision is a professional-grade, offline-first JSON visualizer and analyzer. It transforms raw, complex JSON data into intuitive, interactive structures, helping developers understand and manage their data with zero friction.
- Interactive Tree View: Explore deeply nested JSON structures with expandable nodes and syntax highlighting.
- Tabular View: Automatically transform JSON arrays into clean, sortable tables.
- Live Analysis: Get instant statistics on your data, including object counts, array lengths, and depth.
- Local & Private: All data is processed locally in your browser. No data is ever uploaded to a server.
- Modern UI: Built with a sleek Glassmorphism design system for a premium developer experience.
- Export Ready: Quickly view data summaries and prepare for further processing.
- Core: React 19
- Build Tool: Vite 8
- Styling: Vanilla CSS (Glassmorphism Theme)
- Icons: Lucide React
- Deployment: GitHub Actions
-
Clone the repository:
git clone https://github.com/mansres/json.git cd json -
Install dependencies:
npm install
-
Run development server:
npm run dev
-
Build for production:
npm run build
This project is configured for GitHub Pages using a custom GitHub Actions workflow.
- The workflow is located at
.github/workflows/deploy.yml. - It automatically builds and deploys the site to the
gh-pagesbranch upon every push tomain. - Live Site: https://mansres.github.io/json/
Contributions are welcome! If you have suggestions for new features or find bugs, please open an issue or submit a pull request.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Mansoor
- GitHub: @mansres
Distributed under the MIT License. See LICENSE for more information.
Built with ❤️ for the developer community.