A web application for understanding and visualizing JSON payloads through multiple interactive views.
Editor
- Monaco-powered code editor with syntax highlighting
- Real-time JSON validation and error reporting
- Format and minify JSON with keyboard shortcuts
- Drag and drop file upload support
Visualization Views
- Tree View: Interactive, collapsible tree structure for easy navigation
- Graph View: Force-directed graph visualization to understand data relationships
File Management
- Create, rename, and delete JSON files
- Browser-based persistence using IndexedDB
- Auto-save functionality with debounced updates
- File explorer sidebar with metadata display
Interface
- Dark and light theme support
- Responsive design for all screen sizes
- Status bar with real-time file statistics
- Keyboard shortcuts for common operations
- Next.js 15 - React framework with App Router
- React 19 - UI library
- TypeScript - Type safety
- Monaco Editor - Code editing component
- Tailwind CSS - Styling
- Radix UI - Accessible UI primitives
- Zustand - State management
- Dexie.js - IndexedDB wrapper
- React JSON Tree - Tree visualization
- React Force Graph - Graph visualization
# Clone the repository
git clone https://github.com/thatbeautifuldream/jsonvisualiser.git
# Install dependencies
pnpm install
# Start development server
pnpm run dev
# Build for production
pnpm run buildOpen http://localhost:3000 to view the application.
Contributions are welcome. To contribute:
- Fork the repository
- Create a feature branch
- Make your changes
- Submit a pull request
Please follow existing code conventions and ensure TypeScript type safety.
Built by Milind Mishra | jsonvisualiser.com