快速開始
本頁說明如何安裝 NanoJSON 並掛載第一個編輯器實例。
前置需求
- 現代瀏覽器（Chrome 90+、Firefox 88+、Safari 14+、Edge 90+）
- Node.js 18+（僅開發建置需要；執行期無任何依賴）
安裝
npm
npm install @pardnchiu/nanojson
CDN（UMD）
<script src="https://cdn.jsdelivr.net/npm/@pardnchiu/nanojson/dist/NanoJSON.js"></script>
ES Module
import { JSONEditor } from "https://cdn.jsdelivr.net/npm/@pardnchiu/nanojson/dist/NanoJSON.esm.js";
CSS 於 JSONEditor 建構時自動注入（loadCSS，見 src/data.js）；若需自訂樣式，於設定中傳入 css 路徑即可覆蓋預設的 CDN URL。
第一次掛載
於 HTML 中準備一個掛載點，並以 id 初始化編輯器：
<div id="editor"></div>
<script>
const editor = new JSONEditor({ id: "editor" });
</script>
若省略 id，JSONEditor 會建立一個新的 <section class="pd-json-editor"> 元素（存放於 editor.body），但不會自動掛載到頁面上，需自行 appendChild。
載入初始資料
json / file / path 三個設定欄位可指定初始資料，三者互斥擇一：
// 從 JavaScript 物件載入
const editor = new JSONEditor({
id: "editor",
json: { name: "NanoJSON", version: "1.2.0" },
});
// 從遠端 URL 載入
const editor = new JSONEditor({
id: "editor",
file: "https://example.com/data.json",
});
若三者皆未提供，編輯器以空物件 {} 啟動，並自動呼叫一次 insert() 新增一個空節點。