jsoneditor: JavaScript JSON Editor with Tree, Code & Text Modes

jsoneditor is a JavaScript JSON editor that adds editable tree and text-based JSON views to your web applications.

You can load JSON into an editor instance, retrieve the updated document, switch editing modes, validate data, and respond to user changes through callbacks.

Features:

• Tree, form, view, code, text, and preview modes.
• Field insertion, deletion, duplication, moving, and sorting.
• Search, selection, undo, redo, formatting, and JSON repair.
• JSON Schema and custom validation.
• JMESPath filtering, sorting, projection, and transforms.
• Tree autocomplete and schema-based code suggestions.
• Custom node classes, context menus, editability rules, timestamps, and color controls.
• Preview mode for JSON documents up to 500 MiB.

How To Use It:

Installation

Load both the JSONEditor stylesheet and JavaScript bundle in your document.

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/jsoneditor/dist/jsoneditor.min.css"
>
<script src="https://cdn.jsdelivr.net/npm/jsoneditor/dist/jsoneditor.min.js"></script>

The package is also available through npm.

npm install jsoneditor

A CommonJS project can load the constructor from the installed package.

const JSONEditor = require('jsoneditor');

Basic Usage

Create a container with an explicit size, then pass the element to the JSONEditor constructor. The third constructor argument loads the initial JSON document.

<div id="config-editor" style="width: 100%; height: 420px;"></div>
<script>
  const container = document.getElementById('config-editor');
  const editor = new JSONEditor(
    container,
    {
      mode: 'tree',
      search: true
    },
    {
      project: 'Storefront',
      locale: 'en-US',
      features: {
        reviews: true,
        recommendations: false
      }
    }
  );
  const currentConfig = editor.get();
</script>

Let Users Switch Editor Modes

The modes option creates a mode selector in the editor menu. Include only the views that belong in your application.

const editor = new JSONEditor(container, {
  mode: 'tree',
  modes: ['tree', 'code', 'view']
});

Available modes are:

• tree edits fields, values, and document structure.
• form edits values while keeping the structure read-only.
• view displays a read-only structured tree.
• code edits raw JSON through Ace.
• text edits JSON as plain text.
• preview targets large JSON documents and includes inspection and transformation tools.

Validate JSON with a Schema

Pass a JSON Schema through the schema option. validate() returns a Promise containing the current validation errors.

const schema = {
  type: 'object',
  required: ['project', 'locale'],
  properties: {
    project: {
      type: 'string'
    },
    locale: {
      type: 'string'
    },
    refreshInterval: {
      type: 'integer',
      minimum: 5
    }
  }
};
const editor = new JSONEditor(
  container,
  {
    mode: 'tree',
    schema: schema
  },
  {
    project: 'Analytics',
    locale: 'en-US',
    refreshInterval: 30
  }
);
editor.validate().then(function (errors) {
  console.log(errors);
});

React to User Changes

JSONEditor exposes separate callbacks for parsed JSON and JSON text. Choose the callback that matches the editor modes used by the application.

const editor = new JSONEditor(container, {
  mode: 'tree',
  onChangeJSON: function (json) {
    console.log('Updated object:', json);
  },
  onChangeText: function (jsonString) {
    console.log('Updated text:', jsonString);
  },
  onValidationError: function (errors) {
    console.log('Validation errors:', errors);
  }
});

Update JSON and Keep the Current Tree State

set() replaces the document and resets editor state such as expanded nodes, search, and selection.

Use update() in tree, form, or view mode when new data should replace the document while keeping that state.

editor.update({
  project: 'Storefront',
  locale: 'fr-FR',
  features: {
    reviews: true,
    recommendations: true
  }
});

Add Custom Classes to Tree Nodes

onClassName assigns application-specific CSS classes to nodes in tree, form, and view modes. The callback receives the node path, field, and value.

const editor = new JSONEditor(container, {
  mode: 'tree',
  onClassName: function ({ path }) {
    if (path.join('.') === 'features.recommendations') {
      return 'config-flag';
    }
  }
});

.config-flag {
  background: #fff7d6;
  font-weight: 600;
}

Configuration Options

Editor Modes and Layout

• mode (string): Initial editor mode. Accepts tree, view, form, code, text, or preview. Default: tree.
• modes (string[]): Modes available through the mode selector.
• name (string): Root field name in tree, view, or form mode. Default: undefined.
• search (boolean): Shows search in tree, view, or form mode. Default: true.
• history (boolean): Enables undo and redo in tree, form, or preview mode. Default: true.
• mainMenuBar (boolean): Shows the main menu bar. Default: true.
• navigationBar (boolean): Shows breadcrumb navigation in tree, form, or view mode. Default: true.
• statusBar (boolean): Shows cursor and selection information in code, text, or preview mode. Default: true.
• showErrorTable (boolean | array): Controls automatic expansion of the validation error table. Default: ['text', 'preview'].
• indentation (number): Number of indentation spaces in code, text, or preview mode. Default: 2.
• maxVisibleChilds (number): Child count shown before the editor displays its show-more controls. Default: 100.

Tree Editing and Display

• escapeUnicode (boolean): Displays Unicode characters as hexadecimal escapes when enabled. Default: false.
• sortObjectKeys (boolean): Sorts object keys with natural alphabetical ordering in tree, view, or form mode. Default: false.
• limitDragging (boolean): Restricts dragged nodes to their existing parent when enabled. The default depends on whether a schema is configured.
• enableSort (boolean): Enables array and object-property sorting in tree mode. Default: true.
• enableTransform (boolean): Enables filtering, sorting, and JMESPath transformations in tree mode. Default: true.
• colorPicker (boolean): Displays the built-in color picker beside recognized color values. Default: true.
• timestampTag (boolean | function): Controls timestamp tags in tree, form, and view modes. Default: true.
• timestampFormat (function): Returns custom display text for detected timestamps.
• templates (array): Adds reusable JSON object templates to the tree-mode context menu.

