tessl/npm-jsoneditor

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

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Editor Core

Name: tessl/npm-jsoneditor
Author: tessl

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

Capabilities

JSONEditor Constructor

Creates a new JSONEditor instance with specified configuration.

/**
 * Create a JSONEditor instance
 * @param container - HTML DIV element where the editor will be created
 * @param options - Configuration options object (optional)
 * @param json - Initial JSON data to load (optional)
 */
constructor(container: HTMLElement, options?: JSONEditorOptions, json?: any);

Usage Example:

import JSONEditor from "jsoneditor";

const container = document.getElementById("jsoneditor");
const options = {
  mode: "tree",
  search: true,
  history: true
};
const initialData = { message: "Hello World" };

const editor = new JSONEditor(container, options, initialData);

Get JSON Data

Retrieves the current JSON data from the editor.

/**
 * Get JSON data from the editor
 * @returns The current JSON data
 * @throws Error when editor contains invalid JSON (in code/text/preview modes)
 */
get(): any;

Set JSON Data

Sets JSON data in the editor, resetting the editor state.

/**
 * Set JSON data in the editor
 * @param json - JSON data to display
 */
set(json: any): void;

Get Text Data

Retrieves the current data as a JSON string.

/**
 * Get JSON data as string
 * @returns Contents as JSON string
 */
getText(): string;

Set Text Data

Sets data from a JSON string.

/**
 * Set text data in the editor
 * @param jsonString - JSON string to parse and display
 * @throws Error when jsonString is invalid JSON (in tree/view/form modes)
 */
setText(jsonString: string): void;

Update JSON Data

Replaces JSON data while maintaining editor state (expanded nodes, search, selection) in tree/form/view modes.

/**
 * Replace JSON data when the new data contains changes
 * @param json - New JSON data to display
 */
update(json: any): void;

Update Text Data

Replaces text data while maintaining editor state in tree/form/view modes.

/**
 * Replace text data when the new data contains changes
 * @param jsonString - New JSON string to parse and display
 * @throws Error when jsonString is invalid JSON (in tree/view/form modes)
 */
updateText(jsonString: string): void;

Destroy Editor

Cleans up the editor and removes all DOM elements, event listeners, and web workers.

/**
 * Destroy the editor and clean up resources
 */
destroy(): void;

Focus Editor

Sets focus to the JSONEditor.

/**
 * Set focus to the JSONEditor
 */
focus(): void;

Refresh Editor

Forces the editor to refresh the user interface and update all rendered HTML.

/**
 * Force refresh of the user interface
 * Useful when using onClassName with external dependencies
 */
refresh(): void;

Root Node Name Management

Manage the field name for the root node in tree-based modes.

/**
 * Set field name for the root node
 * @param name - Field name, or undefined to remove current name
 */
setName(name?: string): void;

/**
 * Get the current field name for the root node
 * @returns Current field name or undefined if not set
 */
getName(): string | undefined;

Usage Example:

// Set a name for the root node
editor.setName("userData");

// Get the current name
const currentName = editor.getName(); // "userData"

// Remove the name
editor.setName();