or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

configuration.mdeditor-core.mdindex.mdmode-management.mdpreview-mode.mdschema-validation.mdtext-operations.mdtransform-operations.mdtree-operations.md
tile.json

tessl/npm-jsoneditor

A web-based tool to view, edit, format, and validate JSON with multiple editing modes including tree, code, text, and preview

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/jsoneditor@10.4.x

To install, run

npx @tessl/cli install tessl/npm-jsoneditor@10.4.0

index.mddocs/

JSONEditor

JSONEditor is a comprehensive web-based JSON manipulation library that provides multiple editing modes including tree editor, code editor, text editor, and preview mode. It enables developers to build applications that can view, edit, format, validate, and transform JSON data with features like syntax highlighting, JSON schema validation, JMESPath query transformation, undo/redo functionality, search and highlighting, color picking, and the ability to handle large JSON documents up to 500 MiB.

Package Information

  • Package Name: jsoneditor
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install jsoneditor
  • License: Apache-2.0
  • Version: 10.4.1

Core Imports

ESM:

import JSONEditor from "jsoneditor";

TypeScript:

import JSONEditor, { type JSONEditorOptions, type ValidationError } from "jsoneditor";

CommonJS:

const JSONEditor = require("jsoneditor");

UMD (Browser):

<script src="node_modules/jsoneditor/dist/jsoneditor.min.js"></script>
<link href="node_modules/jsoneditor/dist/jsoneditor.min.css" rel="stylesheet" type="text/css">

Basic Usage

import JSONEditor from "jsoneditor";

// Create a container element
const container = document.getElementById("jsoneditor");

// Set configuration options
const options = {
  mode: "tree",
  modes: ["code", "form", "text", "tree", "view", "preview"],
  search: true
};

// Initialize the editor
const editor = new JSONEditor(container, options);

// Set JSON data
const json = {
  "Array": [1, 2, 3],
  "Boolean": true,
  "Null": null,
  "Number": 123,
  "Object": {"a": "b", "c": "d"},
  "String": "Hello World"
};
editor.set(json);

// Get JSON data
const data = editor.get();

Architecture

JSONEditor is built around several key components:

  • Mode System: Pluggable editor modes (tree, text, code, preview) with different interaction patterns
  • Configuration Options: Extensive customization through callback functions and behavioral settings
  • Event System: Comprehensive event handling for changes, validation, focus, and user interactions
  • Validation Engine: JSON schema validation powered by Ajv with custom validation support
  • Transform System: JMESPath-based data transformation and filtering capabilities
  • Internationalization: Built-in support for multiple languages with customizable translations

Capabilities

Editor Core

Main JSONEditor constructor and core data manipulation methods for creating editors and managing JSON content.

class JSONEditor {
  constructor(container: HTMLElement, options?: JSONEditorOptions, json?: any);
  
  // Core data methods
  get(): any;
  set(json: any): void;
  getText(): string;
  setText(jsonString: string): void;
  update(json: any): void;
  updateText(jsonString: string): void;
}

Editor Core

Configuration and Options

Comprehensive configuration system with over 40 options for customizing editor behavior, appearance, and functionality.

interface JSONEditorOptions {
  mode?: "tree" | "view" | "form" | "code" | "text" | "preview";
  modes?: Array<"tree" | "view" | "form" | "code" | "text" | "preview">;
  search?: boolean;
  history?: boolean;
  schema?: object;
  onChange?: () => void;
  onChangeJSON?: (json: any) => void;
  onChangeText?: (jsonString: string) => void;
  onError?: (error: Error) => void;
}

Configuration

Mode Management

Mode switching functionality enabling dynamic transitions between different editor interfaces and behaviors.

// Mode control methods
setMode(mode: string): void;
getMode(): string;

// Mode registration for plugins
static registerMode(mode: ModeDefinition): void;

Mode Management

Schema Validation

JSON schema validation system with comprehensive error reporting and custom validation support.

setSchema(schema: object, schemaRefs?: object): void;
validate(): Promise<ValidationError[]>;

