JSON Map - Interactive JSON Visualizer

A powerful, interactive JSON visualization tool that transforms complex data structures into beautiful, navigable graphs. Built with React, TypeScript, and powered by Google's Gemini AI.

Live Demo: https://blackmoon87.github.io/json_map/

Features

• 📊 Interactive Graph Visualization - Visualize JSON structure with interactive nodes and edges
• 🤖 AI-Powered Generation - Generate or fix JSON using Google Gemini AI
• 🔄 Multiple Layouts - Switch between horizontal (LR) and vertical (TB) graph layouts
• 📤 Export & Share - Export JSON files and share visualizations via shareable links
• 🔑 Secure API Key Management - Store your API key locally in browser cache (no server needed)
• 🎨 Dark Theme UI - Modern dark interface with smooth interactions

Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm or yarn

Installation & Local Development

1. Clone the repository:

   git clone https://github.com/blackmoon87/json_map.git
   cd json_map

2. Install dependencies:

   npm install

3. Run the app locally:

   npm run dev

4. Open http://localhost:3000 in your browser

Using the AI Features

Setting Up Your API Key

1. Click the Settings button in the top toolbar
2. Visit Google AI Studio to get your API key
3. Paste your API key in the Settings modal
4. Click Save API Key - it will be stored securely in your browser's local storage

Generating JSON with AI

1. Click the AI Generate button
2. Describe the data structure you want to create
3. The app will generate valid JSON for you to visualize

Fixing Broken JSON

1. Paste broken JSON into the editor
2. Click AI Generate
3. Describe what the JSON should look like
4. The AI will fix and generate proper JSON

Building & Deployment

Deploy to GitHub Pages

The app automatically deploys to GitHub Pages using gh-pages:

npm run deploy

This command:

1. Builds the production bundle
2. Pushes the built files to the gh-pages branch
3. GitHub automatically serves your site at https://[your-username].github.io/json_map/

Manual Build

To build the production version:

npm run build

The built files will be in the dist/ folder.

Technology Stack

• Frontend Framework: React 19 with TypeScript
• Visualization: React Flow
• UI Components: Lucide React Icons
• Styling: Tailwind CSS
• Graph Layout: Dagre
• AI Integration: Google Gemini API
• Build Tool: Vite
• Deployment: GitHub Pages

Project Structure

├── src/
│   ├── components/        # React components
│   │   ├── Editor.tsx     # JSON code editor
│   │   ├── GraphNode.tsx  # Custom graph node
│   │   └── Toolbar.tsx    # Top toolbar with controls
│   ├── services/          # Utility services
│   │   ├── geminiService.ts    # Gemini API integration
│   │   ├── apiKeyManager.ts    # API key storage management
│   │   └── layoutService.ts    # Graph layout calculations
│   ├── App.tsx            # Main application component
│   ├── index.tsx          # Entry point
│   └── constants.ts       # Application constants
├── public/                # Static files
├── vite.config.ts         # Vite configuration
├── tsconfig.json          # TypeScript configuration
└── package.json           # Project dependencies

Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build locally
• npm run deploy - Build and deploy to GitHub Pages

Privacy & Security

• Your API key is stored locally in your browser's localStorage
• No data is sent to any server except Google's Gemini API
• Your JSON data never leaves your browser
• Share links are encoded in the URL with Base64 encoding

License

This project is open source and available under the MIT License.

Contributing

Contributions are welcome! Feel free to:

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

Support

For issues, feature requests, or questions, please open an Issue on GitHub.

---

Built with ❤️ by blackmoon87