JSONHub

A modern, feature-rich JSON data visualization and manipulation tool built with React 19, TypeScript, and cutting-edge web technologies. JSONHub provides multiple visualization modes, advanced editing capabilities, and comprehensive data transformation features in a responsive, theme-aware interface.

✨ Key Features

🔍 Multi-View JSON Visualization

Enhanced Tree View: Hierarchical representation with expandable nodes, search functionality, and keyboard navigation
Interactive Graph View: Node-based visualization powered by React Flow 12 with automatic layout algorithms
Columnar View: Tabular data representation with sortable columns and detailed item inspection
Seamless view switching with preserved data state

📊 Advanced Graph View (React Flow 12)

✨ Performance Optimized: Memoized components and efficient rendering for large datasets
🎨 Native Dark Mode: Full React Flow 12 colorMode integration with theme synchronization
🔄 Smart Layout Algorithms: Automatic Dagre-based positioning with Top-Bottom ↔ Left-Right orientations
🎯 Interactive Navigation: Click-to-zoom, edge navigation, and advanced viewport controls
📱 Responsive Design: Adaptive styling for different screen sizes and devices
⚡ Performance Safeguards: Smart limiting for deeply nested structures (max 10 levels, 20 items per container)
🔍 Advanced Search: Real-time search with node highlighting and auto-expansion
🎛️ Enhanced Controls: Zoom indicators, fit-to-view, and collapse/expand functionality

💻 Professional JSON Editing

Monaco Editor Integration: Full-featured code editor with syntax highlighting
Real-time Validation: Instant JSON syntax validation with detailed error reporting
Format & Minify: One-click JSON formatting and minification
Auto-completion: Intelligent code suggestions and bracket matching
Customizable Editor: Font size, tab size, line numbers, word wrap, and more

📁 Advanced File Management

Multi-file Workspace: Tabbed interface supporting up to 20 concurrent files
Persistent Storage: IndexedDB-based storage with automatic migration from localStorage
Auto-save: Optional automatic saving with configurable delay
File Operations: Create, rename, delete, duplicate files with validation
Import/Export: Support for JSON, CSV, XML, YAML formats
Drag & Drop: Direct file import with format auto-detection

🔄 Data Transformation & Export

Multi-format Support: Convert between JSON, CSV, XML, and YAML
Flexible Export Options: Download data in various formats with custom filenames
Schema Generation: Automatic JSON Schema generation with customizable options
Code Generation: Generate TypeScript interfaces, Python dataclasses, Go structs, and C# classes
Transformation Options: Configurable headers, delimiters, and nested object flattening

🔍 Advanced Analysis Tools

JSON Diff Checker: Side-by-side comparison with syntax highlighting
Schema Validation: Generate and validate against JSON schemas
Data Statistics: Automatic type detection and structure analysis
Search & Filter: Powerful search across all views with keyboard shortcuts

⚙️ Comprehensive Settings

Theme Management: Light, dark, and system theme support
Editor Customization: Font size, tab size, line numbers, word wrap, minimap, and more
Viewer Preferences: Default view, expand depth, data type display
General Settings: Auto-save, exit confirmation, keyboard shortcuts toggle
Import/Export Settings: Backup and restore application preferences

⌨️ Keyboard Shortcuts

Ctrl/Cmd + S: Save files
Ctrl/Cmd + I: Format JSON
Ctrl/Cmd + M: Minify JSON
Ctrl/Cmd + F: Search in current view
Ctrl/Cmd + Z/Y: Undo/Redo operations
Full keyboard navigation in all views

🛠️ Tech Stack

Core Technologies

React 19 - Latest React with concurrent features and improved performance
TypeScript - Full type safety and enhanced developer experience
Vite - Lightning-fast development server and optimized builds
Tailwind CSS 4 - Modern utility-first CSS framework with performance optimizations

Visualization & UI

React Flow 12 (@xyflow/react) - Advanced interactive graph visualization
Monaco Editor - VS Code-powered code editing experience
Radix UI - Accessible, unstyled UI primitives
Lucide React - Beautiful, customizable icons
Dagre - Automatic graph layout algorithms

Data Processing

Papa Parse - Robust CSV parsing and generation
fast-xml-parser - High-performance XML processing
js-yaml - YAML parsing and stringification
AJV - JSON Schema validation

Storage & State

IndexedDB - Client-side persistent storage with automatic migration
React Hooks - Modern state management with custom hooks
Context API - Global settings and theme management

Development Tools

ESLint - Code quality and consistency
TypeScript Compiler - Static type checking
Tailwind CSS - Utility-first styling
Vite Plugins - Enhanced development experience

React Flow 12 Advanced Features

