[Feedback] In-browser JSON viewer

[codepo8]

Note

This issue has now been closed. It was used to collect feedback during the early development of the JSON viewer.
If you have feedback about the JSON viewer, please open a new issue on this repository.

---

Please refer to this explainer document for more details on the matter.

Currently when you navigate to a JSON file example in the browser, you get a basic text display that is not giving you much insight.

We're currently investigating replacing this with a collapsible, colour-coded tree view instead.

Currently we're testing the performance implications of this change, and will add more functionality once we are happy with the results.
Please tell us what other functionality you'd like to see in this feature.

[pankajparashar]

I think it will be a great addition to Edge (something I use Firefox exclusively for). I like the fact that you guys are prioritising performance over adding new features early on. I was wondering,

1. How the browser decides when to render JSON? Is it based on the content-type in the Response Headers? What about local JSON files?

2. Is the browser smart enough to detect a plain text document could also be a JSON? I think Firefox currently expects .json extension for local files.
   

3. The Goals section covers most of the features I'm looking for. It'd be nice to have,
   a. Show JSON structure errors (validate JSON with schemas). I usually use the JSON viewer, to manually spot errors.
   b. Remember last used formatting. If someone always prefers seeing JSON as raw text.
   c. Render JSON as table (for suitable data formats)
   d. Minimap of some sorts, to quickly jump into certain parts of the section in a large JSON.
   e. Streaming capability to render large JSONs (as users scroll, the JSON renders on the fly).

4. I'm not a fan of how Firefox renders Arrays. Empty arrays are expectedly rendered with empty square brackets ([]), but array with elements are rendered as indexes as keys. This makes me think, is this really an array or an object? I couldn't gather from your sample s/s, how Edge would render Arrays. So I'm curious to see an example.
   

5. I'd be curious to learn more about the performance considerations. Is there a breaking point beyond which large JSONs are always rendered as plain text. Currently, Firefox can handle JSON files as large as this one. I'm hoping Edge can do better here.

Overall, loved the idea, and cannot wait to get my hands on it! Thanks!

[codepo8]

Thanks so much for your input @pankajparashar - I will bring this up in our next sync.

[avieru]

would be great to get querying/ reporting support in there

https://github.com/discoveryjs/discovery

https://github.com/discoveryjs/jora

[waded]

Yeah, this definitely something I'd like to see native to Edge/DevTools. It's common to add extensions to address the gap, e.g. https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh, however the permission grant needed for such an extension is a concern.

Is it a non-goal for DevTools Network "Preview" of JSON responses to share functionality/UX here, thus "Open JSON in Network Console"?

[itechgroupinc]

I'm excited for this. Currently I have to use other tools to do this, and it would also be nice for this to be something that is used in dev tools when looking up responses to web api requests

[juscla]

I am testing a few IAsyncEnumerable APIs to a web application.
Rendering these APIs works well only when I turn off the JSON Viewer flag in edge.
With this enabled it never renders any information, until I basically kill the stream.

[captainbrosset]

I am testing a few IAsyncEnumerable APIs to a web application. Rendering these APIs works well only when I turn off the JSON Viewer flag in edge. With this enabled it never renders any information, until I basically kill the stream.

Oh, thanks for reporting. Let me actually file a separate bug just for this then, and make sure our dev team sees it. I'll ping you on the new issue when it's opened so you can provide more information if possible.

[c4ldas]

JSON viewer support is a great addition to Edge. One thing I would like to see is to expose the json content as a variable on DevTools console.

As a workaround, I tried the following on the console, which works for smaller outputs (smaller than the visible page):
json = JSON.parse(document.getElementsByClassName("cm-content")[0].innerText)

However, it seems for bigger JSONs (when scrollbar exists), the page is rendered as we scroll it, not allowing to read the entire json and giving the error Unexpected end of JSON input at JSON.parse

[captainbrosset]

This is excellent feedback. I'll make sure the team knows about it and tracks it on our internal backlog.

[andersonpimentel]

