The syntax highlighting is tough but check out this fiddle for pretty printing a json object entered in a text area. Do note that the JSON has to be valid for this to work. (Use the dev console to catch errors.) Check jsLint for valid json.

The HTML:

Copy<textarea id="myTextArea" cols=50 rows=10></textarea>
<button onclick="prettyPrint()">Pretty Print</button>

The js:

Copyfunction prettyPrint() {
    var ugly = document.getElementById('myTextArea').value;
    var obj = JSON.parse(ugly);
    var pretty = JSON.stringify(obj, undefined, 4);
    document.getElementById('myTextArea').value = pretty;
}

First try simple input like: {"a":"hello","b":123}

Simple pretty printing of JSON can be done rather easily. Try this js code: (jsFiddle here)

Copy// arbitrary js object:
var myJsObj = {a:'foo', 'b':'bar', c:[false,2,null, 'null']};

// using JSON.stringify pretty print capability:
var str = JSON.stringify(myJsObj, undefined, 4);

// display pretty printed object in text area:
document.getElementById('myTextArea').innerHTML = str;

For this HTML:

Copy<textarea id="myTextArea" cols=50 rows=25></textarea>

And check out JSON.stringify documentation.

Answer from Paul Sasik on Stack Overflow
Top answer
1 of 6
201

The syntax highlighting is tough but check out this fiddle for pretty printing a json object entered in a text area. Do note that the JSON has to be valid for this to work. (Use the dev console to catch errors.) Check jsLint for valid json.

The HTML:

Copy<textarea id="myTextArea" cols=50 rows=10></textarea>
<button onclick="prettyPrint()">Pretty Print</button>

The js:

Copyfunction prettyPrint() {
    var ugly = document.getElementById('myTextArea').value;
    var obj = JSON.parse(ugly);
    var pretty = JSON.stringify(obj, undefined, 4);
    document.getElementById('myTextArea').value = pretty;
}

First try simple input like: {"a":"hello","b":123}

Simple pretty printing of JSON can be done rather easily. Try this js code: (jsFiddle here)

Copy// arbitrary js object:
var myJsObj = {a:'foo', 'b':'bar', c:[false,2,null, 'null']};

// using JSON.stringify pretty print capability:
var str = JSON.stringify(myJsObj, undefined, 4);

// display pretty printed object in text area:
document.getElementById('myTextArea').innerHTML = str;

For this HTML:

Copy<textarea id="myTextArea" cols=50 rows=25></textarea>

And check out JSON.stringify documentation.

2 of 6
11

Late answer but modern one, use the secret intendation parameter.

I usually go for:

JSON.stringify(myData, null, 4);


Here's the code definition, it explains it well.

stringify(value: any, replacer?: (this: any, key: string, value: any) => any, space?: string | number): string;

Copy/**
 * Converts a JavaScript value to a JavaScript Object Notation (JSON) string.
 * @param value A JavaScript value, usually an object or array, to be converted.
 * @param replacer An array of strings and numbers that acts as a approved list for selecting the object properties that will be stringified.
 * @param space Adds indentation, white space, and line break characters to the return-value JSON text to make it easier to read.
 */
