[{"data":1,"prerenderedAt":317},["ShallowReactive",2],{"tool-content-json-formatter":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":7,"slug":9,"faqs":10,"body":32,"_type":310,"_id":311,"_source":312,"_file":313,"_stem":314,"_extension":315,"sitemap":316},"\u002Ftools\u002Fjson-formatter","tools",false,"","Json Formatter","json-formatter",[11,14,17,20,23,26,29],{"q":12,"a":13},"What is a JSON formatter?","A JSON formatter (also called a JSON beautifier or prettifier) takes raw or minified JSON text and adds proper indentation and line breaks to make it human-readable. It's one of the most commonly used developer tools when working with APIs, configuration files, and data interchange.",{"q":15,"a":16},"Is it safe to paste my JSON data into an online formatter?","Yes — AnotterToolbox's JSON formatter runs entirely in your browser using JavaScript. Your data is never sent to any server, stored, or logged. You can safely paste API responses, configuration files, and even sensitive data without privacy concerns.",{"q":18,"a":19},"What is the difference between formatting and validating JSON?","Formatting (or beautifying) just adds indentation and whitespace to make JSON readable — it doesn't check if the structure is correct. Validating checks whether the JSON follows the correct syntax rules. AnotterToolbox does both simultaneously — it formats valid JSON and shows an error message if the syntax is invalid.",{"q":21,"a":22},"What causes \"invalid JSON\" errors?","The most common causes are trailing commas (not allowed in JSON), single quotes instead of double quotes around strings, unquoted keys, missing commas between values, and comments (JSON doesn't support comments). Our formatter highlights exactly where the error occurs.",{"q":24,"a":25},"What is the difference between JSON and JavaScript objects?","JSON (JavaScript Object Notation) is a text format for data interchange and is a subset of JavaScript. The key differences are that JSON requires double quotes around all keys and string values, doesn't support functions or undefined values, and doesn't allow trailing commas. A JavaScript object is a runtime data structure, while JSON is always a string.",{"q":27,"a":28},"Can I format large JSON files?","Yes — since everything runs in your browser, there's no file size limit imposed by a server. Very large files (10MB+) may be slow depending on your device's performance, but there are no artificial restrictions.",{"q":30,"a":31},"What does \"minify\" mean for JSON?","Minifying JSON removes all unnecessary whitespace, newlines, and indentation to produce the smallest possible valid JSON string. This is useful when sending JSON over a network (smaller payload = faster transfer) or storing it in a database where compactness matters.",{"type":33,"children":34,"toc":303},"root",[35,44,50,55,68,113,119,124,170,176,186,196,206,216,222,234,275,285],{"type":36,"tag":37,"props":38,"children":40},"element","h2",{"id":39},"what-is-json",[41],{"type":42,"value":43},"text","What is JSON?",{"type":36,"tag":45,"props":46,"children":47},"p",{},[48],{"type":42,"value":49},"JSON (JavaScript Object Notation) is a lightweight text format used to store and exchange data between systems. Despite its name, JSON is language-independent and is used by virtually every programming language and platform. It's the dominant data format for REST APIs, configuration files, NoSQL databases, and data storage.",{"type":36,"tag":45,"props":51,"children":52},{},[53],{"type":42,"value":54},"A typical JSON structure looks like this:",{"type":36,"tag":56,"props":57,"children":62},"pre",{"className":58,"code":60,"language":61,"meta":7},[59],"language-json","{\n  \"name\": \"Otto\",\n  \"type\": \"otter\",\n  \"tools\": true,\n  \"favourites\": [\"fish\", \"rocks\", \"coding\"]\n}\n","json",[63],{"type":36,"tag":64,"props":65,"children":66},"code",{"__ignoreMap":7},[67],{"type":42,"value":60},{"type":36,"tag":45,"props":69,"children":70},{},[71,73,79,81,87,89,95,97,103,105,111],{"type":42,"value":72},"JSON supports six data types: strings, numbers, booleans (",{"type":36,"tag":64,"props":74,"children":76},{"className":75},[],[77],{"type":42,"value":78},"true",{"type":42,"value":80},"\u002F",{"type":36,"tag":64,"props":82,"children":84},{"className":83},[],[85],{"type":42,"value":86},"false",{"type":42,"value":88},"), ",{"type":36,"tag":64,"props":90,"children":92},{"className":91},[],[93],{"type":42,"value":94},"null",{"type":42,"value":96},", objects (key-value pairs wrapped in ",{"type":36,"tag":64,"props":98,"children":100},{"className":99},[],[101],{"type":42,"value":102},"{}",{"type":42,"value":104},"), and arrays (ordered lists wrapped in ",{"type":36,"tag":64,"props":106,"children":108},{"className":107},[],[109],{"type":42,"value":110},"[]",{"type":42,"value":112},").",{"type":36,"tag":37,"props":114,"children":116},{"id":115},"how-to-use-the-json-formatter",[117],{"type":42,"value":118},"How to use the JSON Formatter",{"type":36,"tag":45,"props":120,"children":121},{},[122],{"type":42,"value":123},"Using AnotterToolbox's JSON formatter is straightforward:",{"type":36,"tag":125,"props":126,"children":127},"ol",{},[128,140,150,160],{"type":36,"tag":129,"props":130,"children":131},"li",{},[132,138],{"type":36,"tag":133,"props":134,"children":135},"strong",{},[136],{"type":42,"value":137},"Paste your JSON",{"type":42,"value":139}," into the input box on the left. This can be minified JSON from an API response, a config file, or any raw JSON string.",{"type":36,"tag":129,"props":141,"children":142},{},[143,148],{"type":36,"tag":133,"props":144,"children":145},{},[146],{"type":42,"value":147},"Click \"Format JSON\"",{"type":42,"value":149}," or simply wait — the formatter auto-detects valid JSON as you type and formats it automatically.",{"type":36,"tag":129,"props":151,"children":152},{},[153,158],{"type":36,"tag":133,"props":154,"children":155},{},[156],{"type":42,"value":157},"Review the output",{"type":42,"value":159}," on the right. If your JSON is invalid, you'll see a clear error message explaining exactly what's wrong.",{"type":36,"tag":129,"props":161,"children":162},{},[163,168],{"type":36,"tag":133,"props":164,"children":165},{},[166],{"type":42,"value":167},"Copy the result",{"type":42,"value":169}," using the Copy button, or switch to Minify mode if you want compressed output.",{"type":36,"tag":37,"props":171,"children":173},{"id":172},"when-would-you-use-a-json-formatter",[174],{"type":42,"value":175},"When would you use a JSON formatter?",{"type":36,"tag":45,"props":177,"children":178},{},[179,184],{"type":36,"tag":133,"props":180,"children":181},{},[182],{"type":42,"value":183},"Debugging API responses",{"type":42,"value":185}," is the most common use case. When you're making API calls with tools like curl, Postman, or browser DevTools, the raw response is often minified — one long line of text that's nearly impossible to read. Pasting it into a formatter instantly makes the structure visible.",{"type":36,"tag":45,"props":187,"children":188},{},[189,194],{"type":36,"tag":133,"props":190,"children":191},{},[192],{"type":42,"value":193},"Reading configuration files",{"type":42,"value":195}," is another major use. Tools like ESLint, Prettier, TypeScript, and many other developer tools use JSON for configuration. When these files get complex, a formatter helps you see the structure clearly.",{"type":36,"tag":45,"props":197,"children":198},{},[199,204],{"type":36,"tag":133,"props":200,"children":201},{},[202],{"type":42,"value":203},"Validating data before sending",{"type":42,"value":205}," saves debugging time. Before sending JSON in an API request, paste it into the formatter to catch syntax errors — a missing comma or unclosed bracket can cause confusing server errors that are hard to trace.",{"type":36,"tag":45,"props":207,"children":208},{},[209,214],{"type":36,"tag":133,"props":210,"children":211},{},[212],{"type":42,"value":213},"Learning JSON structure",{"type":42,"value":215}," is also valuable for beginners. Seeing properly indented JSON makes it much easier to understand how nested objects and arrays relate to each other.",{"type":36,"tag":37,"props":217,"children":219},{"id":218},"json-formatting-best-practices",[220],{"type":42,"value":221},"JSON formatting best practices",{"type":36,"tag":45,"props":223,"children":224},{},[225,227,232],{"type":42,"value":226},"Always use ",{"type":36,"tag":133,"props":228,"children":229},{},[230],{"type":42,"value":231},"2 spaces for indentation",{"type":42,"value":233}," (the most common convention, used by most formatters and editors). Some teams prefer 4 spaces or tabs — choose one and stick to it across your project.",{"type":36,"tag":45,"props":235,"children":236},{},[237,242,244,250,252,258,260,266,267,273],{"type":36,"tag":133,"props":238,"children":239},{},[240],{"type":42,"value":241},"Keys should be descriptive and consistent",{"type":42,"value":243}," in naming convention. Most JSON APIs use either ",{"type":36,"tag":64,"props":245,"children":247},{"className":246},[],[248],{"type":42,"value":249},"camelCase",{"type":42,"value":251}," (like ",{"type":36,"tag":64,"props":253,"children":255},{"className":254},[],[256],{"type":42,"value":257},"firstName",{"type":42,"value":259},") or ",{"type":36,"tag":64,"props":261,"children":263},{"className":262},[],[264],{"type":42,"value":265},"snake_case",{"type":42,"value":251},{"type":36,"tag":64,"props":268,"children":270},{"className":269},[],[271],{"type":42,"value":272},"first_name",{"type":42,"value":274},") — never mix both in the same API.",{"type":36,"tag":45,"props":276,"children":277},{},[278,283],{"type":36,"tag":133,"props":279,"children":280},{},[281],{"type":42,"value":282},"Avoid deeply nested structures",{"type":42,"value":284}," where possible. JSON that is 6-7 levels deep becomes hard to read and maintain. Consider flattening your data model or splitting it into separate objects.",{"type":36,"tag":45,"props":286,"children":287},{},[288,293,295,301],{"type":36,"tag":133,"props":289,"children":290},{},[291],{"type":42,"value":292},"Date formats",{"type":42,"value":294}," should follow ISO 8601 (",{"type":36,"tag":64,"props":296,"children":298},{"className":297},[],[299],{"type":42,"value":300},"2024-01-15T10:30:00Z",{"type":42,"value":302},") for consistency across systems and languages.",{"title":7,"searchDepth":304,"depth":304,"links":305},2,[306,307,308,309],{"id":39,"depth":304,"text":43},{"id":115,"depth":304,"text":118},{"id":172,"depth":304,"text":175},{"id":218,"depth":304,"text":221},"markdown","content:tools:json-formatter.md","content","tools\u002Fjson-formatter.md","tools\u002Fjson-formatter","md",{"loc":4},1777882945307]