🔥 Native colorMode prop for seamless dark mode support
🚀 Performance optimizations with memoized nodes and efficient rendering
🎯 Advanced viewport controls with useViewport hook and zoom indicators
🎨 CSS variables for dynamic theming and customization
⚡ Optimized layouts with improved Dagre integration and position preservation
🔧 Enhanced node props (width, height, selectable) for better control
🎭 Background patterns with customizable dots and grid variants

🚀 Getting Started

Prerequisites

Node.js 18+ (recommended: latest LTS)
Yarn or npm package manager

Installation

# Clone the repository
git clone https://github.com/your-username/jsonhub.git
cd jsonhub

# Install dependencies
yarn install
# or
npm install

# Start development server
yarn dev
# or
npm run dev

# Build for production
yarn build
# or
npm run build

# Preview production build
yarn preview
# or
npm run preview

Available Scripts

yarn dev        # Start development server with hot reload
yarn build      # Build optimized production bundle
yarn preview    # Preview production build locally
yarn lint       # Run ESLint for code quality checks
yarn type-check # Run TypeScript compiler without emitting files

🏗️ Architecture

JSONHub follows a feature-based architecture for scalability and maintainability:

src/
├── features/           # Feature-based modules
│   ├── json-editor/    # Monaco editor integration
│   ├── json-viewer/    # Multi-view visualization
│   ├── graph-view/     # React Flow graph visualization
│   ├── columnar-view/  # Table-based data display
│   ├── tree-view/      # Hierarchical tree display
│   ├── file-management/# File operations & IndexedDB
│   ├── export/         # Data export functionality
│   ├── import/         # File import handling
│   ├── settings/       # Application configuration
│   ├── schema-generation/ # JSON schema & code gen
│   └── json-diff/      # Diff comparison tools
├── components/         # Shared UI components
├── hooks/             # Custom React hooks
├── lib/               # Utility functions
└── types/             # TypeScript definitions

Key Architectural Principles

Feature isolation: Each feature is self-contained with its own components, hooks, and utilities
Shared utilities: Common functionality in lib/, hooks/, and components/
Type safety: Comprehensive TypeScript coverage
Performance first: Lazy loading, memoization, and efficient state management

⚡ Performance Optimizations

Graph View Performance

Smart node limiting: Max 10 levels depth, 20 items per container
Memoized components: Prevent unnecessary re-renders
Viewport optimization: Only render visible elements for large datasets
Efficient layouts: Dagre integration with position preservation
Search optimization: Debounced search with intelligent highlighting

General Performance

Code splitting: Feature-based lazy loading
Bundle optimization: Tree shaking and dead code elimination
IndexedDB storage: Efficient client-side persistence
Responsive design: Mobile-first approach with performance considerations
Theme optimization: CSS variables for instant theme switching

🤝 Contributing

We welcome contributions! Here's how to get started:

Development Setup

Fork and clone the repository
Install dependencies: yarn install
Start development server: yarn dev
Make your changes following the feature-based architecture
Test thoroughly across different browsers and screen sizes
Run linting: yarn lint
Submit a pull request with a clear description

Contribution Guidelines

Follow the existing architecture: Use the feature-based structure
Maintain type safety: Add proper TypeScript types for new features
Write self-documenting code: Prefer clear naming over comments
Test on multiple devices: Ensure responsive design works properly
Update documentation: Include relevant README updates for new features

Feature Requests & Bug Reports

Issues: Use GitHub issues for bug reports and feature requests
Discussions: Use GitHub discussions for questions and ideas
Security: Report security issues privately via email

📱 Browser Support

Modern browsers: Chrome 90+, Firefox 88+, Safari 14+, Edge 90+
Mobile support: iOS Safari 14+, Chrome Mobile 90+
Features used: ES2020, IndexedDB, CSS Grid, CSS Custom Properties

🔒 Privacy & Security

Local-first: All data processing happens in your browser
No data collection: No analytics, tracking, or data transmission
Secure storage: IndexedDB for local persistence only
Open source: Full transparency with public code repository

📄 License

MIT License - see LICENSE file for details.

🙏 Acknowledgments

React Flow team for the excellent graph visualization library
Monaco Editor for the VS Code-quality editing experience
Radix UI for accessible component primitives
Tailwind CSS for the utility-first CSS framework
Open source community for the amazing ecosystem of tools and libraries

Built with ❤️ by the JSONHub team

JSONHub - Making JSON data visualization simple, powerful, and accessible.

Name		Name	Last commit message	Last commit date
Latest commit History 34 Commits
public		public
src		src
.gitignore		.gitignore
.prettierignore		.prettierignore
.prettierrc		.prettierrc
README.md		README.md
components.json		components.json
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
tailwind.config.js		tailwind.config.js
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts
yarn.lock		yarn.lock

Folders and files

Latest commit

History

Repository files navigation