JSON Visual Flow Editor

English | 简体中文

A lightweight frontend tool for visualizing JSON as interactive diagrams.

Demo:

• https://simon9997.github.io/json-parser-visualize/

Features

• Standard JSON parsing (JSON.parse)
• Three views:
  • Vertical flow
  • Horizontal flow (field-anchored connectors)
  • Classic tree
• Interactions:
  • Collapse / expand nodes (default: collapsed except root)
  • Collapse all / expand all
  • Array-path-only filter
• Canvas controls:
  • Zoom (20% ~ 200%)
  • Pan
  • Canvas fullscreen mode

Quick Start

cd <project-root>
./start.sh

Open:

• http://127.0.0.1:8080

Deployment

This is a static frontend project and can be deployed to any static host.

1) Local static server

cd <project-root>
python3 -m http.server 8080

2) Nginx

1. Upload files to a web root (example: /var/www/json-tree-parser):

• index.html
• style.css
• script.js
• jsonTreeCore.js

2. Nginx config:

server {
    listen 80;
    server_name your-domain.com;

    root /var/www/json-tree-parser;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

3. Reload:

nginx -t
sudo systemctl reload nginx

3) Docker

FROM nginx:stable-alpine
WORKDIR /usr/share/nginx/html
COPY index.html style.css script.js jsonTreeCore.js ./
EXPOSE 80

docker build -t json-tree-parser:1.0.0 .
docker run -d --name json-tree-parser -p 8080:80 json-tree-parser:1.0.0

4) Vercel / Netlify

• Import the repository
• Leave Build Command empty
• Set Output Directory to .

Test

npm test

More

• Detailed deployment guide: DEPLOYMENT.md