Data to View

A professional JSON data visualization tool that converts JSON data into beautiful, interactive tables and graphs.

Demo

Features

• Split-pane Layout: Resizable panels with professional JSON editor and table/graph output
• JSON Editor: Syntax highlighting, line numbers, and active line highlighting (VS Code-like)
• Table View: Structured table display with nested object expansion
• Graph View: Interactive React Flow visualization of JSON structure
• Export Options: CSV, XLSX, PNG, SVG export functionality
• Responsive Design: Works seamlessly on desktop and mobile devices
• Theme Support: Light and dark mode compatibility
• Real-time Updates: Instant conversion as you type or paste JSON

Getting Started

1. Clone the repository
2. Install dependencies: npm install
3. Run the development server: npm run dev
4. Open http://localhost:3000 in your browser

Technologies Used

• Frontend: React with Next.js 14 App Router
• Styling: TailwindCSS with custom components
• JSON Parsing: Built-in JavaScript JSON parser with custom visualization
• Graph Visualization: React Flow for interactive node-based graphs
• Export: HTML2Canvas, jsPDF, and XLSX libraries
• Syntax Highlighting: Prism.js with VS Code-like themes