᠎᠎᠎          
51K

JSON Editor

World's simplest json tool
Free online JSON editor and viewer. Just load your JSON in the input field and you can immediately start editing it from your browser. In the tool options, you can enable line numbering and visualize tabs and line breaks. Additionally, you can flash matching opening or closing brackets when you hover over them and highlight the current cursor line. Created for developers by developers from team Browserling.
We put a browser in your browser! Browserling
Check out our project Browserling – get a browser in your browser.
A link to this tool, including input, options and all chained tools.
Import from file
Save as...
Copy to clipboard
Download
Export to Pastebin
JSON Formatting
Show where tabs and newlines are inserted in your JSON data
Show line numbers before each line for easier reference.
Code Navigation
Visually highlight the corresponding opening bracket when you hover over the closing bracket, and vice versa.
Change the background color of currently selected line.

What is a JSON Editor?

learn more about this tool
This tool lets you view your JSON (JavaScript Object Notation) files and edit them in your web browser. It offers a neat and intuitive interface that color-codes different elements of JSON syntax, making the code more readable and understandable. The tool also detects and highlights JSON syntax errors, helping you quickly identify and fix them. Various tool configuration options allow you to customize the JSON editor's behavior to optimize your workflow. Specifically, you can display invisible characters, such as tabs and newlines, to make sure the code doesn't mix spaces and tabs and doesn't have trailing whitespaces. You can also enable line numbers for easier navigation. Additionally, you can visually highlight matching brackets upon hovering over them and change the background color of the currently selected line to aid focus. Editing JSON is most convenient when it's prettified and has an even indentation matching the hierarchical code depth levels. If your JSON code isn't already formatted, then you can quickly create a prettified version via our Prettify JSON tool. Json-abulous!

JSON Editor examples

