JSONEditor in HTML: read the current tree without hiding parse errors

A JSON text area and a nested tree answer different questions. Text exposes the exact punctuation; a tree makes the structure easier to inspect. Use the actual JSONEditor library when you need both views, and catch errors when you read an unfinished text edit. A syntax error should not leave yesterday's parsed value labeled as the current result.

Use a fictional workshop configuration with a title, capacity, and two room names:

Open the complete example · Download the full HTML source

{"title":"Workshop","capacity":12,"rooms":["North","South"]}

This is local review material. It is not connected to a booking system, and changing capacity in this page does not reserve a place.

Create the editor and supply a value

Load the matching JSONEditor JavaScript and CSS distributions, then create a container with a visible height. The official API reference documents the constructor options and methods.

const editor = new JSONEditor(document.querySelector('#editor'), {
  mode: 'tree',
  modes: ['tree', 'text'],
  onChange: invalidateReading
});
editor.set({
  title: 'Workshop',
  capacity: 12,
  rooms: ['North', 'South']
});

set() supplies a JavaScript value; it is not a server save. Keep the original fixture separately if your page offers a Restore example action. Calling set() also resets editor state, so do not call it on every keystroke merely to refresh a summary.

Read a complete value, or show the error

Use get() when the reader explicitly asks to inspect the current value. The documentation notes that it can throw when a text-like mode contains invalid JSON.

function readCurrent() {
  try {
    const value = editor.get();
    output.textContent = JSON.stringify(value, null, 2);
    status.textContent = 'Current JSON value read locally.';
  } catch (error) {
    output.textContent = '';
    status.textContent = 'Fix the JSON syntax before reading this draft.';
  }
}

Clear the readout and its success message whenever the editor changes. A previous read can remain useful as a separately labeled snapshot, but it must not masquerade as a reading of the new draft.

Syntax and application rules are separate

The string "12" and the number 12 are different JSON values. Both can be syntactically valid. If capacity must be a nonnegative integer in your application, check that rule after parsing rather than treating a successful get() as approval.

For this small example, inspect the type alongside the value and keep every field editable. A real configuration workflow also needs its agreed schema and a deliberate persistence operation. Do not connect this tutorial's Read current value button to production settings without those decisions.

The existing draft validation editor is explicitly handwritten and dependency-free. It demonstrates captured revisions and validation races; it does not load JSONEditor. This recipe addresses the named library's tree/text modes and read boundary.

Keep the JSON original with the HTML reading copy in NOS. Ask a reviewer to identify the property and type they want changed. The useful handoff is a precise edit request, not an unlabeled screenshot of an expanded tree.