bhollis / jsonview

A web extension that helps you view JSON documents in the browser.

JSONView

JSONView is a Web extension compatible with Firefox and Google Chrome that helps you view JSON documents in the browser.

• Install for Firefox
• Install for Chrome
• Install for Edge
• There is no version for Safari because it costs $100/year to publish a free extension to the Mac App Store.

Normally, when encountering a JSON document (content type application/json), Firefox simply prompts you to download the view. With the JSONView extension, JSON documents are shown in the browser similar to how XML documents are shown. The document is formatted, highlighted, and arrays and objects can be collapsed. Even if the JSON document contains errors, JSONView will still show the raw text.

Once you've got JSONView installed, check out this example JSON file to see the extension in action!

If you'd like to contribute to JSONView but don't want to code, consider contributing a translation. Copy the existing localization files from src/_locale and fill them in for your own language, then send a pull request. You can do it all from the GitHub interface. There are not many strings to translate!

Keyboard Shortcuts

• Left Arrow - Collapses the json on key up
• Right Arrow - Expands the json on key up

Reporting Issues

Use the GitHub Issue tracker for JSONView to file issues. Pull requests are especially welcome.

Developing JSONView

Before contributing to JSONView, make sure to read the Contributing Guidelines. I appreciate contributions people make to JSONView, but the goal of the extension is to be simple and straightforward, so I frequently reject contributions that add complexity or unnecessary features. Please consider filing an issue before doing any work, so you don't waste time on something I won't accept.

• Install NodeJS and run corepack enable.
• Check out jsonview.
• Run pnpm i inside the jsonview repository.
• Run pnpm start to build the extension.
• In Firefox, go to about:debugging#addons in the address bar, check "Enable add-on debugging", select "Load Temporary Add-on", and choose the jsonview/build-firefox/manifest.json file.
• In Chrome, Edge, etc., go to edge://extensions/, in the address bar, enable "Developer mode", select "Load Unpacked", and choose the jsonview/build-chrome folder.

JSONView makes use of TypeScript. I recommend VSCode for editing the code - it will automatically prompt to install the correct extensions, and will highlight errors. All of the code that makes up the extension itself are in src/.

Common Issues

• JSONView isn't displaying my file as JSON: You are probably not serving the JSON with the "application/json" MIME type.
• Opening a local .json file uses the Firefox default JSON viewer: You need to disable the built-in JSON viewer to use JSONView. Go to "about:config" and set "devtools.jsonview.enabled" to "false".

JSONView is open source software under the MIT license.

Publishing

pnpm start

jsonview-chrome.zip and jsonview-firefox.zip can then be manually uploaded to the extension sites.

• Chrome: https://chrome.google.com/webstore/devconsole/
• Firefox: https://addons.mozilla.org/en-US/developers/addons
• Edge: https://partner.microsoft.com/en-us/dashboard/microsoftedge/overview

jsonview's Issues

Allow alternative JSON mime-types

My motivating example is Webfinger endpoints, which use a MIME type of application/jrd+json. Similar to how RSS uses a MIME type of application/rss+xml.

Here's an example endpoint to test on, from my personal website:
https://konklone.com/.well-known/webfinger?resource=acct:[email protected]

