Note

This README was generated by SKILL, get the ZH version from here.

NanoJSON

A lightweight JSON visual editor built with pure JavaScript and native DOM APIs, embeddable in any webpage without third-party dependencies.

Table of Contents

• Features
• Architecture
• File Structure
• License
• Author
• Stars

Features

npm i @pardnchiu/nanojson · Documentation

Zero-Dependency Embeddable Design

NanoJSON is built entirely on native browser APIs with no runtime dependencies. It mounts into any existing DOM element via the id config option and injects its CSS dynamically, so integration requires nothing more than a single script tag or one npm install command.

Dynamic Type Switching with Structured Visual Editing

Every node supports live type switching between string, number, boolean, array, and object without losing existing data. The tree interface renders hierarchical JSON in a collapsible nested layout, with configurable initial collapse state (collapsed) and optional remove confirmation dialogs (confirmKeyRemove).

Full Lifecycle Control and Flexible Data Import

Six lifecycle hooks — beforeRender, rendered, beforeUpdate, updated, beforeDestroy, destroyed — each supporting a false return value to cancel the operation. Updates are debounced at 300ms to prevent excessive triggering. The import() method accepts plain objects, File objects, and URL strings, while export() downloads the formatted JSON in one click.

Architecture

graph LR
    U[Developer] -->|config| JE[JSONEditor]
    JE -->|jsonToChildren| JEN[JSONEditorNode]
    JEN -->|nested| JEN
    JE -->|hooks| LC[Lifecycle]
    LC -->|debounce 300ms| U

Loading

File Structure

NanoJSON/
├── dist/
│   ├── NanoJSON.js           # UMD minified build
│   ├── NanoJSON.esm.js       # ES Module build
│   ├── NanoJSON.debug.js     # Unminified debug build
│   └── NanoJSON.css          # Stylesheet
├── src/
│   ├── model/
│   │   ├── JSONEditor.js     # Main editor class
│   │   ├── JSONEditorNode.js # Node model class
│   │   └── Lifecycle.js      # Lifecycle manager
│   └── function/             # DOM utilities and component functions
├── page/
│   └── live.html             # Live demo page
└── package.json

License

This project is licensed under the MIT LICENSE.

Author

邱敬幃 Pardn Chiu

Stars

---

©️ 2025 邱敬幃 Pardn Chiu