# pardnchiu/nanojson

> NanoJSON is a lightweight, zero-dependency visual JSON editor in vanilla JavaScript by Pardn Chiu: tree editing, per-node type switching, lifecycle hooks.

Maintained by 邱敬幃 Pardn Chiu (pardnchiu), Pardn Co., Ltd. Source: https://github.com/pardnchiu/nanojson

Full text in one file: [English](https://nanojson.pardn.io/llms-full.txt) · [中文](https://nanojson.pardn.io/zh/llms-full.txt)

## Overview

- [Home](https://nanojson.pardn.io/index.md): NanoJSON is a lightweight, zero-dependency visual JSON editor in vanilla JavaScript by Pardn Chiu: tree editing, per-node type switching, lifecycle hooks.
- [Getting Started](https://nanojson.pardn.io/getting-started.md): Install NanoJSON from npm or a CDN, mount a JSONEditor into the page, and attach a detached editor once its body is ready.

## Data Model

- [Core Concepts](https://nanojson.pardn.io/core-concepts.md): How JSONEditor initializes and mounts, how JSONEditorNode renders its own subtree, and which nodes inherit collapsed and confirmKeyRemove.
- [Type System](https://nanojson.pardn.io/core-concepts-type-system.md): How NanoJSON derives node types, edits and serializes each type, changes values on a type switch, and handles null inside objects and arrays.
- [Serialization](https://nanojson.pardn.io/core-concepts-serialization.md): How NanoJSON turns its node tree into JSON, and why editor.json and editor.export() return different results for array data.
- [Data Loading](https://nanojson.pardn.io/core-concepts-data-loading.md): Load NanoJSON data from an object, a File, or a URL; config precedence, import() and reset(), the footer buttons, and failure behavior.
- [Read-Only Mode](https://nanojson.pardn.io/core-concepts-readonly.md): How the readonly config, enable(), and disable() toggle disabled across the NanoJSON editor DOM, and when to call disable() again.

## Runtime

- [Lifecycle Hooks](https://nanojson.pardn.io/lifecycle-hooks.md): The six NanoJSON lifecycle hooks, which ones can cancel by returning false, the 300ms update debounce, and why destroy hooks never fire.
- [Architecture](https://nanojson.pardn.io/architecture.md): A one-diagram overview of how JSONEditor, JSONEditorNode, Lifecycle, and the DOM render helpers fit together in NanoJSON.

## Reference

- [API Reference](https://nanojson.pardn.io/api-reference.md): Every NanoJSON JSONEditor constructor option: mount target, header, fill, readonly, collapse, data source, buttons, CSS, and when hooks.
- [Instance Members](https://nanojson.pardn.io/api-reference-instance.md): Properties and methods of a NanoJSON JSONEditor instance: json, type, children, body, import(), export(), reset(), render(), insert().
- [JSONEditorNode](https://nanojson.pardn.io/api-reference-node.md): Public fields and methods of NanoJSON's JSONEditorNode: id, key, type, value, children, collapsed, addChild(), setCollapsed(), json.

## Symbols

Exported symbol -> page that documents it.

- `JSONEditor` (src/model): [API Reference](https://nanojson.pardn.io/api-reference.md), [Core Concepts](https://nanojson.pardn.io/core-concepts.md)

## 中文文件

- [首頁](https://nanojson.pardn.io/zh/index.md): NanoJSON 是邱敬幃開發的輕量零依賴視覺化 JSON 編輯器，以純 JavaScript 實作樹狀編輯、節點型別即時切換與生命週期 hooks。
- [快速開始](https://nanojson.pardn.io/zh/getting-started.md): 從 npm 或 CDN 安裝 NanoJSON、掛載 JSONEditor，以及在 body 就緒後掛上未指定 id 的編輯器。
- [核心概念](https://nanojson.pardn.io/zh/core-concepts.md): JSONEditor 如何初始化與掛載、JSONEditorNode 如何局部渲染子樹，以及哪些節點會繼承 collapsed 設定。
- [型別系統](https://nanojson.pardn.io/zh/core-concepts-type-system.md): NanoJSON 如何推導節點型別、各型別的輸入與輸出、切換型別時值的變化，以及 null 的邊界情況。
- [序列化](https://nanojson.pardn.io/zh/core-concepts-serialization.md): NanoJSON 如何將節點樹輸出成 JSON，以及 editor.json 與 export() 對陣列資料結果不同的原因。
- [資料載入](https://nanojson.pardn.io/zh/core-concepts-data-loading.md): 從物件、File 或 URL 載入 NanoJSON 資料：設定優先序、import() 與 reset()、頁尾按鈕與失敗行為。
- [唯讀模式](https://nanojson.pardn.io/zh/core-concepts-readonly.md): readonly 設定與 enable()、disable() 如何切換 NanoJSON 編輯器的 disabled，以及何時需重新呼叫。
- [生命週期鉤子](https://nanojson.pardn.io/zh/lifecycle-hooks.md): NanoJSON 六個生命週期鉤子、哪些可回傳 false 取消、300ms 更新防抖，以及 destroy 鉤子為何不會觸發。
- [架構](https://nanojson.pardn.io/zh/architecture.md): 以一張圖概覽 NanoJSON 的 JSONEditor、JSONEditorNode、Lifecycle 與 DOM 渲染函式如何組合。
- [API 參考](https://nanojson.pardn.io/zh/api-reference.md): NanoJSON JSONEditor constructor 全部設定：掛載目標、標題、填滿、唯讀、折疊、資料來源、按鈕、CSS 與鉤子。
- [實例成員](https://nanojson.pardn.io/zh/api-reference-instance.md): JSONEditor 實例的屬性與方法：json、children、body、import()、export()、reset() 等。
- [節點 API](https://nanojson.pardn.io/zh/api-reference-node.md): NanoJSON JSONEditorNode 的公開欄位與方法：key、type、value、children、collapsed、addChild()。

## Optional

- [Release Notes](https://nanojson.pardn.io/released/index.md): pardnchiu/nanojson changelog by version