ShamsJSON 🚀

ShamsJSON is a powerful, feature-rich JSON viewer and editor built with Next.js 15 and modern web technologies. It provides an intuitive interface for formatting, validating, searching, transforming, and visualizing JSON data - perfect for developers and data analysts.

✨ Features

🔧 Core JSON Operations

Format & Validate: Automatically format and validate JSON with syntax highlighting
Import/Export: Load JSON from files or URLs, export formatted results
Copy to Clipboard: Quick copy functionality for formatted JSON

🔍 Advanced Search & Navigation

Smart Search: Search through JSON data with advanced filtering options
JSONPath Queries: Execute JSONPath expressions to extract specific data
Key-Value Navigation: Easy navigation through complex nested structures

🎨 Visualization Tools

Tree Visualization: Interactive tree view of JSON structure
Network Graph: Visualize relationships in your JSON data
Syntax Highlighting: Beautiful code highlighting with Monaco Editor

🔄 Data Transformation

JSON Transforms: Apply custom transformations to your data
Data Manipulation: Edit and modify JSON structures directly
Batch Operations: Perform operations on multiple JSON files

🎯 Developer Experience

Dark/Light Theme: Comfortable viewing in any environment
Responsive Design: Works perfectly on desktop and mobile devices
Keyboard Shortcuts: Efficient navigation with keyboard shortcuts
Error Handling: Clear error messages and validation feedback

🚀 Getting Started

Prerequisites

Node.js 18+
pnpm (recommended) or npm

Installation

Clone the repository

git clone https://github.com/shamscorner/shamsjson.git
cd shamsjson

Install dependencies
```
pnpm install
# or
npm install
```
Run the development server
```
pnpm dev
# or
npm run dev
```
Open your browser Navigate to http://localhost:3000

🛠️ Tech Stack

Framework: Next.js 15 with App Router
Styling: Tailwind CSS + shadcn/ui
Editor: Monaco Editor (VS Code editor)
Visualization: D3.js for data visualization
Type Safety: TypeScript for robust development
Package Manager: pnpm for fast, efficient installs

📁 Project Structure

shamsjson/
├── app/                    # Next.js App Router
│   ├── globals.css        # Global styles
│   ├── layout.tsx         # Root layout with SEO
│   ├── page.tsx           # Home page
│   ├── robots.ts          # SEO robots.txt
│   └── sitemap.ts         # XML sitemap
├── components/            # React components
│   ├── ui/               # shadcn/ui components
│   ├── json-editor.tsx   # Monaco-based JSON editor
│   ├── json-search.tsx   # Search functionality
│   ├── json-tool.tsx     # Main tool component
│   ├── json-transform.tsx # Data transformation
│   ├── json-visualizer.tsx # Tree visualization
│   ├── network-graph.tsx # Network graph visualization
│   └── tree-graph.tsx    # Tree graph component
├── hooks/                # Custom React hooks
├── lib/                  # Utility functions
├── public/               # Static assets
└── styles/               # Additional stylesheets

🎯 Usage Examples

Basic JSON Formatting

Paste your JSON data into the editor
Click "Format JSON" to beautify and validate
Copy the formatted result

Advanced Search

Load your JSON data
Switch to the "Search" tab
Use JSONPath expressions like $.users[*].name to extract specific data

Data Visualization

Load complex JSON data
Navigate to the "Visualize" tab
Explore your data structure in an interactive tree or network view

JSON Transformation

Load your source JSON
Go to the "Transform" tab
Apply custom transformation rules to reshape your data

🔗 API Reference

JSON Editor Component

import JsonEditor from "@/components/json-editor";

<JsonEditor
  value={jsonString}
  onChange={setJsonString}
  language="json"
  theme="vs-dark"
/>;

JSON Visualizer Component

import JsonVisualizer from "@/components/json-visualizer";

<JsonVisualizer data={jsonData} width={800} height={600} />;

🤝 Contributing

We welcome contributions! Please see our Contributing Guidelines for details.

Development Workflow

Fork the repository
Create a feature branch: git checkout -b feature/amazing-feature
Make your changes
Run tests: pnpm test
Commit changes: git commit -m 'Add amazing feature'
Push to branch: git push origin feature/amazing-feature
Open a Pull Request

📝 License

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

🙏 Acknowledgments

Next.js team for the amazing framework
shadcn/ui for the beautiful component library
Monaco Editor for the powerful code editor
D3.js for data visualization capabilities

📞 Support & Contact

Website: shamsjson.com
Issues: GitHub Issues
Discussions: GitHub Discussions

🗺️ Roadmap

Real-time collaboration features
JSON schema validation
Custom theme support
Plugin system for custom transformations
Performance optimizations for large JSON files
Mobile app version
API endpoint for programmatic access

Built with ❤️ by Shams Corner

Star ⭐ this repository if you find it useful!

shamscorner/json-viewer