🌐
TutorialsPoint
tutorialspoint.com › prettify-json-data-in-textarea-input-in-javascript
Prettify JSON data in textarea input in JavaScript?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initialscale=1.0"> <title>Document</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/font-awesome.min.css"> </head> <body> <textarea id="prettyJSONFormat" cols=100 rows=20></textarea> <button onclick="printTheJSONInPr
🌐
CodePen
codepen.io › okproject › pen › meemGQ
Pretty Json Inside TextArea
<textarea id="myTextArea" cols=50 rows=10></textarea> ! CSS Options · Format CSS · View Compiled CSS · Analyze CSS · Maximize CSS Editor · Minimize CSS Editor · Fold All · Unfold All · ! JS Options · Format JavaScript · View Compiled ...
🌐
jQuery Script
jqueryscript.net › jquery plugins › jquery other plugins
Beautiful JSON Viewer And Editor With jQuery - JSON Editor | Free jQuery Plugins
<textarea id="json-input" autocomplete="off"> { "id": 1001, "type": "donut", "name": "Cake", "description": "http://en.wikipedia.org/wiki/Doughnut", "price": 2.55, "available": { "store": 42, "warehouse": 600 }, "topping": [ { "id": 5001, "type": "None" }, { "id": 5002, "type": "Glazed" }, { "id": 5005, "type": "Sugar" }, { "id": 5003, "type": "Chocolate" }, { "id": 5004, "type": "Maple" } ] } </textarea> ... <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="jquery.json-editor.min.js"></script>
🌐
GitHub
github.com › mm-sam › json-textarea
GitHub - mm-sam/json-textarea: visual JSON editor with comments
visual JSON editor with comments · fork from Vue-Json-Edit · Online Demo · <textarea name="hello" class="json_editor"> [1, 2, 3, "Hello"] </textarea> <script src="path/of/json-textarea.js"></script> OR ·
Starred by 3 users
Forked by 2 users
Languages   HTML 57.3% | Vue 31.5% | JavaScript 7.3% | CSS 3.9% | HTML 57.3% | Vue 31.5% | JavaScript 7.3% | CSS 3.9%
🌐
JSFiddle
jsfiddle.net › molecule › JNqaX
testing textarea to show stringified json - JSFiddle - Code Playground
The Code Completion will now also have the context of all panels before suggesting code to you - so if for example you have some CSS or JS, the HTML panel will suggest code based on the other two panels. Introducing some AI sprinkle in the editor - Code Completion based on the Codestral model (by Mistral).
🌐
Java2s
java2s.com › example › javascript › json › prettify-json-data-in-textarea-input.html
Prettify json data in textarea input - Javascript JSon
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <script type="text/javascript"> function prettyPrint() {//ww w .j av a 2s .com var ugly = document.getElementById('myTextArea').value; var obj = JSON.parse(ugly); var pretty = JSON.stringify(obj, undefined, 4); document.getElementById('myTextArea').value = pretty; } </script> </head> <body> <textarea id="myTextArea" cols="50" rows="10"></textarea> <button onclick="prettyPrint()">Pretty Print</button> </body> </html>
🌐
npm
npmjs.com › package › json-text-editor
json-text-editor - npm
April 2, 2022 - Easy integration, as it's a single javascript file. Available as a node package as well. FULL styling control with CSS. ... Just take the file json-editor.js file. Then, add it to your application as usual. ... First, add the package to your project. ... Second and last, add the package to the files for which you will use it. ... After the setup, you will have 1 new HTML tag available to use: json-editor. Defines a new editor, similar to a vanilla textarea...
      » npm install json-text-editor
    
Published   Apr 02, 2022
Version   0.2.0
Author   Ernesto Azuar
Find elsewhere
🌐
Editor.js
editorjs.io
Editor.js
For example, you can implement Blocks for Tweets, Instagram posts, surveys and polls, CTA buttons, and even games.", } , ... text: "Classic WYSIWYG editors produce raw HTML-markup with both content data and content appearance. On the contrary, <mark class="cdx-marker">Editor.js outputs JSON object</mark> with data of each Block.", } , } ,
🌐
GitHub
github.com › DavidDurman › FlexiJsonEditor
GitHub - DavidDurman/FlexiJsonEditor: JSON editor jQuery plugin
Live example · Include these lines into your HTML: <link rel="stylesheet" href="jsoneditor.css"/> <script src="jquery.min.js"></script> <script src="jquery.jsoneditor.js"></script> var myjson = { any: { json: { value: 1 } } }; var opt = { change: function(data) { /* called on every change */ }, propertyclick: function(path) { /* called when a property is clicked with the JS path to that property */ } }; /* opt.propertyElement = '<textarea>'; */ // element of the property field, <input> is default /* opt.valueElement = '<textarea>'; */ // element of the value field, <input> is default $('#mydiv').jsonEditor(myjson, opt);
Starred by 568 users
Forked by 140 users
Languages   JavaScript 89.8% | CSS 10.2% | JavaScript 89.8% | CSS 10.2%
🌐
JSON Formatter
jsonformatter.org › 9373ef
Reformated JSON
JSON Format Checker helps to fix the missing quotes, click the setting icon which looks like a screwdriver on the left side of the editor to fix the format. ... JSON Example with all data types including JSON Array.
🌐
Plunker
embed.plnkr.co › plunk › 2H908Z
JSON Editor - Plunker
"number") orderb = 1000; return ordera - orderb; }); }, build: function() { var self = this; // If the object should be rendered as a table row if(this.options.table_row) { this.editor_holder = this.container; $each(this.editors, function(key,editor) { var holder = self.theme.getTableCell(); self.editor_holder.appendChild(holder); editor.setContainer(holder); editor.build(); editor.postBuild(); if(self.editors[key].options.hidden) { holder.style.display = 'none'; } if(self.editors[key].options.input_width) { holder.style.width = self.editors[key].options.input_width; } }); } // If the object s
🌐
jsDelivr
jsdelivr.com › package › npm › json-text-editor
json-text-editor CDN by jsDelivr - A CDN for npm and GitHub
April 2, 2022 - A free, fast, and reliable CDN for json-text-editor. Native JSON text editor with indentation and syntax highlighting on the fly.
Published   Jan 16, 2021
🌐
GitHub
github.com › json-editor › json-editor
GitHub - json-editor/json-editor: JSON Schema Based Editor · GitHub
hidden - If set to true, the editor will not appear in the UI (works for all types) input_height - Explicitly set the height of the input element. Should be a valid CSS width string (e.g. "100px"). Works best with textareas.
Starred by 4.9K users
Forked by 703 users
Languages   JavaScript 61.9% | HTML 36.2% | CSS 1.9%
🌐
GitHub
github.com › josdejong › jsoneditor
GitHub - josdejong/jsoneditor: A web-based tool to view, edit, format, and validate JSON · GitHub
JSON Editor is a web-based tool to view, edit, format, and validate JSON. It has various modes such as a tree editor, a code editor, and a plain text editor. The editor can be used as a component in your own web application. It can be loaded as CommonJS module, AMD module, or as a regular javascript file.
Starred by 12.2K users
Forked by 2.1K users
Languages   JavaScript 87.7% | SCSS 6.7% | HTML 5.6%
🌐
npm
npmjs.com › package › @json-editor › json-editor
@json-editor/json-editor - npm
February 28, 2023 - hidden - If set to true, the editor will not appear in the UI (works for all types) input_height - Explicitly set the height of the input element. Should be a valid CSS width string (e.g. "100px"). Works best with textareas.
      » npm install @json-editor/json-editor
    
Published   Oct 22, 2024
Version   2.15.2
Author   Jeremy Dorn
🌐
GitHub
github.com › jdorn › json-editor
GitHub - jdorn/json-editor: JSON Schema Based Editor
If true, remove all Edit JSON buttons from objects. ... If true, remove all Edit Properties buttons from objects. ... The first part of the `name` attribute of form inputs in the editor. An full example name is `root[person][name]` where "root" is the form_name_root.
Starred by 5.8K users
Forked by 1.1K users
Languages   JavaScript 83.1% | HTML 16.9% | JavaScript 83.1% | HTML 16.9%
🌐
Npm
npm.io › search › keyword:json-editor
Json-editor | npm.io
customize json-editor by enabling easier input of positive numeric arrays via textarea · json-editornumeric-arraytextarea0.4.0 • Published 9 years ago · A dymanic form builder for React. JSON-Schemajsonschemareactreact-formreact-componentformjson-editor0.0.1 • Published 9 years ago ·