快速開始
本頁說明如何安裝 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。editor.body 在資料載入完成後才以非同步方式指定，建構子剛回傳時仍是 undefined；請在 when.beforeRender 或 when.rendered 內再掛載：
const editor = new JSONEditor({
json: { name: "NanoJSON" },
when: {
rendered: () => document.querySelector("#host").appendChild(editor.body),
},
});
範例
以初始資料掛載到 #editor：
<section id="editor"></section>
<script>
const editor = new JSONEditor({
id: "editor",
fill: false,
json: { name: "NanoJSON", version: "1.2.1" },
});
</script>