interface ValidationError {
  type: string;
  path: (string | number)[];
  message: string;
}

Schema Validation

Tree Mode Operations

Interactive tree editing capabilities including node manipulation, selection, expansion, search, and visual operations.

// Tree expansion/collapse
expandAll(): void;
collapseAll(): void;
expand(options: ExpandOptions): void;

// Selection management
setSelection(start?: PathArray, end?: PathArray): void;
getSelection(): { start: SerializableNode; end: SerializableNode };
getNodesByRange(start: PathArray, end: PathArray): SerializableNode[];

// Search functionality
search(text: string): SearchResult[];

Tree Operations

Text and Code Editing

Text-based editing features for code and plain text modes with selection management, cursor positioning, and JSON formatting.

// Text selection methods
getTextSelection(): TextSelection;
setTextSelection(startPos: Position, endPos: Position): void;

// JSON formatting methods
format(): void;
compact(): void;
repair(): void;
resize(force?: boolean): void;

interface TextSelection {
  start: { row: number; column: number };
  end: { row: number; column: number };
  text: string;
}

Text Operations

Transform and Query Operations

JMESPath-based data transformation and filtering capabilities with custom query language support.

interface QueryOptions {
  filter?: {
    field: string | "@";
    relation: "==" | "!=" | "<" | "<=" | ">" | ">=";
    value: string;
  };
  sort?: {
    field: string | "@";
    direction: "asc" | "desc";
  };
  projection?: {
    fields: string[];
  };
}

Transform Operations

Preview Mode for Large Documents

High-performance read-only mode for handling large JSON documents up to 500 MiB with minimal memory usage.

// Large document handling
executeWithBusyMessage(fn: () => any, message: string): Promise<any>;

// Inherited formatting methods optimized for large data
format(): void;
compact(): void;
repair(): void;

Preview Mode

Static Methods and Properties

Access to static functionality and bundled libraries for mode registration and utility operations.

class JSONEditor {
  // Mode registration system
  static registerMode(mode: ModeDefinition | ModeDefinition[]): void;
  static modes: { [modeName: string]: ModeDefinition };
  
  // Library access
  static ace: any; // Bundled Ace editor
  static Ajv: any; // Bundled Ajv validation library
  static VanillaPicker: any; // Bundled VanillaPicker color picker
  
  // Utility functions (undocumented/internal)
  static showTransformModal: (json: any, queryDescription: string, createQuery: Function, executeQuery: Function, onTransform: Function) => void;
  static showSortModal: (json: any, onSort: Function) => void;
  static getInnerText: (element: HTMLElement) => string;
  
  // Configuration
  static VALID_OPTIONS: string[]; // Array of all valid configuration option names
  static default: typeof JSONEditor; // Default export for TypeScript ES6
}

Types

type PathArray = (string | number)[];

interface SerializableNode {
  value: any;
  path: PathArray;
}

interface Position {
  row: number;
  column: number;
}

interface ExpandOptions {
  path: PathArray;
  isExpand: boolean;
  recursive?: boolean;
  withPath?: boolean;
}

interface ModeDefinition {
  /** Unique name for the mode */
  mode: string;
  
  /** Mixin object containing mode implementation */
  mixin: ModeMixin;
  
  /** Data type the mode operates on */
  data: "text" | "json";
  
  /** Optional load function called after mode initialization */
  load?: () => void;
}

interface ModeMixin {
  /** Required: Create the mode interface */
  create: (container: HTMLElement, options: JSONEditorOptions) => void;
  
  /** Get current data (return type depends on mode.data) */
  get?: () => any;
  
  /** Set data (parameter type depends on mode.data) */
  set?: (data: any) => void;
  
  /** Get data as text string */
  getText?: () => string;
  
  /** Set data from text string */
  setText?: (text: string) => void;
  
  /** Destroy the mode and clean up resources */
  destroy?: () => void;
  
  /** Additional mode-specific methods */
  [methodName: string]: any;
}