Note

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

---

A LIGHTWEIGHT VISUAL JSON EDITOR BUILT WITH PURE JAVASCRIPT

---

A pure JavaScript library with zero-dependency visual tree editing, per-node dynamic type switching, and full lifecycle hooks

Table of Contents

• Features
• Preview
• Architecture
• License
• Author

Features

npm install @pardnchiu/nanojson · Documentation

• Zero-dependency visual editing — A tree-based JSON editor built with pure JavaScript and native DOM APIs, no frontend framework required.
• Per-node dynamic type switching — Every node can switch live between string / number / boolean / object / array / null and re-render instantly.
• Full lifecycle hooks — Six hooks (beforeRender / rendered / beforeUpdate / updated / beforeDestroy / destroyed) with a 300ms debounce on updates.
• Flexible data import/export — Accepts a JavaScript object, a File object, or a URL string as the data source, plus one-click download of the current JSON.

Preview

Architecture

Full Architecture

graph TB
    A[JSON Input] --> B[JSONEditor]
    B --> C[JSONEditorNode Tree]
    C --> D[DOM Renderers]
    B --> E[Lifecycle Hooks]
    B --> F[Import / Export]

Loading

License

This project is licensed under the MIT LICENSE.

Author

邱敬幃 Pardn Chiu

hi@pardn.io
https://www.linkedin.com/in/pardnchiu

---

©️ 2025 邱敬幃 Pardn Chiu