pardnchiu/NanoJSON

Last updated 2026-10-30

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

A LIGHTWEIGHT VISUAL JSON EDITOR BUILT WITH PURE JAVASCRIPT

A zero-dependency vanilla JavaScript visual JSON editor with tree editing, per-node type switching, and lifecycle hooks

Table of Contents

• Features
• Architecture
• License
• Author

Features

npm install @pardnchiu/nanojson · Documentation

• Zero-dependency tree editing — A visual JSON tree editor built on pure JavaScript and native DOM APIs that embeds into any page without a frontend framework.
• Per-node type switching — Each node switches live between string / number / boolean / object / array, rebuilding only its own subtree instead of the whole tree.
• Cancelable lifecycle hooks — Returning false from a before* hook blocks the render or update, and continuous input collapses into a single update through a 300ms debounce.
• Three data sources, built-in file actions — Initial data comes from a JavaScript object, a File object, or a URL, with built-in Open, Download, and Reset buttons.
• Runtime read-only toggle — enable() / disable() switch read-only mode at any time, and nodes still expand and collapse while read-only.

Architecture

Full Architecture

graph TB
    A[Source: Object / File / URL] --> B[getJSON]
    B --> C[JSONEditor]
    C --> D[JSONEditorNode Tree]
    D --> E[DOM Renderers]
    C --> F[Lifecycle Hooks]
    D --> F
    C --> G[json / export Output]

graph TB
    A[Source: Object / File / URL] --> B[getJSON]
    B --> C[JSONEditor]
    C --> D[JSONEditorNode Tree]
    D --> E[DOM Renderers]
    C --> F[Lifecycle Hooks]
    D --> F
    C --> G[json / export Output]

License

Author