Transform raw JSON into beautifully formatted, interactive documents. The browser extension that makes JSON readable.
Tired of staring at raw JSON walls of text? JSONView automatically beautifies JSON documents in your browser with syntax highlighting, collapsible sections, and smart formatting. Install once, view JSON forever—no more downloads, no more confusion.
When you encounter a JSON file (served with application/json content type), JSONView instantly formats and highlights it, making it easy to explore deeply nested structures. Perfect for API developers, DevOps engineers, and anyone working with JSON data.
Get JSONView for your browser:
| Browser | Link |
|---|---|
| Edge | Install from Edge Add-ons |
Note on Safari: Safari charges $100/year to publish extensions to the App Store, making a free version unfeasible.
- 🎯 Automatic Detection — No setup required. JSON files are detected and formatted automatically
- 🌈 Syntax Highlighting — Color-coded syntax makes it easy to spot values, keys, and data types at a glance
- 📁 Collapse & Expand — Fold/unfold nested objects and arrays to focus on what matters
- 🛡️ Error Tolerant — Even malformed JSON displays readable raw text so you can debug issues
- ⚡ Lightning Fast — Minimal overhead means instant formatting—no waiting, no bloat
- ⌨️ Keyboard Navigation — Use arrow keys to navigate and control folding (see Keyboard Shortcuts)
- 🌍 Multilingual — Available in 15+ languages to support developers worldwide
- 📦 Lightweight — Small file size and efficient code means no performance impact on your browser
| Key | Action |
|---|---|
| ← Left Arrow | Collapse JSON on key up |
| → Right Arrow | Expand JSON on key up |
Why this happens: Your server isn't sending the Content-Type: application/json HTTP header.
How to fix it:
- Ensure your web server or API is configured to send
Content-Type: application/json - For local files, you may need a local server (try
python -m http.serverorpnpm tests) - Check your server's MIME type configuration
Why this happens: Firefox's built-in JSON viewer (devtools.jsonview) takes precedence over extensions.
How to fix it:
- Type
about:configin the address bar - Search for
devtools.jsonview.enabled - Toggle it to
false - Reload your JSON pages
# Clone the repository
git clone https://github.com/chintan9/jsonview.git
cd jsonview
# Enable pnpm with corepack (if not already installed)
corepack enable
# Install dependencies
pnpm install
# Build the extension in watch mode
pnpm start
# In another terminal, run the test server
pnpm testsAfter running pnpm start, you'll have built extensions in build-chrome/ and build-firefox/.
Firefox Debugging:
- Navigate to
about:debugging#addons - Check the "Enable add-on debugging" checkbox
- Click "Load Temporary Add-on"
- Select the
build-firefox/manifest.jsonfile - The extension will reload automatically when you save changes
Chrome, Edge, and Chromium-based Browsers:
- Open
chrome://extensions/(oredge://extensions/) - Enable "Developer mode" (toggle in top-right corner)
- Click "Load Unpacked"
- Select the
build-chromefolder - The extension will reload automatically when you save changes
jsonview/
├── src/ # TypeScript source files
│ ├── viewer.ts # Main UI and display logic
│ ├── background-*.ts # Browser-specific background scripts
│ ├── content.ts # Content script for JSON detection
│ ├── jsonformatter.ts # JSON parsing and formatting engine
│ └── _locales/ # Translation files
├── tests/ # JSON test files for manual testing
├── build-chrome/ # Compiled Chrome extension (auto-generated)
├── build-firefox/ # Compiled Firefox extension (auto-generated)
└── tsconfig.json # TypeScript configuration
- TypeScript — Type-safe JavaScript prevents bugs and makes refactoring easier
- VS Code — Perfect for extension development with built-in debugging and auto-suggestions
- pnpm — Fast, disk-efficient package manager that's faster than npm or yarn
- Rolldown — Modern JavaScript bundler for optimized builds
We welcome contributions! JSONView's philosophy is simplicity first—we keep the extension lightweight and focused. Before you start:
- Check Contributing Guidelines — This explains our design philosophy
- Open an issue first — Discuss your idea to ensure it aligns with the project vision
- Don't worry if we decline feature requests—we just want to keep this extension lean and focused
- Code — Bug fixes and simple enhancements are always welcome
- Translations — Help translate JSONView to more languages:
- Copy files from
src/_locales/en/to create a new language folder - Translate the strings and submit a pull request
- No coding experience needed—just GitHub!
- Copy files from
- Issues & Testing — Report bugs, suggest improvements, or help test new features
- Documentation — Help improve this README or other docs
JSONView is open source under the MIT License. See license.txt for details.
This project is a fork of the original JSONView by @bhollis.
The original JSONView extension laid the foundation for this project and continues to serve thousands of developers. We're grateful for the excellent work and open source spirit that made this possible. If you're looking for the original project, visit github.com/bhollis/jsonview.
This fork maintains the core mission: keeping JSON viewing simple, fast, and accessible to everyone.
Encountered a bug? Have an idea for improvement?
➜ Open an issue on GitHub — Be as detailed as possible, including your browser version and the problematic JSON if applicable.
Pull requests are especially welcome! If you have a fix or improvement ready, we'd love to review it.