Search (Ctrl+F) on a JSON document seems to be restricted to the portion visible on screen.

[captainbrosset]

Thanks for reporting this. This is a known issue that's currently being worked on by the team. We're hoping to deploy a fix for this soon. Thanks again!

[siimots]

If JSON is:
[]

Then nothing (empty row 1) is shown on Edge JSON viewer.

Only in view-source you can see []

macOS:
Version 117.0.2045.47 (Official build) (arm64)

Windows:
Version 117.0.2045.47 (Official build) (64-bit)

[captainbrosset]

Great find. Thanks for reporting. I'll log a bug for our team to fix.

[imba-tjd]

I have similar issue as siimots.

1

is a valid json. However edge can't show it.

[siimots]

Some cases when nothing is shown but is valid json:
1, true, {}, []

[captainbrosset]

Thanks, adding these cases to the bug I filed. Will keep everyone updated of any progress toward a fix.

[brezelman]

The syntax highlighting is broken after ~ 27 lines for me. The JSON is valid.
On another computer I see it flicker lines 27+ every time I reload the file, but it's being highlighted correctly after that.

[imba-tjd]

It cannot do full search. For example ["aaa", "aaa", ...] if there are 200 "aaa", use Ctrl+F to search aaa, it won't show xxx/200

[captainbrosset]

Thanks for filing this. Let me create a new issue with this so we can properly track it.

I'll also close this issue since this general feedback request isn't very useful any longer. It's better if people open new issues now that the tool has been live for a while.

[captainbrosset]

Note

This issue has now been closed. It was used to collect feedback during the early development of the JSON viewer.
If you have feedback about the JSON viewer, please open a new issue on this repository.

[MychellSantos]

Someone thought I might have my favorite JSON extension installed in the browser and NOT WANT to use the default one? How can I disable that?

[captainbrosset]

To disable the JSON viewer, follow these steps:

you can do so by following these steps:

1. Open a new tab and go to edge://flags.
2. In the search box at the top of the flags page, search for json viewer.
3. Change the flag to Disabled and then restart Edge.

[c4ldas]

It used to have the flag to disable it, but it was removed, so no json viewer flag anymore. To disable it, you have to add the following on the Edge shortcut:

--disable-features=msEdgeJSONViewer

It will look like this:
"C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe" --profile-directory=Default --disable-features=msEdgeJSONViewer

[MychellSantos]

The two approaches were frustrated.
The first one, the flag does not appear.
And the second one, defined as a parameter, also does not work.
Edge for Business Version 123.0.2420.81 (64 bits)

[c4ldas]

The two approaches were frustrated. The first one, the flag does not appear. And the second one, defined as a parameter, also does not work. Edge for Business Version 123.0.2420.81 (64 bits)

Maybe it is related to Edge for Business, because I'm using Edge Version 123.0.2420.81 (Official build) (64-bit) and it is working fine on my side.

Without the flag:

With the flag:

You need to close all instances of the browser after adding the flag, otherwise it won't work (sometimes there are some Edge processes left on task manager even after closing all Edge windows)

Check on edge://version > Command-line and see if the flag is there:

[captainbrosset]

The first one, the flag does not appear.

Sorry about this. I just remember that we have a bug on file at the moment whereby the flag got removed accidentally, but is being added again. See #238

[MychellSantos]

For some reason, the command "--profile-directory=Default --disable-features=msEdgeJSONViewer" did not work.

Restarted and killed all instances."

[c4ldas]

For some reason, the command "--profile-directory=Default --disable-features=msEdgeJSONViewer" did not work.

Restarted and killed all instances."

Just to make it clear, The option --profile-directory=Default is not part of the flag, I just showed it in there because it was a full copy-paste from my shortcut.
Your browser seems to be running with --no-startup-window (aka Startup boost on Settings), which keeps it running on windowless mode.
Unfortunately, I don't know what to suggest anymore. The only option left would be rebooting the computer.

[MychellSantos]

In version 125.0.2535.85, it was possible to list the flag to disable the function and use the desired JSON viewer.