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/⌘+D |
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
- JSONL & NDJSON file support
- Local files - Open .json files directly
- Context menu - Right-click selected text → "View JSON Snippet"
- Image URL preview on hover in tree view
- 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
npm test # Run E2E tests
npm run test:devtools # Test DevTools panel
npm run doc # Generate documentation & screenshots
./package.sh # Package for Chrome Web Store# Run all tests
npm test
# Test specific features
node tests/e2e/editor-test.mjs
node tests/e2e/devtools-test.mjs- 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.