Edit

View formatted JSON

  • Article

Use the JSON viewer to automatically format and highlight JSON responses and files in browser tabs.

The JSON viewer changes the returned JSON data to make it easier to read. Sometimes a web server responds to HTTP requests by returning data encoded as JSON. JSON data can be difficult to read when it's formatted as a single long, concatenated line of text. The same can occur when opening a JSON file from disk.

The JSON viewer improves readability of JSON data in several ways:

  • The JSON syntax is highlighted with different colors.
  • Object properties are displayed on their own lines and indented.
  • Objects can be collapsed or expanded.
  • The JSON viewer matches your operating system's dark or light theme.

The JSON viewer tool is included as an experiment in Microsoft Edge starting with version 110.

Enable the JSON viewer

By default, the JSON viewer isn't enabled. To enable the JSON viewer experiment:

  1. Go to edge://flags.

  2. In the Search flags text field, type JSON viewer.

  3. In the JSON Viewer dropdown menu, select Enabled.

  4. Click the Restart button which appears in the lower right:

    The edge://flags page showing the JSON viewer flag

View reformatted JSON server responses

To view a JSON response from a web server as reformatted JSON:

  1. Open a new tab or window in Microsoft Edge.

  2. Type a URL that returns JSON data in the address bar. For example, use this sample JSON response. You can find more samples of JSON responses at MicrosoftEdge / Demos > json-dummy-data.

  3. Microsoft Edge detects that the returned data is JSON and formats it automatically:

    JSON data returned by a web server, formatted and syntax-highlighted by the JSON viewer

View reformatted JSON files

To view a JSON file stored on your device as reformatted JSON:

  1. Open a new tab or window in Microsoft Edge.

  2. Press Ctrl+O on Windows and Linux, or Command+O on macOS, and then select a JSON file.

  3. Microsoft Edge detects that the file contains JSON data and formats it automatically:

    JSON data stored in a local file, formatted and syntax-highlighted by the JSON viewer

Detect invalid JSON data

JSON data can sometimes be invalid. For example, the following patterns are invalid in JSON:

  • Omitting double quotes around a key name.
  • Having a trailing comma after the last key/value pair.

The JSON viewer applies syntax highlighting to invalid JSON. However, the JSON viewer doesn't format the content, and you can't collapse or expand objects.

You can find information about the invalid syntax in the Console tool, where the JSON viewer reports errors.

To view invalid JSON data:

  1. Open a new tab or window in Microsoft Edge.

  2. Type a URL that returns invalid JSON data in the address bar. For example, use this sample invalid JSON response. You can find other invalid samples of JSON responses at MicrosoftEdge / Demos > json-dummy-data.

  3. Microsoft Edge detects that the file contains invalid JSON data, highlights it, but does not reformats it.

  4. Open the Console tool by pressing Ctrl+Shift+J (Windows, Linux) or Command+Option+J (macOS).

  5. A JavaScript error that indicates where the JSON syntax error is located is shown in the Console tool:

    Invalid JSON, highlighted by not formatted, with a syntax error displayed in the Console tool