Socket
Book a DemoInstallSign in
Socket

@pardnchiu/nanojson

Package Overview
Dependencies
Maintainers
1
Versions
14
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@pardnchiu/nanojson

A lightweight JSON editor built with pure JavaScript and native APIs. It features visual editing, dynamic type switching, and file import/export capabilities. Suitable for website embedding and JSON data editing.

1.0.0
latest
Source
npmnpm
Version published
Weekly downloads
31
342.86%
Maintainers
1
Weekly downloads
 
Created
Source

[!Note] This content is translated by LLM. Original text can be found here

NanoJSON

A lightweight JSON editor built with pure JavaScript and native APIs. It features visual editing, dynamic type switching, and file import/export capabilities. Suitable for website embedding and JSON data editing.

This project transitioned to MIT license on 2025/07/06, with .git-crypt encryption fully removed.

lang license version jsdelivr
readme readme

Key Features

No Third-Party Dependencies

Developed using native DOM APIs without any third-party dependencies, making it easy to integrate into any web project.

Visual JSON Editing Experience

Displays JSON data in a tree structure, supporting folding/unfolding, dynamic node addition/removal, and providing an intuitive editing interface.

Comprehensive Type Support

Supports five JSON data types (string, number, boolean, array, object) with real-time type switching while maintaining data integrity.

Installation

Install via npm

npm install @pardnchiu/nanojson

Include via CDN

UMD Version

<script src="https://cdn.jsdelivr.net/npm/@pardnchiu/nanojson@[VERSION]/dist/NanoJSON.js"></script>

ES Module Version

import { JSONEditor } from "https://cdn.jsdelivr.net/npm/@pardnchiu/nanojson@[VERSION]/dist/NanoJSON.esm.js";

Initialization

// Basic initialization
const editor = new JSONEditor({
  id: "json-editor-container",    // Element ID
  title: "JSON Editor",           // Editor title
  description: "Edit your JSON",  // Editor description
  fill: true,                     // Fill parent container
  json: {                         // Initial JSON data
    name: "NanoJSON",
    version: "0.3.4",
    features: ["Lightweight", "Pure JS", "Visual Editing"]
  }
});

// Advanced configuration
const advancedEditor = new JSONEditor({
  id: "advanced-editor",
  title: "Advanced JSON Editor",
  description: "Full-featured JSON editor",
  fill: 1,                        // Fill container (1 = true, 0 = false)
  button: {                       // Button configuration
    import: true,                 // File import
    export: true,                 // File export
    reset: true                   // Reset editor
  },
  when: {                         // Lifecycle callbacks
    rendered: () => {
      console.log("Editor rendered");
    },
    updated: () => {
      console.log("Editor content updated");
    }
  }
});

// Initialize from file
const fileEditor = new JSONEditor({
  id: "file-editor",
  path: "/data/sample.json",      // Load from URL
  // file: fileInput.files[0],    // Load from file object
});

Configuration Overview

const config = {
  id: "container-id",       // Target container element ID
  title: "",                // Editor title (default: "")
  description: "",          // Editor description (default: "")
  fill: 1,                  // Fill parent container (default: 1)
  json: {},                 // Initial JSON data object
  file: null,               // File object (for file upload)
  path: "",                 // JSON file URL path
  button: {                 // Button toggles
    import: true,           // File import button (default: true)
    export: true,           // File export button (default: true)
    reset: true             // Reset button (default: true)
  },
  when: {                   // Lifecycle events
    beforeRender: null,     // Before render
    rendered: null,         // After render
    beforeUpdate: null,     // Before update
    updated: null,          // After update
    beforeDestroy: null,    // Before destroy
    destroyed: null         // After destroy
  }
};

Editor Features

Data Types

String

// Text input editing
"Hello World"

Number

// Numeric input, automatically filters non-numeric characters
42
3.14159
-123

Boolean

// Dropdown selection
true
false

Array

// Supports nested structures, add/remove elements
[
  "item1",
  "item2", 
 123,
 true,
 {
   "nested": "object"
 }
]

Object

// Supports nested structures, add/remove properties
{
  "key1": "value1",
  "key2": 456,
  "nested": {
    "deep": "value"
  }
}

Available Functions

  • Get JSON Data

    const jsonString = editor.json;  // Get formatted JSON string
    console.log(jsonString);
    
  • Import Data

    // Import from object
    await editor.import({
      name: "New Data",
      version: "1.0.0"
    });
    
    // Import from file
    const fileInput = document.querySelector('input[type="file"]');
    await editor.import(fileInput.files[0]);
    
    // Import from URL
    await editor.import('/path/to/data.json');
    
  • Export File

    editor.export();  // Automatically download JSON file
    
  • Reset Editor

    editor.reset();   // Clear all content
    
  • Add Root Node

    editor.insert();  // Add an empty root node
    
  • Re-render

    editor.render();  // Force re-render the editor
    

Lifecycle

const editor = new JSONEditor({
  id: "editor",
  when: {
    beforeRender: () => {
      console.log("About to render");
      // Return false to prevent rendering
    },
    rendered: () => {
      console.log("Render complete");
      // Post-initialization handling
    },
    beforeUpdate: () => {
      console.log("About to update content");
      // Return false to prevent update
    },
    updated: () => {
      console.log("Content updated");
      // Post-update handling, e.g., sync to server
    },
    beforeDestroy: () => {
      console.log("About to destroy editor");
    },
    destroyed: () => {
      console.log("Editor destroyed");
    }
  }
});

File Handling Mechanism

Supported Formats

  • Only .json file format supported
  • Automatically validates JSON syntax correctness

Export Functionality

  • Automatically formats JSON (4-space indentation)
  • File naming format: JSONEditor-{timestamp}.json

License

This project is licensed under MIT.

Author

邱敬幃 Pardn Chiu

©️ 2025 邱敬幃 Pardn Chiu

Keywords

json

FAQs

Package last updated on 19 Jul 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc

U.S. Patent No. 12,346,443 & 12,314,394. Other pending.