Transform complex JSON data into beautiful, interactive visualizations
A modern, intuitive JSON viewer that transforms complex JSON data into a visually appealing, easily navigable interface. Perfect for developers, data analysts, and anyone working with JSON data.
| Feature | Description |
|---|---|
| 🧠 Smart JSON Parsing | Real-time syntax validation with clear error messages |
| 🌳 Interactive Tree View | Collapsible/expandable nodes with smooth animations |
| 📥 Multiple Input Methods | Paste, upload, or drag & drop JSON files |
| 🔍 Advanced Search | Global search with real-time highlighting and navigation |
| 🎨 Theme Support | Dark/light/system theme with automatic detection |
| 📋 Copy Functionality | Copy values and JSON paths with one click |
| 🖥️ Fullscreen Mode | Native browser fullscreen for immersive JSON viewing |
- 📦 Node.js 16+
- 🔧 npm or yarn
# 1️⃣ Clone the repository
git clone <repository-url>
cd json-viewer
# 2️⃣ Install dependencies
npm install
# 3️⃣ Start development server
npm run dev# Build the application
npm run build
# Preview the build
npm run previewVisit our hosted version at json.nonstopio.com to try it out instantly!
| Step | Action | Description |
|---|---|---|
| 1️⃣ | Input JSON | Paste JSON directly, upload a .json file, or drag & drop |
| 2️⃣ | Explore | Click to expand/collapse nodes, use search to find specific keys/values |
| 3️⃣ | Fullscreen | Click the maximize button for immersive viewing experience |
| 4️⃣ | Copy | Hover over nodes to copy values or JSON paths |
| 5️⃣ | Customize | Toggle between light/dark themes or use system preference |
| Shortcut | Action |
|---|---|
Ctrl+Enter / Cmd+Enter |
Parse JSON |
Ctrl+F / Cmd+F |
Open search |
Enter |
Next search result |
Shift+Enter |
Previous search result |
Escape |
Clear search / Exit fullscreen |
| Category | Technology |
|---|---|
| 🎨 Frontend | React 18 + TypeScript |
| 💄 Styling | Tailwind CSS with custom components |
| 🎭 Icons | Lucide React |
| ⚡ Build Tool | Vite |
| 🚀 Deployment | Hosted at json.nonstopio.com |
📦 src/
├── 🧩 components/ # React components
├── 🪝 hooks/ # Custom React hooks
├── 📝 types/ # TypeScript type definitions
├── 🔧 utils/ # Utility functions and services
└── 🎯 App.tsx # Main application component
We welcome contributions! Here's how to get started:
| Step | Command | Description |
|---|---|---|
| 1️⃣ | Fork |
Fork the repository on GitHub |
| 2️⃣ | git checkout -b feature/amazing-feature |
Create a feature branch |
| 3️⃣ | git commit -m 'Add amazing feature' |
Commit your changes |
| 4️⃣ | git push origin feature/amazing-feature |
Push to the branch |
| 5️⃣ | Open PR |
Open a Pull Request |
