Beautiful JSON Viewer And Editor With jQuery - JSON Editor

File Size: 8.94 KB
Views Total: 58696
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Beautiful JSON Viewer And Editor With jQuery - JSON Editor

A lightweight, simple, beautiful JSON viewer and editor plugin inspired by Abodelot's jQuery JSON Viewer.

The JSON editor helps the developers to render JSON objects in HTML with collapsible/expandable navigation just like a tree view.

Syntax highlighting is supported as well.

How to use it:

1. Create a normal textarea element for the JSON editor.

<textarea id="json-input" autocomplete="off">
    "id": 1001,
    "type": "donut",
    "name": "Cake",
    "description": "",
    "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" }

2. Create an empty container for the JSON viewer.

<pre id="json-display"></pre>

3. Create a button that will translte the JSON data into HTML.

<button id="translate">Translate</button>

4. Put jQuery library and the jQuery JSON Editor plugin at the bottom of your page.

<script src="" 
<script src="jquery.json-editor.min.js"></script>

5. The JavaScript to enable the JSON editor.

// get JSON 
function getJson() {
  try {
    return JSON.parse($('#json-input').val());
  } catch (ex) {
    alert('Wrong JSON Format: ' + ex);

// initialize
var editor = new JsonEditor('#json-display', getJson());

// enable translate button
$('#translate').on('click', function () {

This awesome jQuery plugin is developed by dblate. For more Advanced Usages, please check the demo page or visit the official website.