Beautify JSON

Convert inline/unreadable JSON to well formatted code

Tags: beautify code json

Introduction

This is an online JSON beautifier. It helps to convert un-formatted JSON to a nice JSON structure. This convert tool is powered by Pretty Diff beautifier. You can select to see the result in code view or tree view mode.

How to use this tool?

You can input/paste your JSON code directly into the editor or upload JSON file using the Upload button.

After beautifying/formatting your code, you can download or save/share the result. It will create a link for you to share with others. You can also sign-in using Google/GitHub to save results into your account.

What is JSON?

JSON (JavaScript Object Notation, pronounced /ˈdʒeɪsən/; also /ˈdʒeɪˌsɒn/) is an open standard file format, and data interchange format, that uses human-readable text to store and transmit data objects consisting of attribute–value pairs and array data types (or any other serializable value). It is a very common data format, with a diverse range of applications, such as serving as a replacement for XML in AJAX systems.

Learn more

JSON Syntax

JSON defines only two data structures: objects and arrays. An object is a set of name-value pairs, and an array is a list of values. JSON defines seven value types: string, number, object, array, true, false, and null.

The following example shows JSON data for a sample object that contains name-value pairs. The value for the name "phoneNumbers" is an array whose elements are two objects.

      
{
  "firstName": "Duke",
  "lastName": "Java",
  "age": 18,
  "streetAddress": "100 Internet Dr",
  "city": "JavaTown",
  "state": "JA",
  "postalCode": "12345",
  "phoneNumbers": [
    {
      "Mobile": "111-111-1111"
    }, {
      "Home": "222-222-2222"
    }
  ]
}
      
    

Examples

Unbeautified:

      
{"colors":[{"color":"black","category":"hue","type":"primary","code":{"rgba":[255,255,255,1],"hex":"#000"}},{"color":"white","category":"value","code":{"rgba":[0,0,0,1],"hex":"#FFF"}}]}
      
    

After beautified:

      
{
  "colors": [
    {
      "color": "black",
      "category": "hue",
      "type": "primary",
      "code": {
        "rgba": [
          255, 255, 255, 1
        ],
        "hex": "#000"
      }
    }, {
      "color": "white",
      "category": "value",
      "code": {
        "rgba": [
          0, 0, 0, 1
        ],
        "hex": "#FFF"
      }
    }
  ]
}