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

Mode Management

Name: tessl/npm-jsoneditor
Author: tessl

Mode switching functionality enabling dynamic transitions between different editor interfaces and behaviors, plus mode registration system for custom editor plugins.

Capabilities

Set Editor Mode

Dynamically change the editor mode, switching between different editing interfaces.

/**
 * Change the mode of the editor
 * @param mode - Target mode (tree, view, form, code, text, preview)
 */
setMode(mode: "tree" | "view" | "form" | "code" | "text" | "preview"): void;

Usage Example:

// Switch to code mode
editor.setMode("code");

// Switch to tree mode
editor.setMode("tree");

// Switch to text mode
editor.setMode("text");

Get Current Mode

Retrieve the currently active editor mode.

/**
 * Get the current mode of the editor
 * @returns Current active mode
 */
getMode(): "tree" | "view" | "form" | "code" | "text" | "preview";

Usage Example:

const currentMode = editor.getMode();
console.log(`Current mode: ${currentMode}`); // e.g., "Current mode: tree"

Register Custom Mode

/**
 * Register a plugin mode for the JSON Editor
 * @param mode - Mode definition object or array of mode definitions
 */
static registerMode(mode: ModeDefinition | ModeDefinition[]): void;

Usage Example:

// Register a custom readonly mode
const readonlyMode = {
  mode: "readonly",
  mixin: {
    create: function(container, options) {
      // Custom mode implementation
      this.container = container;
      this.options = options;
      // Create readonly interface
    },
    get: function() {
      return this.json;
    },
    set: function(json) {
      this.json = json;
      // Update readonly display
    },
    getText: function() {
      return JSON.stringify(this.json);
    },
    setText: function(jsonString) {
      this.json = JSON.parse(jsonString);
      // Update readonly display
    }
  },
  data: "json"
};

JSONEditor.registerMode(readonlyMode);

// Use the custom mode
const editor = new JSONEditor(container, { mode: "readonly" });

Mode Configuration Access

Access the global mode configuration registry.

/**
 * Configuration for all registered modes
 * Object mapping mode names to their definitions
 */
static modes: { [modeName: string]: ModeDefinition };

Usage Example:

// Check available modes
const availableModes = Object.keys(JSONEditor.modes);
console.log("Available modes:", availableModes); // ["tree", "view", "form", "code", "text", "preview"]

// Get specific mode configuration
const treeMode = JSONEditor.modes.tree;
console.log("Tree mode data type:", treeMode.data); // "json"

Built-in Modes

Tree Mode

Description: Interactive tree editor with expand/collapse, drag-drop, context menus
Best for: Structured JSON editing, visual data manipulation
Data type: JSON
Features: Node manipulation, search, selection, validation highlighting, undo/redo

View Mode

Description: Read-only tree view with same visual structure as tree mode
Best for: JSON data inspection without editing capabilities
Data type: JSON
Features: Expand/collapse, search, selection (read-only)

Form Mode

Description: Form-like editor where only values can be changed
Best for: Editing JSON values while preserving structure
Data type: JSON
Features: Value editing, structure is read-only, validation

Code Mode

Description: Syntax-highlighted code editor powered by Ace
Best for: Direct JSON text editing with advanced editor features
Data type: Text
Features: Syntax highlighting, code folding, find/replace, themes

Text Mode

Description: Plain text editor for JSON strings
Best for: Simple JSON text editing without syntax highlighting
Data type: Text
Features: JSON formatting, validation, repair

Preview Mode

Description: Read-only preview for large JSON documents (up to 500MB)
Best for: Viewing and transforming large JSON files
Data type: Text
Features: Large document handling, transformations, formatting, search

Mode Definition Interface

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;
}

Mode Switching Behavior

When switching modes, JSONEditor automatically:

Preserves data: Converts between JSON and text representations as needed
Maintains name: Root node name is preserved across mode switches
Triggers callbacks: Calls onModeChange(newMode, oldMode) if configured
Handles validation: Re-applies schema validation in the new mode
Updates UI: Recreates the entire editor interface for the new mode

Usage Example:

const options = {  
  mode: "tree",
  modes: ["tree", "code", "text"], // Enable mode switching UI
  onModeChange: (newMode, oldMode) => {
    console.log(`Switched from ${oldMode} to ${newMode}`);
  }
};

const editor = new JSONEditor(container, options);

// Programmatic mode switching
editor.setMode("code"); // Triggers onModeChange callback

Error Handling

Mode operations can throw errors in certain conditions:

try {
  editor.setMode("nonexistent");
} catch (error) {
  console.error(error.message); // "Unknown mode 'nonexistent'"
}

try {
  JSONEditor.registerMode({
    mode: "tree", // Already exists
    mixin: {},
    data: "json"
  });
} catch (error) {
  console.error(error.message); // "Mode 'tree' already registered"  
}

Advanced Mode Registration

// Register multiple modes at once
JSONEditor.registerMode([
  {
    mode: "debug",
    mixin: { /* debug mode implementation */ },
    data: "json",
    load: () => console.log("Debug mode loaded")
  },
  {
    mode: "compact", 
    mixin: { /* compact mode implementation */ },
    data: "text"
  }
]);

// Mode with custom load function
const customMode = {
  mode: "custom",
  mixin: {
    create: function(container, options) {
      this.container = container;
      this.options = options;
    }
  },
  data: "json",
  load: function() {
    // Called after mode is loaded and mixin is applied
    console.log("Custom mode ready");
    this.setupCustomFeatures();
  }
};

JSONEditor.registerMode(customMode);