{"id":38075207,"url":"https://github.com/hypnguyen1209/json-editor","last_synced_at":"2026-01-16T20:43:20.692Z","repository":{"id":304625947,"uuid":"1019379161","full_name":"hypnguyen1209/json-editor","owner":"hypnguyen1209","description":"A modern, feature-rich JSON data visualization and manipulation tool, process and visualize JSON, YAML, CSV, XML, and TOML data with interactive visualizations, all running locally in your browser","archived":false,"fork":false,"pushed_at":"2025-07-14T09:06:48.000Z","size":229,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-14T11:15:12.121Z","etag":null,"topics":["json","json-editor","json-editor-online","json-viewer"],"latest_commit_sha":null,"homepage":"https://mew.js.cool/json-editor/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hypnguyen1209.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-14T08:34:53.000Z","updated_at":"2025-07-14T09:07:36.000Z","dependencies_parsed_at":"2025-07-14T11:15:19.508Z","dependency_job_id":"8bd3780f-6fe8-4360-a57f-aefe69bf1fcf","html_url":"https://github.com/hypnguyen1209/json-editor","commit_stats":null,"previous_names":["hypnguyen1209/json-editor"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/hypnguyen1209/json-editor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hypnguyen1209%2Fjson-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hypnguyen1209%2Fjson-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hypnguyen1209%2Fjson-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hypnguyen1209%2Fjson-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hypnguyen1209","download_url":"https://codeload.github.com/hypnguyen1209/json-editor/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hypnguyen1209%2Fjson-editor/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28482288,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-16T11:59:17.896Z","status":"ssl_error","status_checked_at":"2026-01-16T11:55:55.838Z","response_time":107,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["json","json-editor","json-editor-online","json-viewer"],"created_at":"2026-01-16T20:43:20.509Z","updated_at":"2026-01-16T20:43:20.677Z","avatar_url":"https://github.com/hypnguyen1209.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# JSON Editor \u0026 Visualizer\n\nA modern, feature-rich JSON data visualization and manipulation tool built with Vue 3, TypeScript, and D3.js. Process and visualize JSON, YAML, CSV, XML, and TOML data with interactive visualizations, all running locally in your browser.\n\n## 📸 Demo\n\n![JSON Editor Demo](demo.jpg)\n\n*Interactive JSON visualization with tree, card, and graph views*\n\n🌐 **[Try Live Demo](https://mew.js.cool/json-editor/)** | 📦 **[Download Latest Release](https://github.com/hypnguyen1209/json-editor/releases/latest)**\n\n## 🏷️ Tech Stack\n\n![JSON Editor](https://img.shields.io/badge/Vue.js-3.4.15-4FC08D?style=flat\u0026logo=vue.js\u0026logoColor=white)\n![TypeScript](https://img.shields.io/badge/TypeScript-5.2.2-3178C6?style=flat\u0026logo=typescript\u0026logoColor=white)\n![Vite](https://img.shields.io/badge/Vite-7.0.4-646CFF?style=flat\u0026logo=vite\u0026logoColor=white)\n![D3.js](https://img.shields.io/badge/D3.js-7.8.5-F9A03C?style=flat\u0026logo=d3.js\u0026logoColor=white)\n\n## ✨ Features\n\n### 🎯 Core Capabilities\n- **Multi-Format Support**: JSON, YAML, CSV, XML, and TOML parsing and formatting\n- **Live Editor**: Monaco Editor with syntax highlighting and auto-completion\n- **File Operations**: Upload files via button or drag-and-drop\n- **Data Validation**: Real-time validation with error reporting\n- **Format Conversion**: Convert between any supported formats\n- **Export Options**: Download data or export visualizations as images\n\n### 📊 Interactive Visualizations\n- **Tree View** (Default): Hierarchical data structure with expandable nodes\n- **Card View**: Modern card-based interface with type badges\n- **Graph View**: Network visualization with interactive physics simulation\n- **Zoom \u0026 Pan**: Navigate large datasets with precision controls\n- **Dark/Light Theme**: Toggle between themes with instant visualization updates\n\n### 🎨 Modern UI/UX\n- **Split-Pane Layout**: Side-by-side editor and visualization\n- **Responsive Design**: Works on desktop, tablet, and mobile\n- **Theme Support**: Beautiful dark and light modes\n- **Professional Typography**: Monospace code fonts for better readability\n- **Smooth Animations**: Hover effects and transitions throughout\n\n### 🔧 Developer Tools\n- **JSON Path Generation**: Right-click any element to copy its JSON path\n- **Data Export**: Multiple export formats (PNG, JSON, etc.)\n- **Sample Data**: Built-in examples to get started quickly\n- **Type Indicators**: Color-coded badges for different data types\n- **Error Handling**: Comprehensive validation and error reporting\n\n### 🔒 Privacy-First\n- **100% Local Processing**: All data stays in your browser\n- **No Server Communication**: Works completely offline\n- **No Data Storage**: Nothing is saved or transmitted\n\n## 🚀 Quick Start\n\n### Installation\n```bash\n# Clone the repository\ngit clone https://github.com/hypnguyen1209/json-editor\ncd json-editor\n\n# Install dependencies\nnpm install\n\n# Start development server\nnpm run dev\n```\n\n### Building for Production\n```bash\n# Build for production\nnpm run build\n\n# Preview production build\nnpm run preview\n```\n\n## 💡 Usage\n\n### Basic Usage\n1. **Upload Data**: Click \"Upload\" or drag-and-drop any supported file format\n2. **Edit Data**: Use the Monaco editor with syntax highlighting\n3. **Visualize**: Switch between Tree, Card, or Graph views\n4. **Export**: Download formatted data or export visualizations\n\n### Advanced Features\n- **Format Conversion**: Select a different format from the dropdown to convert data\n- **JSON Path Copying**: Right-click any element in visualizations to copy its path\n- **Zoom Controls**: Use zoom buttons or mouse wheel in visualization panel\n- **Theme Toggle**: Switch between light and dark modes instantly\n\n### Supported File Formats\n- **JSON** (`.json`) - JavaScript Object Notation\n- **YAML** (`.yaml`, `.yml`) - YAML Ain't Markup Language\n- **CSV** (`.csv`) - Comma-Separated Values\n- **XML** (`.xml`) - eXtensible Markup Language\n- **TOML** (`.toml`) - Tom's Obvious Minimal Language\n\n## 🏗️ Technical Architecture\n\n### Frontend Stack\n- **Vue 3** with Composition API for reactive UI components\n- **TypeScript** for type-safe development\n- **Vite** for fast development and optimized builds\n- **SCSS** for advanced styling capabilities\n- **Pinia** for state management\n\n### Visualization Libraries\n- **D3.js v7** for interactive graph and tree visualizations\n- **Monaco Editor** for advanced code editing capabilities\n- **html2canvas** for image export functionality\n\n### Data Processing\n- **js-yaml** for YAML parsing and stringification\n- **papaparse** for CSV parsing with type inference\n- **xml2js** for XML to JSON conversion\n- **@ltd/j-toml** for TOML format support\n\n## 📁 Project Structure\n\n```\njson-editor/\n├── src/\n│   ├── components/\n│   │   ├── layout/           # Header, Footer components\n│   │   ├── ui/              # Reusable UI components\n│   │   └── visualizations/   # Tree, Card, Graph views\n│   ├── stores/              # Pinia store for state management\n│   ├── styles/              # Global SCSS styles\n│   └── utils/               # Data parsing and export utilities\n├── public/                  # Static assets\n└── package.json            # Dependencies and scripts\n```\n\n## 🎨 Design System\n\n### Color Coding\n- **Strings**: Green (`#7ee787`) - Text data\n- **Numbers**: Orange (`#ffa657`) - Numeric values  \n- **Booleans**: Red (`#ff7b72`) - True/false values\n- **Arrays**: Purple (`#d2a8ff`) - List structures\n- **Objects**: Blue (`#79c0ff`) - Key-value pairs\n- **Null/Undefined**: Gray (`#8b949e`) - Empty values\n\n### Typography\n- **Code Font**: SF Mono, Monaco, Cascadia Code (monospace)\n- **UI Font**: System font stack for optimal performance\n- **Consistent Spacing**: 8px grid system throughout\n\n## 🔄 Key Features in Detail\n\n### File Upload \u0026 Drag-Drop\n- **Multiple Upload Methods**: Button click or drag-and-drop anywhere on the editor\n- **Auto-Format Detection**: Automatically selects correct parser based on file extension\n- **Error Handling**: Clear feedback for unsupported formats or parsing errors\n- **File Info Display**: Shows current filename and validation status\n\n### Monaco Editor Integration\n- **Syntax Highlighting**: Language-specific highlighting for all supported formats\n- **Auto-Completion**: Intelligent suggestions while typing\n- **Error Indicators**: Real-time error highlighting and tooltips\n- **Theme Synchronization**: Editor theme matches application theme\n\n### Interactive Visualizations\n\n#### Tree View (Default)\n- **Hierarchical Structure**: Shows data nesting levels clearly\n- **Expandable Nodes**: Click to expand/collapse any level\n- **Type Badges**: Visual indicators for data types\n- **Path Navigation**: Easy traversal of complex data structures\n\n#### Card View\n- **Modern Layout**: Card-based interface similar to popular tools\n- **Responsive Grid**: Automatically adjusts to container size\n- **Type Indicators**: Color-coded badges for immediate recognition\n- **Hover Effects**: Smooth animations for better user experience\n\n#### Graph View  \n- **Network Visualization**: Shows relationships between data elements\n- **Interactive Physics**: Drag nodes, enable/disable physics simulation\n- **Zoom \u0026 Pan**: Navigate large datasets with mouse controls\n- **Node Selection**: Click nodes to see detailed information\n\n### Export Capabilities\n- **Image Export**: High-quality PNG export of visualizations\n- **Data Download**: Export formatted data in any supported format\n- **JSON Path Copy**: Right-click any element to copy its path\n- **Clipboard Integration**: One-click copying to clipboard\n\n## 🔧 Development\n\n### Available Scripts\n- `npm run dev` - Start development server with hot reload\n- `npm run build` - Build for production\n- `npm run preview` - Preview production build locally\n- `npm run type-check` - Run TypeScript type checking\n- `npm run release` - Create patch release (auto-increment version)\n- `npm run release:minor` - Create minor release\n- `npm run release:major` - Create major release\n\n### Environment Setup\n- **Node.js**: Version 22 or higher required\n- **Package Manager**: npm or yarn\n- **Browser**: Modern browsers with ES2020 support\n\n### GitHub Actions Workflows\n\n#### 🚀 Continuous Integration (CI)\n**File**: `.github/workflows/ci.yml`\n- **Trigger**: Push to main/develop, Pull Requests\n- **Actions**: Install dependencies, type checking, build\n- **Node.js**: v22 (latest LTS)\n- **Artifacts**: Uploads built files for review\n\n#### 📦 Build and Release\n**File**: `.github/workflows/build-and-release.yml`\n- **Trigger**: Version tags (v1.0.0, v2.1.3, etc.) or manual dispatch\n- **Actions**: Build project, create zip archive, GitHub release\n- **Output**: `json-editor-dist.zip` attached to release\n- **Usage**: Perfect for distributing standalone builds\n\n#### 🌐 Deploy to GitHub Pages\n**File**: `.github/workflows/deploy-pages.yml`\n- **Trigger**: Push to main branch or manual dispatch\n- **Actions**: Build and deploy to GitHub Pages\n- **URL**: Accessible at `https://hypnguyen1209.github.io/json-editor/`\n- **Auto-Deploy**: Every commit to main triggers deployment\n\n**⚠️ GitHub Pages Setup Required:**\n1. Go to your repository Settings → Pages\n2. Under \"Source\", select \"GitHub Actions\"\n3. Save the settings\n4. The workflow will automatically deploy on next push\n\n**Alternative Deployment** (if Pages API fails):\n- Use `.github/workflows/deploy-pages-alt.yml`\n- Uses `peaceiris/actions-gh-pages` action\n- Automatically creates `gh-pages` branch\n\n### Creating a Release\n1. **Automatic** (Recommended):\n   ```bash\n   npm run release        # Patch version (1.0.0 → 1.0.1)\n   npm run release:minor  # Minor version (1.0.0 → 1.1.0)\n   npm run release:major  # Major version (1.0.0 → 2.0.0)\n   ```\n\n2. **Manual**:\n   ```bash\n   git tag v1.0.0\n   git push origin v1.0.0\n   ```\n\n3. **GitHub Actions will automatically**:\n   - Build the production version\n   - Create a zip file of the dist folder\n   - Create a GitHub release with changelog\n   - Attach the zip file as a downloadable asset\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create a feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## 📝 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 🙋‍♂️ Support\n\nIf you encounter any issues or have questions:\n1. Check the [Issues](../../issues) page for existing solutions\n2. Create a new issue with detailed information\n3. Include browser version and error messages\n\n## 🎯 Roadmap\n\n### Planned Features\n- **Schema Validation**: JSON Schema validation support\n- **Code Generation**: Generate code templates from data structures\n- **JWT Decoding**: Built-in JWT token decoder\n- **JSONPath Queries**: Advanced data querying capabilities\n- **Diff Viewer**: Compare two JSON structures\n- **Bookmark System**: Save and organize frequently used data\n\n### Performance Improvements\n- **Virtual Scrolling**: Handle extremely large datasets\n- **Worker Threads**: Background data processing\n- **Caching**: Intelligent data caching for better performance\n\n---\n\n**Made with ❤️ using Vue 3, TypeScript, and D3.js**\n\n*Transform your data into beautiful, interactive visualizations with zero server dependencies.*\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhypnguyen1209%2Fjson-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhypnguyen1209%2Fjson-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhypnguyen1209%2Fjson-editor/lists"}