• 🎨 Professional Code Editor - Powered by Monaco Editor (VS Code kernel)
• 📊 Interactive Visualization - Graph and tree view powered by ReactFlow
• 🔄 Real-time Comparison - Side-by-side JSON diff viewer
• 🤖 AI-Powered Fix - Intelligent JSON format error correction
• ✏️ Inline Editing - Double-click nodes to edit values directly
• 🎯 Click to Locate - Click visualization nodes to jump to code position
• 🌓 Dark Theme - Modern dark UI with smooth animations
• 📱 Responsive Layout - Resizable split panels

• React 19 - Latest React with improved performance
• TypeScript - Type-safe development
• Vite - Lightning-fast build tool

• Monaco Editor - Professional code editing experience
• ReactFlow - Interactive node-based visualization
• Zustand - Lightweight state management
• json-to-ast - Accurate JSON AST parsing
• Tailwind CSS - Utility-first styling
• Lucide React - Beautiful icon library

• Node.js >= 18
• npm or pnpm

# Clone repository
git clone https://github.com/YOUR_USERNAME/json-visualizer.git
cd json-visualizer

# Install dependencies
npm install

# Start dev server
npm run dev

Visit http://localhost:5173

npm run build

Output will be in dist/ directory.

Click the button above or:

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel

• Graph View: Interactive node-graph powered by ReactFlow
• Tree View: Hierarchical JSON structure explorer

• Monaco Editor with syntax highlighting
• Auto-completion and error detection
• Real-time validation

• Automatically detect JSON format errors
• AI suggests fixes with explanations
• Side-by-side diff view for changes

• Compare two JSON structures
• Highlight differences
• Professional diff editor

• Click nodes to locate in source code
• Double-click to edit values inline
• Drag to resize panels

MIT License

• 🎨 专业代码编辑器 - 基于 Monaco Editor（VS Code 内核）
• 📊 交互式可视化 - ReactFlow 驱动的图谱和树状双视图
• 🔄 实时对比功能 - 并排 JSON 差异对比查看
• 🤖 AI 智能修复 - 智能检测并修复 JSON 格式错误
• ✏️ 行内编辑 - 双击节点直接修改值
• 🎯 点击定位 - 点击可视化节点跳转到代码位置
• 🌓 暗黑主题 - 现代化暗黑 UI 与流畅动画
• 📱 响应式布局 - 可调整大小的分屏面板

• React 19 - 最新 React 版本，性能更优
• TypeScript - 类型安全开发
• Vite - 闪电般快速的构建工具

• Monaco Editor - 专业级代码编辑体验
• ReactFlow - 交互式节点可视化
• Zustand - 轻量级状态管理
• json-to-ast - 精确的 JSON AST 解析
• Tailwind CSS - 实用优先的样式系统
• Lucide React - 精美图标库

• Node.js >= 18
• npm 或 pnpm

# 克隆仓库
git clone https://github.com/YOUR_USERNAME/json-visualizer.git
cd json-visualizer

# 安装依赖
npm install

# 启动开发服务器
npm run dev

访问 http://localhost:5173

npm run build

构建产物将输出到 dist/ 目录。

点击上方按钮一键部署，或使用 CLI：

# 安装 Vercel CLI
npm i -g vercel

# 部署
vercel

• 图谱视图：ReactFlow 驱动的交互式节点图
• 树状视图：层次化 JSON 结构浏览器

• Monaco Editor 带语法高亮
• 自动补全与错误检测
• 实时验证

• 自动检测 JSON 格式错误
• AI 提供修复建议和解释
• 并排对比查看修改内容

• 比较两个 JSON 结构
• 高亮显示差异
• 专业 Diff 编辑器

• 点击节点定位到源代码
• 双击节点行内编辑值
• 拖拽调整面板大小

MIT License