JSON Viewer

An interactive web-based tool that visualizes JSON data as navigable node graphs. Paste or edit JSON in a syntax-highlighted editor and instantly see it rendered as a structured, zoomable graph.

Features

• Interactive Graph Visualization — JSON objects and arrays rendered as color-coded, draggable nodes using React Flow
• Live Editor — CodeMirror-based JSON editor with syntax highlighting, bracket matching, and VS Code dark theme
• Live Transform — Graph updates in real time as you type (with debounce)
• Search & Navigate — Full-text search across all nodes with keyboard navigation (Ctrl+K)
• Copy Node Paths — Click any node to copy its path in JavaScript, Python, PowerShell, jq, or C#
• Flexible Layout — Toggle between left-to-right and top-to-bottom graph layouts
• Auto Formatting — Format JSON with Ctrl+Shift+F
• Resizable Panels — Drag the divider between editor and graph
• Persistence — Editor contents saved to localStorage across sessions
• Smart Scaling — Automatically limits depth for very large JSON (1000+ nodes)

Tech Stack

Layer	Technology
Framework	React 19, TypeScript
Build	Vite
Styling	Tailwind CSS
Graph	React Flow (@xyflow/react), Dagre layout
Editor	CodeMirror (@uiw/react-codemirror)
State	Zustand
Layout	Allotment (split panes)

Getting Started

Prerequisites

• Node.js 18+
• npm

Install

git clone <repo-url>
cd json-viewer
npm install

Development

npm run dev

Opens at http://localhost:5173 with hot module replacement.

Production Build

npm run build
npm run preview   # preview the build locally

Lint

npm run lint

Keyboard Shortcuts

Shortcut	Action
Ctrl+Shift+F	Format JSON
Ctrl+K	Focus search
Enter	Next search match
Shift+Enter	Previous search match
Escape	Clear search

Project Structure

src/
├── components/
│   ├── EditorPanel/      # JSON code editor + toolbar
│   ├── GraphPanel/       # React Flow canvas, nodes, edges, search
│   └── Toast.tsx         # Toast notifications
├── lib/
│   ├── jsonToGraph.ts    # JSON → graph node/edge conversion
│   ├── layoutGraph.ts    # Dagre hierarchical layout
│   ├── calculateNodeSize.ts
│   └── pathLanguages.ts  # Path formatters (JS, Python, PS, jq, C#)
├── store/
│   └── useAppStore.ts    # Zustand global state
├── types/
│   └── index.ts
├── App.tsx
├── main.tsx
└── index.css