Click to use
View JSON with Color Highlighting
In this example, we demonstrate how the JSON editor renders a neatly formatted JSON data structure and how it adds color highlighting to it. Adding color highlighting to JSON simplifies the reading and understanding of different parts of the data structure, such as arrays, objects, keys, and values.
[ "T-Shirt", "S", "Blue", { "inStock": 10, "onSale": true } ]
In this example, we demonstrate how the JSON editor renders a neatly formatted JSON data structure and how it adds color highlighting to it. Adding color highlighting to JSON simplifies the reading and understanding of different parts of the data structure, such as arrays, objects, keys, and values.
Required options
These options will be used automatically if you select this example.
Show where tabs and newlines are inserted in your JSON data
Show line numbers before each line for easier reference.
Visually highlight the corresponding opening bracket when you hover over the closing bracket, and vice versa.
Change the background color of currently selected line.
Detect and Correct Errors
In this example, we use the JSON viewer to detect and correct errors in the JSON object. As you can see, the tool indicates an error on line 2, where single quotes are mistakenly used instead of regular double quotes for the value of the title "title" key. As we have enabled line numbering in the options, we can quickly locate the erroneous line and fix the error by replacing single quotes with double quotes.
{ "title": 'Number Pi (π)', "number": 3.14159, "isConstant": true, "isFinite": false, "normality": null, "applications": [ "Engineering", "Physics" ] }
In this example, we use the JSON viewer to detect and correct errors in the JSON object. As you can see, the tool indicates an error on line 2, where single quotes are mistakenly used instead of regular double quotes for the value of the title "title" key. As we have enabled line numbering in the options, we can quickly locate the erroneous line and fix the error by replacing single quotes with double quotes.
Required options
These options will be used automatically if you select this example.
Show where tabs and newlines are inserted in your JSON data
Show line numbers before each line for easier reference.
Visually highlight the corresponding opening bracket when you hover over the closing bracket, and vice versa.
Change the background color of currently selected line.
Edit a Large JSON File with Nested Elements
In this example, we load a complex JSON file, which includes numbers, strings, nested objects, and arrays. As our JSON editor is equipped with a code highlighting component, it makes it very easy to navigate through the file – the line of the current cursor position stands out, the corresponding bracket pairs get illuminated, and numbers, strings, and other syntax elements get printed in distinct colors.
{ "brand": "Tesla", "model": "Model 3", "year": 2022, "color": "White", "mileage": 15000, "features": { "autopilot": true, "sunroof": false }, "serviceHistory": [ "Oil change", "Tire rotation" ] }
In this example, we load a complex JSON file, which includes numbers, strings, nested objects, and arrays. As our JSON editor is equipped with a code highlighting component, it makes it very easy to navigate through the file – the line of the current cursor position stands out, the corresponding bracket pairs get illuminated, and numbers, strings, and other syntax elements get printed in distinct colors.
Required options
These options will be used automatically if you select this example.
Show where tabs and newlines are inserted in your JSON data
Show line numbers before each line for easier reference.
Visually highlight the corresponding opening bracket when you hover over the closing bracket, and vice versa.
Change the background color of currently selected line.
Pro tips Master online json tools
You can pass input to this tool via ?input query argument and it will automatically compute output. Here's how to type it in your browser's address bar. Click to try!
https://onlinejsontools.com/edit-json?input=%5B%0A%20%20%22T-Shirt%22%2C%20%22S%22%2C%20%22Blue%22%2C%0A%20%20%7B%0A%20%20%20%20%22inStock%22%3A%2010%2C%0A%20%20%20%20%22onSale%22%3A%20true%0A%20%20%7D%0A%5D&show-lines=false&show-invisible=false&match-brackets=false&highlight-line=false
All json tools
Didn't find the tool you were looking for? Let us know what tool we are missing and we'll build it!
Highlight JSON Syntax
Quickly color-code the syntax of a JSON file.
Prettify JSON
Quickly beautify a JSON data structure.
Minify JSON
Quickly compress a JSON file.
Stringify JSON
Quickly convert JavaScript data to a JSON string.
Unstringify JSON
Quickly convert a JSON string to JavaScript data.
Validate JSON
Quickly check JSON for errors and report them.
Escape JSON
Quickly escape special JSON characters.
Unescape JSON
Quickly unescape an escaped JSON string.
Convert JSON to XML
Quickly convert a JSON data structure to an XML file.
Convert XML to JSON
Quickly convert an XML file to a JSON data structure.
Convert JSON to YAML
Quickly convert a JSON data structure to a YAML markup.
Convert YAML to JSON
Quickly convert a YAML markup to a JSON data structure.
Convert JSON to TSV
Quickly convert a JSON file to a TSV file.
Convert TSV to JSON
Quickly convert TSV data to a JSON file.
Convert JSON to CSV
Quickly convert a JSON file to a CSV file.
Convert CSV to JSON
Quickly convert CSV data to JSON data.
Convert JSON to BSON
Quickly convert a JSON structure to binary JSON encoding.
Convert JSON to an Image
Quickly convert JSON to a PNG, GIF, JPG, or BMP image.
Capture a JSON Screenshot
Quickly create a screenshot from JSON code.
Convert JSON to Base64
Quickly encode JSON to base64.
Convert Base64 to JSON
Quickly decode base64 to JSON.
URL-encode JSON
Quickly convert JSON to URL-encoding.
URL-decode JSON
Quickly convert URL-escaped JSON back to JSON.
Convert JSON to Plain Text
Quickly convert JSON data to plain text.
Edit and View JSON
Quickly edit a JSON file in a neat JSON editor in your web browser.
Extract JSON Keys
Quickly extract keys from objects in JSON data.
Extract JSON Values
Quickly extract values from objects in JSON data.
Flatten a JSON Array
Quickly reduce the nesting level of an array of arrays.
Flatten a JSON Object
Quickly create a single-level JSON object from nested JSON objects.
Hide JSON Strings
Quickly rewrite JSON strings using escape codes and make them hard to read.
Obfuscate JSON
Quickly obfuscate a JSON data structure.
Censor JSON Data
Quickly remove certain information from a JSON data structure.
Analyze JSON
Quickly display detailed information about a JSON data structure.
Coming soon These json tools are on the way
Find JSON Keys/Values
Find keys and/or values that interest you in a JSON file.
Convert JSON to a List
Create a text list from a JSON array or object.
Convert a List to JSON
Create a JSON array from a text list.
Convert JSON to Form Data
Generate HTTP form data from a JSON object.
Convert Form Data to JSON
Generate JSON object from HTTP form data.
Convert JSON to HTML
Create a HTML table from keys and values of a JSON object.
Convert JSON to Properties
Convert a JSON file to properties file.
Convert Properties to JSON
Convert properties data to JSON data.
Convert JSON to CSON
Convert a JSON file to a CSON file.
Convert CSON to JSON
Convert a CSON file to a JSON file.
Convert JSON to TOML
Convert a JSON config to a TOML config.
Convert TOML to JSON
Convert a TOML file to a JSON file.
Convert JSON to Bencode
Convert a JSON data structure to Bencode encoding.
Convert Bencode to JSON
Convert Bencode data to JSON data.
Convert JSON to JSONL
Convert a JSON file to a JSONL file.
Convert JSONL to JSON
Convert a JSONL file to a JSON file.
Convert BSON to JSON
Convert binary JSON data structure (BSON) to JSON.
Convert JSON to UBJSON
Convert a JSON file to a universal binary JSON (UBJSON).
Convert UBJSON to JSON
Convert universal binary JSON (UBJSON) to regular JSON.
Convert JSON to Message Pack
Serialize JSON data to binary MessagePack format.
Convert Message Pack to JSON
Unserialize binary MessagePack to a JSON struct.
Convert JSON to Protobuf
Serialize JSON data to binary Protobuf format.
Convert Protobuf to JSON
Unserialize binary Protobuf to a JSON struct.
Convert JSON to a LaTeX Table
Generate a LaTeX table from a JSON object.
Convert JSON to INI
Convert a JSON data file to an INI configuration file.
Convert INI to JSON
Convert an INI configuration file to JSON data file.
Truncate JSON
Loop over JSON structure and truncate all values or keys.
Find JSON Depth
Find the nesting depth of a JSON data structure.
Convert JSON to a Data URI
Convert a JSON data structure to a data URL.
Convert JSON to a PHP Array
Create a PHP data structure from a JSON data structure.
Convert a PHP array to JSON
Create a JSON data structure from a PHP data structure.
Compare Two JSON Files
Diff JSON files and show differences visually.
Sort JSON Object Keys
Lexicographically sort the order of JSON object keys.
Swap JSON Keys with Values
Exchange keys with values in a JSON file.
Create a Random JSON Array
Create a JSON array with random values.
Create a Random JSON Object
Create a JSON object with random keys and values.
Randomize a JSON Array
Randomly change the positions of array elements.
Randomize a JSON Object
Randomly change the order of key, value pairs.
Add Spacing to JSON
Add random spaces and newlines in a JSON file.
Tokenize JSON
Tokenize a JSON data structure.
Remove JSON Syntax
Remove all JSON syntax and leave just the values.
Change JSON Syntax
Change curly braces, commas, and quotes to other symbols.
Fix Quotes in JSON
Fix incorrectly quoted (usually single quote) keys and values.
Use Single Quotes in JSON
Make all keys and values in a JSON to be single-quoted.
Use Double Quotes in JSON
Make all keys and values in a JSON to be double-quoted.
Generate FakeSON
Create JSON that looks real but is fake (FakeSON).
Run jq
Execute a jq query on a JSON data structure.
Filter JSON
Filter keys and values that match a pattern.
Split a String into a JSON Array
Create a JSON array from a string.
Group a JSON Array
Create groups of JSON array items.
Merge JSON Arrays
Merge two or more JSON arrays together.
Compare JSON Arrays
Find differences in two or more JSON arrays.
Merge JSON Objects
Merge two or more JSON objects together.
Damage JSON
Introduce errors in a JSON data structure.
Fix JSON
Try to fix a damaged JSON to the best of our ability.
Create JSON Art
Convert images to valid JSON strings that look like ASCII art.
Visualize a JSON Structure
Create an abstract visualization of JSON's complexity.
Created with love by
51K
@browserling
Online json tools was created by Browserling — world's first cloud-based cross-browser testing service. Our mission at Browserling is to make make browsers do wonders and to make developers' lives easier. That's why we created this collection of online json utilities. Unlike many other tools websites, we made our tools free, without ads, and with a very simple user interface. Our online json tools are actually powered by our programming tools that we created over the last couple of years. Check them out!
Secret message
If you love our tools, then we love you, too! Use coupon code JSONLING to get a discount at Browserling.
Privacy Policy we don't log data!
All conversions and calculations are done in your browser using JavaScript. We don't send a single bit about your input data to our servers. There is no server-side processing at all. We use Google Analytics and StatCounter for site usage analytics. Your IP address is saved on our web server, but it's not associated with any personally identifiable information. We don't use cookies and don't store session information in cookies. We use your browser's local storage to save tools' input. It stays on your computer.
Terms of Service the legal stuff
By using Online Json Tools you agree to our Terms of Service. TLDR: You don't need an account to use our tools. All tools are free of charge and you can use them as much as you want. You can't do illegal or shady things with our tools. We may block your access to tools, if we find out you're doing something bad. We're not liable for your actions and we offer no warranty. We may revise our terms at any time.