JsonBlox

A high-performance, modern JSON visualization and manipulation tool with a block-based interface, optimized for exploring and editing large JSON files with ease.

🚀 Try it now: https://jsonblox.vercel.app

Features

• 📊 Visual Block-Based JSON Representation.
• 🎨 Material UI-based modern interface.
• ⚡ High-performance handling of large JSON files.
• 🔄 Real-time JSON updates with Monaco Editor.
• 📝 Easy editing and modification of JSON structures.
• 🌈 Syntax highlighting for JSON content.
• 📋 Copy and modify nested JSON blocks.
• 🔍 Multi-keyword search with highlighting.
• 💡 Elegant tooltip handling for long field names.
• 🔄 Git-style diff view for JSON modifications.
• 🌐 Share JSON data via unique URLs.
• 📱 Responsive design for various screen sizes.

Tech Stack

• Frontend: React 18 with Material-UI
• Editor: Monaco Editor for JSON editing
• Performance: React Window for virtual scrolling
• Storage: Firebase Firestore for JSON sharing
• Deployment: Vercel with Speed Insights

Prerequisites

• Node.js (v18 or higher).
• npm v9 or higher.
• Modern web browser with JavaScript enabled.

Development

1. Clone and install dependencies:

git clone https://github.com/yourusername/JsonBlox.git
cd JsonBlox
npm install

2. Start the development server:

npm start

The application will be available at http://localhost:3000.

Usage

1. Load JSON Data:

   • Paste your JSON directly into the Monaco editor.
   • Load shared JSON from a unique URL.
   • Start with the sample JSON template.

2. Visualize and Edit:

   • Switch between block view and text editor.
   • Edit JSON values directly in blocks.
   • Copy and modify nested JSON structures.
   • Use tooltips for long field names.
   • Handle large JSON files with virtual scrolling.

3. Search and Navigate:

   • Use multi-keyword search with real-time highlighting.
   • Navigate through search results efficiently.
   • Collapse/expand nested structures.

4. Compare and Track:

   • View modifications in a Git-style diff interface.
   • Track changes between JSON versions.
   • Highlight added, modified, and deleted content.

5. Share and Export:

   • Generate shareable links for JSON data.
   • Copy any part of the JSON to clipboard.
   • Share both JSON content and visual diffs.

License

This project is licensed under the MIT License - see the LICENSE file for details.

---

Made with ❤️ by one passionate employee at Roblox.