Beautify JSON

Introduction

This online JSON beautifier helps you format unstructured JSON into a clean, readable layout. Powered by the Pretty Diff beautifier, it allows you to view the results in either a code view or a tree view for better visualization.

How to Use This Tool

To get started, simply paste your JSON code directly into the editor or upload a JSON file using the **Upload** button. Once the beautification process is complete, you can download the formatted JSON, save it, or share it with others using a unique link. Signing in with Google or GitHub lets you save results to your account for future use.

What is JSON?

JSON (JavaScript Object Notation) is a lightweight, open-standard data format that uses human-readable text to represent data objects consisting of attribute-value pairs and arrays. It is widely used for data interchange, particularly as a simpler alternative to XML in AJAX systems.

JSON’s popularity stems from its simplicity and versatility, making it a go-to format for APIs, configuration files, and other data-sharing tasks. Learn more

JSON Syntax

JSON defines two main structures: objects and arrays.

• **Objects**: A collection of name-value pairs enclosed in curly braces `{}`.
• **Arrays**: A list of values enclosed in square brackets `[]`.

JSON supports seven data types: string, number, object, array, `true`, `false`, and `null`. Below is an example of a JSON object containing name-value pairs. The "phoneNumbers" key holds an array of 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"
    }
  ]
}
      
    

      
{"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"}}]}
      
    

      
{
  "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"
      }
    }
  ]
}