CodeSnippet JSON Viewer

Transform JSON into code - A powerful JSON viewer with real-time code snippet generation for multiple programming languages.

Features

Core Features

• JSON Pretty Print - Format and beautify JSON with proper indentation
• Tree View - Interactive collapsible tree structure with type indicators
• Table View - Display array data in sortable table format with CSV export
• Code Snippet Generation - Generate language-specific code to access JSON paths
• Search & Filter - Real-time search highlighting across JSON structure
• Dark/Light Mode - Toggle between themes for comfortable viewing

Unique Features

• 12+ Language Support - JavaScript, Python, PHP, Ruby, Go, Java, C#, Rust, Swift, Kotlin, jq, JSONPath
• One-Click Copy - Copy entire JSON, specific nodes, or code snippets instantly
• No Registration Required - Start using immediately without any sign-up
• Client-Side Processing - All processing happens in your browser for privacy and speed

Quick Start

Development

npm install
npm run dev

Production Build

npm run build

Deploy to Vercel

npx vercel

Technology Stack

• Frontend: React 18 + Vite
• Styling: Tailwind CSS
• State Management: Zustand
• Icons: Lucide React
• Deployment: Vercel/Netlify

Usage

1. Paste JSON: Enter or paste your JSON data in the left panel
2. View Options: Choose between Tree, Table, or Raw view
3. Get Code: Click on any node to get code snippets in multiple languages
4. Search: Use the search bar to find specific keys or values
5. Export: Export table data to CSV format

Code Snippet Example

Click on any JSON path to get instant code snippets:

// JavaScript
data.users[0].email

// Python
data['users'][0]['email']

// Go
data.Users[0].Email

Browser Support

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)

License

MIT

Contributing

Pull requests are welcome! For major changes, please open an issue first.