Dynamic JSON Editor based in HTML/JavaScript

JSON, or JavaScript Object Notation, is a lightweight, human-readable data-interchange format that uses a text-based structure derived from JavaScript syntax to represent data as key-value pairs and ordered lists. It is commonly used for transmitting data between a server and a web application, as well as for configuration files and data storage due to its simplicity, platform independence, and ease of parsing.
 

The following is an example of JSON:

{
  "Title": "My First JSON File",
  "Author": "Chun Kang",
  "Description": "This is a longer description that will appear in a <textarea> input because it exceeds 50 characters.",
  "Version": "1.0.0",
  "License": "MIT"
}

Below is nested JSON Example

{
  "Title": "Nested Example",
  "Author": {
    "Name": "Chun Kang",
    "Email": "chun@example.com"
  },
  "Tags": ["editor", "json", "example"],
  "Metadata": {
    "Created": "2025-07-27",
    "Modified": "2025-07-27"
  }
}

The below HTML/JavaScript code enables you to edit JSON file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Nested JSON Editor (Textarea Only)</title>
  <style>
    body { font-family: sans-serif; padding: 20px; }
    .field { margin-bottom: 12px; }
    .key { font-weight: bold; display: block; margin-bottom: 4px; }
    textarea {
      width: 100%;
      min-height: 30px;
      padding: 6px;
      font-size: 14px;
      resize: vertical;
    }
    .object, .array {
      margin-left: 20px;
      border-left: 2px solid #ccc;
      padding-left: 10px;
      margin-bottom: 10px;
    }
    button {
      margin-top: 20px;
      padding: 8px 12px;
    }
  </style>
</head>
<body>

<h2>Edit Nested JSON (All Textareas)</h2>
<input type="file" id="fileInput" accept=".json"><br><br>
<div id="jsonEditor"></div>
<button onclick="downloadJson()">Download Edited JSON</button>

<script>
  let jsonData = {};

  document.getElementById('fileInput').addEventListener('change', function(event) {
    const file = event.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = function(e) {
      try {
        jsonData = JSON.parse(e.target.result);
        const container = document.getElementById('jsonEditor');
        container.innerHTML = '';
        renderEditor(container, jsonData);
      } catch (err) {
        alert('Invalid JSON.');
      }
    };
    reader.readAsText(file);
  });

  function renderEditor(container, obj, path = '') {
    for (let key in obj) {
      const fullPath = path ? `${path}.${key}` : key;
      const value = obj[key];
      const field = document.createElement('div');
      field.className = 'field';

      const label = document.createElement('label');
      label.className = 'key';
      label.textContent = key;

      if (typeof value === 'object' && value !== null) {
        field.appendChild(label);
        const childContainer = document.createElement('div');
        childContainer.className = Array.isArray(value) ? 'array' : 'object';
        renderEditor(childContainer, value, fullPath);
        field.appendChild(childContainer);
      } else {
        const textarea = document.createElement('textarea');
        textarea.value = value;
        textarea.oninput = () => {
          setValueByPath(jsonData, fullPath, parseInput(textarea.value));
        };

        field.appendChild(label);
        field.appendChild(textarea);
      }

      container.appendChild(field);
    }
  }

  function setValueByPath(obj, path, value) {
    const keys = path.split('.');
    let temp = obj;
    for (let i = 0; i < keys.length - 1; i++) {
      temp = temp[keys[i]];
    }
    temp[keys[keys.length - 1]] = value;
  }

  function parseInput(value) {
    if (value === 'true') return true;
    if (value === 'false') return false;
    if (!isNaN(value) && value.trim() !== '') return Number(value);
    return value;
  }

  function downloadJson() {
    const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(jsonData, null, 2));
    const a = document.createElement('a');
    a.setAttribute('href', dataStr);
    a.setAttribute('download', 'edited_nested.json');
    a.click();
  }
</script>

</body>
</html>

The actual editing screen will be like below:

If you want to have the full source code and example, please download at json editor_based in HTML5.zip