To handle cases like Webfinger, and any other formats that use JSON as their base and so use a new mime-type, I think JSONView should intercept and render anything which uses a Content-Type of the form application/*+json.

Support for text/javascript

Some servers send json with type text/javascript. It would be nice if jsonview could also pick this up.

Thanks,
Allan

Interupts download of large JSON files, declares them malformed.

At least with FF 28 and later, the extension appears to interfere with the download of large JSON files, and then declare the truncated file malformed. When the extension is disabled, the full json file downloads correctly.
The truncation is shown both in the window display, and in the "Page Info" dialog, where the size will vary, but be much shorter than the actual file. E.g. 100K or 200K from a 10M file.
Sample URL to replicate: http://people.mozilla.org/~hwine/tmp/allthethings.json

Become a restartless addon where supported

For Firefox versions that support it, JSONView should be restartless

version 0.6 is not compatible firfox 8.0 beta

Here is the warning of firefox:

Warning: nsIJSON.encode is deprecated.  Please use JSON.stringify instead.
Warning: nsIJSON.decode is deprecated.  Please use JSON.parse instead.

Error Parsing Large JSON Files

I have an API that can generate 5Mb of JSON. Using this plugin in FF 19.0, v0.7 throws:

There was an error parsing the JSON document. The document may not be well-formed.

This seems to occur only on large datasets. I am not sure what the size is where this starts occurring but it does not occur on smaller ones.

Hidden iframes

Don't want it to format json in hidden iframes. They are usually used to 'ajaxify' file uploads and, if response is json, it won't be parsed properly

Add support for base64-encoded images as values

What do you think about adding support for displaying base64-encoded images as vaules? Just like URLs are highlighted the data that looks similar to base64 encoded image can be highlighted and changed to actual image on click (using data:uri).

display newlines

Would it be possible for the browser to interpret and display the newlines in strings rather than showing the "\n"? It would make our responses much more readable.

Some URLs not being displayed

What I expect:

What I get:

Note that it does not even say null. The field just simply doesn't say anything. I'm not sure what causes this to happen, but you can see that the url is not being displayed correctly, possibly because it's oddly constructed. The strange thing is that if I save the raw JSON to file and open that in Firefox, it'll show the links correctly, which is how I got the first screenshot. A fellow coworker of mine suggested that an invisible character might be messing it up somehow.

Oh right, here are the http headers when I curl the server, since that might matter:
< HTTP/1.1 200 OK
< Server: Apache-Coyote/1.1
< Content-Type: application/json;charset=UTF-8
< Content-Length: 2711
< Date: Thu, 20 Mar 2014 22:18:09 GMT

Unfortunately, I don't think I can give the entire JSON body I receive since it might contain data that I'm not actually allowed to share.

Large integers are rounded

JSONView 0.7 rounds large integers:

It converts:

{"ok":true,"result":{"value":9223372036854775807}}

into:

{
    "ok": true,
    "result": {
        "value": 9223372036854776000
    }
}

JSONView's formatter as a standalone JS lib

'd like to have JS library, that I can use in my web application, for user friendly viewing of any JSON data. I think jsonview does a great job, but it's limited to firefox.

Beginner Issue: I downloaded the JSONview add on, but I don't know how to open in browser

I downloaded the JSON view add on, but when I click on a link to open a JSON file, I get the same standard "download" or "save" options. I doubled checked my add ons in my Firefox Add-ons Manager and it shows that I have the add on, but I can't see how to open the file in my browser.

Error parsing large files

This is a dupe of #28 but I'm giving my json files that fail.

I can get jsonview to fail to pretty-print by sending a large enough list of small text fields as json.

In the below example, 381 repeats will not pretty print, but 380 works fine (NB: due to the nature of my app, the size of the list is encoded in the object, that's part of the json).

{"data":[{"text":"There is an issue with the path"},{"text":"There is an issue with the path"},{"text":"There is an issue with the path"},.......................................{"text":"There is an issue with the path"}],"size":381}

I have verified this 380 limit on a mac laptop running Mountain Lion, and someone else's windows desktop running Windows 7.

The only thing I changed from failure to success was the line in the code that generates this json "for (int i = 0; i < 381; i++) {" became "for (int i = 0; i < 380; i++) {"

Playing around a little, assuming that it's a simple text length issue (which I have no particular reason to assume), files of 16375 characters pass, and 16390 fail. This makes me think that 16384 is a magic number.

If more info or the actual files would be helpful, please let me know how to get them to you (I don't think that this text box will let me add that much text). I use your add-on constantly, and I really like it, and I'd love to see this limit removed. Thank you very much.

Rendering incorrect data

I have a couple of cases where json view is rendering data not in the source file.

here is example 1 (_versions.json)

{
    "asset_id": "336541846568177664", 
    "versions": [
        [336541846568177665, "http://aarons-mbp-2011.local/api/assets/336541846568177664/336541846568177665"], 
        [336541849961369600, "http://aarons-mbp-2011.local/api/assets/336541846568177664/336541849961369600"]
    ]
}

When this renders the integer in the fist item in the list is wrong, it's 336541846568177660 see https://dl.dropbox.com/u/11493551/_versions.jpg

This is the item example:

{
    "files": {
        "vulture.jpg": {
            "name": "vulture.jpg", 
            "exif": {}, 
            "tags": [
                "source"
            ]
        }
    }, 
    "updated": {
        "timestamp": "2012-07-17T03:17:08Z", 
        "user": "[email protected]"
    }, 
    "tags": [
        ""
    ], 
    "taxonomy": {}, 
    "related": {}, 
    "id": 336541846568177664, 
    "title": "vulture", 
    "created": {
        "timestamp": "2012-07-17T03:17:08Z", 
        "user": "[email protected]"
    }, 
    "version": 336541846568177665, 
    "storage_app": "reflib", 
    "storage_bucket": "336541846568177666"
}

It renders both the id and version fields as having the value 336541846568177660 see https://dl.dropbox.com/u/11493551/item.jpg

The issue seems to be with handling long integers (the ones that work are strings).

Any thoughts ?

Make the newline char visible

Hello,

I found the '\n\r' char displayed directly instead of replacing by '
'. Could you make this replacement happened, or add an option to it?

Thanks!

JSON data is malformed or not ???

[
{"accountName":"UltraSaver"
,"accountType":"Savings account"
,"accountNumber":{"bank":12,"branch":3099,"stem":1234567,"suffix":51}
,"availableBalance":2000.00}
,
{"accountName":"UltraSaver"
,"accountType":"Savings account"
,"accountNumber":{"bank":12,"branch":3099,"stem":1234567,"suffix":51}
,"availableBalance":2000.00}
]

Json viewer returns partial data for too long Json string

Hi,

We were using this viewer on FF 21.0 and encountered that, when the api response(Json) is too long the viewer breaks and only return partial string. I tried disabling the Add On and the response looks fine..
Hoping you can fix this so i can use the addon back :-) By the way cannot give u the actual Json string to check, but it had character count of 2214957.

Thanks.

Handle text/plain mime types

I'm using mongoDB's http interface to view collections. It sends json as text/plain mime type. It will be great if jsonview can also look at plain/text and display as json if it's in json format (or through a config option).

Firefox 8+ renders JSON as text even when JSONView installed

Moved from: https://code.google.com/p/jsonview/issues/detail?id=91

It seems like Firefox now opens application/json as text by default, which prevents JSONView from kicking in:

https://bugzilla.mozilla.org/show_bug.cgi?id=667533

Is there anything we can do to adjust for this?

Potential fix:
A quick and dirty fix that worked in my testing if you want it:
Cc['@mozilla.org/categorymanager;1'].getService(Ci.nsICategoryManager).deleteCategoryEntry('Gecko-Content-Viewers', 'application/json', false);

Doc error

The link under title https://github.com/bhollis/jsonview#reporting-issues is broken

Support for JSON-LD Content Type

Please also add support for the JSON-LD content type application/ld+json [1].
Currently Firefox still wants to download files delivered with this content type.

[1] http://www.w3.org/TR/json-ld/#application-ld-json

Quotes in links are not escaped, so the <a> tag's href is broken

{ "link": "http://www.google.com/?q=\"quotes\"" }

produces

<div id="json">{
<ul class="obj collapsible">
  <li>
    <span class="prop">
      <span class="q">"</span>link<span class="q">"</span>
    </span>: 
    <a quotes""="" href="http://www.google.com/?q=">
      <span class="q">"</span>
      http://www.google.com/?q=\"quotes\"
      <span class="q">"</span>
    </a>
  </li>
</ul>}
</div>

href should be "http://www.google.com/?q="quotes""
and i guess the \"'s inside the tag should be " aswell

Add support for JSON formatted SPARQL query results

Could you add support for the MIME Type 'application/sparql-results+json'
to JSONView?

Specification:
http://www.w3.org/TR/rdf-sparql-json-res/

Comment 2 by nhumfrey, Dec 30, 2009

dbpedia have a public SPARQL endpoint:
http://dbpedia.org/sparql?query=SELECT+*+WHERE+%7B%3Fs+%3Fp+%3Fo%7D+LIMIT+10&format=json

Static file example:
http://www.aelius.com/njh/tmp/example.srj

Change disclosure indicatores from +/- to arrows

Arrows are cooler.

Drop support for Firefox older than 4.0

Does anybody use those anymore? We could easily go restartless and drop some complicated code.

Do not sort arrays or make it configurable

In Chrome, I was wondering why a certain REST API call returned a JSON encoded array in a particular sort order. When checking out the raw source, I found out the API call returned the array elements in the right order, but JSONView somehow decided to enforce its own sort order, which is pretty annoying in this case.

It doesn't seem to happen in other API services and I haven't discovered what triggers the re-sort, but I would stop re-sorting by default and make it configurable.

Hope this helps,

Patrick

Feature for disabling temporarily

I've a suggestion: a feature for disabling JSON viewer temporarily e.g. through Preferences, Add-on Bar, or directly in the viewer/page. So that, the users can choose "raw view" when they want.

Update link to google code

https://addons.mozilla.org/en-us/firefox/addon/jsonview/developers still has a now-404 link to google code.

Validate JSON when there's a parsing error

Either link to JSLint or embed a JSON validator that can give real error messages.

FF Aurora nightly update breaks JSONview again

extension is no longer compatible and therefore is disabled, and not installable. FFS FF!!

Support for JSON+HAL Content Type

Supporting the application/hal+json content type would be swell.

Provide a button or menu item to force the current page to render as JSON

The idea is to have a button or menu item that will re-display the current
page as if it were served with the "application/json" mime type. That'll be
good for people who have JSON in the wrong content type (see issue 15) and
as a stopgap for the fact that JSONP doesn't work with "text/javascript" yet.

A user has mailed me a patched version that may solve this or provide hints
on a solution.

Comment 1 by project member ben.hollis, Oct 7, 2009

Looking at the patch, I think this should wait till the release after next.

Comment 2 by jauderho, Oct 15, 2009

Yes, please.

This would be very useful indeed. For example, I would like to be able to view the
following as JSON.

http://api.bit.ly/info?version=2.0.1&hash=3j4ir4&login=bitlyapidemo&apiKey=R_0da49e0a9118ff35f52f629d2d71bf07&keys=longUrl

Comment 3 by project member ben.hollis, Jul 18, 2010

jauderho - Clicking that link displays correctly in JSONView - maybe bit.ly fixed their API :-)

Comment 4 by [email protected], Aug 6, 2010

There is more sites with text/html or text/plain instead of application/jason.
Please add the redraw.
Thank you.

Comment 5 by project member ben.hollis, Aug 7, 2010

ruzicka.jan,

I doubt that. But you'll notice this ticket is marked "accepted" - I'll get to it when I get to it, or if somebody sends in an acceptable patch.

Comment 6 by [email protected], Apr 15, 2011

Well, I've been getting json with a text/plain Content-Type from flickr, actually.

http://www.flickr.com/services/rest/?method=flickr.test.echo&format=json&foo=bar&api_key=f9f349c13763706574a6cd368ad46e3d

support Aurora too please

I'm hoping that supporting Aurora 10.0a2 (2011-11-15) is as easy as updating some secret preference file.

JSONView is the first extension after adblock that I look to on upgrading!

Thanks

Use with HAL+JSON

I would like to modify jsonview so that responses with Content-Type: application/json+hal; are rendered using jsonview. Currently, Firefox asks if I would like to download the file.

I have attempted to modify the plugin myself, however, I don't understand firefox addons, so I failed in my first attempt.

I assume this is an easy fix, but I don't know enough about addons to be sure.

"Offline" JSON formatting

It would be nice if JSON View provided a way to submit JSON content "manually" for formatting (instead of just autoformatting JSON resources).

I would see this as a JSON View toolbar icon, that when pressed would open chrome://jsonview/format where users could paste/write JSON content or submit an url and push "format" to have it formatted (much like in this site does)

This Url's response can not format to JSON

http://api.xianguo.com/i/status/get.json?key=36d979af3f6cecd87b89720d3284d420&sectionid=1097834&sectiontype=0&count=20&isThumb=1&isShowContent=1&xianguoaccount=&udid=351554052425338&version=58&devicetype=5

view JSON files from local filesystem?

Hi, would it be possible to drop a local file on to FF and have the plugin recognise it as JSON (I guess by extension - ${filename}.js) and display as JSON?

Support non-"application/json" MIME types

JSONView should be configurable to support nonstandard JSON MIME types in addition to "application/json"

Option to sort keys

It would be nice to be able to sort the keys.... although as this is not how the data comes out it might be worth having a warning banner to say their not in their natural order (if sorting them changes the order).

Standalone JSONview available

I just ported the chrome extension to be a standalone function.

https://github.com/dovy/jsonview-standalone

I love JSONview and now I can use it on my websites. ;)

del

del

Not working for https://ofirehose.com/feed.json

as per subject. I see the plain, uformatted json

Protocol relative URLs are not turned into hyperlink

Not sure how to easily & reliably detect these, but it would be great if protocol-relative URLs (see http://tools.ietf.org/html/rfc3986#section-4.2) could be turned into hyperlinks. For example:

{
    "href": "//www.google.com/",
}

I would expect the html fragment for this link to be:

<a href="//www.google.com/">//www.google.com/</a>

Page jumps in large documents

If you have a large document and try to collapse parts of the json, the page jumps. It would also be great to have an indicator that is a little bit more prominent or an animation.

big numbers are shown wrong

I was just wondering why my programm shows the wrong numbers but turns out its this plugin, which converts the numbers to string in javascript.

Not Work?!

The browser search.json can not be arranged ??
JSONView 0.7 in Firefox 19.

Support JSONP responses

JSONView can already parse JSONP responses, it just needs to handle JavaScript MIME types.

expand/collapse keyboard shortcut

Keyboard shortcut to expand-all or collapse-all arrays/objects.

more content types?

Was wondering whether it would be possible to either open the Content-Type to be anything json not just application/json or to allow multiple content types with extra types user configurable?

Just a thought... because I find this so useful.

BR

Neil