Schema, Validation, and Editor Engines

• schema (object): JSON Schema used to validate the document.
• schemaRefs (object): Additional schemas referenced through $ref.
• allowSchemaSuggestions (boolean): Enables schema-based autocomplete in code mode when the current JSON is valid. Default: false.
• ajv (object): Supplies a custom Ajv instance.
• ace (object): Supplies a custom Ace instance for code mode.
• theme (string): Ace theme name. The included default theme is ace/theme/jsoneditor.

Autocomplete

• autocomplete (object): Configures field and value autocomplete in tree mode.
• filter (string | function): Uses start, contain, or a custom matching function.
• trigger (string): Opens suggestions on keydown or focus. Default: keydown.
• confirmKeys (number[]): Key codes that confirm a suggestion. Default: [39, 35, 9].
• caseSensitive (boolean): Controls case-sensitive matching.
• getOptions (function): Returns autocomplete choices directly or through a Promise.

Transform Queries

• createQuery (function): Creates a query string from Transform Wizard settings.
• executeQuery (function): Executes a custom query against the current JSON and returns transformed JSON.
• queryDescription (string): Displays explanatory HTML in the Transform modal.

Language and Popup Placement

• language (string): Sets the editor language. Built-in choices include en, es, zh-CN, pt-BR, tr, ja, fr-FR, de, ru, and ko.
• languages (object): Overrides built-in translations or supplies additional translation strings.
• modalAnchor (HTMLElement): Container used for sorting and filtering modal overlays.
• popupAnchor (HTMLElement): Container used for dropdown menus, validation tooltips, and color pickers.

Callbacks

• onChange (function): Runs after a user edit and passes no document value.
• onChangeJSON (function): Passes the changed JSON document in tree, form, or view mode.
• onChangeText (function): Passes the changed document as a JSON string.
• onClassName (function): Returns custom CSS classes for nodes in tree, form, or view mode.
• onExpand (function): Runs after the user expands or collapses a structured node.
• onEditable (function): Controls editability in tree, text, or code mode.
• onError (function): Handles errors caused by editor actions.
• onModeChange (function): Runs after a user switches editor mode.
• onNodeName (function): Customizes object and array node names.
• onValidate (function): Adds synchronous or asynchronous custom validation.
• onValidationError (function): Receives validation and parse errors when the error set changes.
• onCreateMenu (function): Customizes tree-mode context menu items.
• onTextSelectionChange (function): Runs when the text selection changes in code or text mode.
• onSelectionChange (function): Runs when the node selection changes in tree mode.
• onEvent (function): Receives DOM events from JSON fields and values in tree, form, or view mode.
• onFocus (function): Runs when the editor receives focus.
• onBlur (function): Runs when the editor loses focus.
• onColorPicker (function): Replaces the built-in color picker UI.

API Methods

// Collapse all structured nodes.
editor.collapseAll();
// Remove the editor DOM, listeners, and web workers.
editor.destroy();
// Expand all structured nodes.
editor.expandAll();
// Expand or collapse a specific node path.
editor.expand({
  path: ['features'],
  isExpand: true,
  recursive: false,
  withPath: true
});
// Move keyboard focus into the editor.
editor.focus();
// Return the document as parsed JSON.
const json = editor.get();
// Return the active editor mode.
const mode = editor.getMode();
// Return the root field name.
const rootName = editor.getName();
// Return nodes inside a tree selection range.
const nodes = editor.getNodesByRange(
  { path: ['items', 0] },
  { path: ['items', 3] }
);
// Return the current tree selection.
const selection = editor.getSelection();
// Return the document as text.
const jsonText = editor.getText();
// Return the current code/text selection and range.
const textSelection = editor.getTextSelection();
// Re-render the editor UI.
editor.refresh();
// Replace the document and reset editor state.
editor.set({
  status: 'draft'
});
// Switch editor mode.
editor.setMode('code');
// Set the root field name.
editor.setName('settings');
// Replace the active JSON Schema.
editor.setSchema(schema, schemaRefs);
// Set a tree-mode selection.
editor.setSelection(
  { path: ['items', 0] },
  { path: ['items', 2] }
);
// Replace the document from a JSON string.
editor.setText('{"status":"draft"}');
// Set a selection in code or text mode.
editor.setTextSelection(
  { row: 0, column: 0 },
  { row: 0, column: 8 }
);
// Update parsed JSON while preserving supported editor state.
editor.update({
  status: 'published'
});
// Update text while preserving supported editor state.
editor.updateText('{"status":"published"}');
// Validate the current document.
editor.validate().then(function (errors) {
  console.log(errors);
});

Static Properties

• JSONEditor.VALID_OPTIONS: Contains the recognized configuration option names.
• JSONEditor.ace: Exposes the bundled Ace editor.
• JSONEditor.Ajv: Exposes the bundled Ajv constructor used for JSON Schema validation.
• JSONEditor.VanillaPicker: Exposes the bundled color picker constructor.

Keyboard Controls

Alternatives:

• Lightweight JS JSON Editor for Web – NanoJSON
• Render and Edit JSON as an Interactive Flowchart – SenangWebs Unfold
• Performant Large JSON Viewer In Vanilla JavaScript