Transform raw JSON into something beautiful.
A high-performance Chrome extension that makes JSON readable, navigable, and editable - right in your browser.
Install from Chrome Web Store (Recommended)
Or load from source:
- Clone:
git clone https://github.com/kunalbabre/JsonViewer.git - Open
chrome://extensions/ - Enable "Developer mode"
- Click "Load unpacked" and select the folder
Switch between views instantly with a single click:
| View | Description |
|---|---|
| Tree | Collapsible nodes with syntax highlighting. Perfect for exploring nested structures. |
| Editor | Full-featured JSON editor with line numbers, formatting, and validation. |
| Schema | Visualize data types and structure at a glance. |
| YAML | Instant JSON-to-YAML conversion for config files. |
| Raw | Original JSON string with easy copy option. |
Expand and collapse nodes to explore your JSON structure
Edit JSON directly with syntax highlighting and line numbers
Understand your data structure with type annotations
View JSON converted to YAML format
Find what you need instantly:
- Search across keys and values
- Real-time highlighting as you type
- Navigate matches with Enter / Shift+Enter
- Regex support for advanced queries
| Action | Shortcut | Description |
|---|---|---|
| Copy | Ctrl/⌘+C |
Copy JSON to clipboard |
| Save | Ctrl/⌘+S |
Download as .json file |
| Format | Alt+Shift+F |
Pretty-print with indentation |
| Find | Ctrl/⌘+F |
Focus search input |
| Theme | Ctrl/⌘+T |
Toggle light/dark mode |
Expand or collapse all nodes to a specific depth level (1-5).
A dedicated JSON Viewer panel in Chrome DevTools lets you:
- Monitor network requests with JSON responses
- Click any request to view formatted JSON
- Filter requests by URL or content type
- Paste JSON manually for quick viewing
Built for speed with large files:
| Feature | Benefit |
|---|---|
| Lazy rendering | Only visible nodes hit the DOM |
| Batched processing | Prevents UI blocking on large files |
| View caching | Instant tab switching |
| Virtual scrolling | Handles 100,000+ nodes smoothly |
Benchmark (5.5MB JSON file):
- Initial render: ~12ms (87% faster than naive approach)
- DOM nodes: 90% reduction via lazy loading
- Memory: ~3MB vs ~32MB traditional
- Auto-detects JSON in browser tabs
- Local files - Open .json files directly
- Context menu - Right-click selected text → "View JSON Snippet"
- Light & dark themes - Matches system preference
- 100% offline - No data sent anywhere
| Shortcut | Action |
|---|---|
Ctrl/⌘ + F |
Focus search |
Enter |
Next search match |
Shift + Enter |
Previous search match |
Ctrl/⌘ + C |
Copy JSON |
Ctrl/⌘ + S |
Save to file |
Ctrl/⌘ + T |
Toggle theme |
Alt + Shift + F |
Format JSON (Editor) |
Ctrl/⌘ + Enter |
Apply changes (Editor) |
JSON Viewer works 100% offline. Your data is processed locally and never sent anywhere. No tracking. No analytics. No servers.
JsonViewer/
├── manifest.json # Extension manifest (v3)
├── src/
│ ├── background.js # Service worker
│ ├── content.js # Page injection
│ ├── styles.css # Global styles
│ ├── ui/ # UI components
│ │ ├── Viewer.js # Main controller
│ │ ├── TreeView.js # Tree view
│ │ ├── EditorView.js # Editor view
│ │ ├── SchemaView.js # Schema view
│ │ ├── YamlView.js # YAML view
│ │ ├── Toolbar.js # Toolbar
│ │ └── Icons.js # SVG icons
│ ├── utils/ # Utilities
│ └── devtools/ # DevTools panel
├── tests/ # E2E tests
├── scripts/ # Build scripts
└── docs/ # Documentation
Testing
| Command | Description |
|---|---|
npm test |
Run unit tests |
npm run test:e2e |
Run E2E tests |
npm run test:full |
Run full test suite |
Code Quality
| Command | Description |
|---|---|
npm run typecheck |
TypeScript type checking |
npm run lint |
Run ESLint |
Documentation & Media
| Command | Description |
|---|---|
npm run doc |
Generate screenshots |
npm run record |
Record demo video |
npm run upload |
Upload to YouTube |
Release
| Command | Description |
|---|---|
npm run package |
Package for Chrome Web Store |
npm run clean |
Remove build artifacts |
Record demo videos and upload to YouTube automatically:
npm run record # Record with subtitles
npm run record -- --voice # Record with AI voiceover
npm run upload # Upload to YouTubePrerequisites: FFmpeg, Playwright (npx playwright install msedge)
See Video Guide for complete setup instructions including:
- ElevenLabs AI voice configuration
- YouTube API OAuth setup
- Troubleshooting
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Make your changes
- Test thoroughly with various JSON files
- Commit:
git commit -m 'Add amazing feature' - Push:
git push origin feature/amazing-feature - Open a Pull Request
Kunal Babre - @kunalbabre
Free. Open source. No ads. Just JSON, done right.