Documentation v1.2.1
Home GitHub

Getting Started

This page covers installing NanoJSON and mounting your first editor instance.

Prerequisites

Installation

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 is injected automatically when JSONEditor is constructed (loadCSS, in src/data.js); to use a custom stylesheet, pass a css path in the config to override the default CDN URL.

First Mount

Prepare a mount point in HTML and initialize the editor with an id:

<div id="editor"></div>

<script>
  const editor = new JSONEditor({ id: "editor" });
</script>

If id is omitted, JSONEditor creates a new <section class="pd-json-editor"> element (available as editor.body) but does not attach it to the page — you need to appendChild it yourself. editor.body is assigned asynchronously after data loading, so it is still undefined right after the constructor returns; attach it inside when.beforeRender or when.rendered:

const editor = new JSONEditor({
  json: { name: "NanoJSON" },
  when: {
    rendered: () => document.querySelector("#host").appendChild(editor.body),
  },
});

Example

Mounting into #editor with initial data:

<section id="editor"></section>
<script>
  const editor = new JSONEditor({
    id: "editor",
    fill: false,
    json: { name: "NanoJSON", version: "1.2.1" },
  });
</script>
Live preview · @pardnchiu/nanojson@1.2.1

Next Steps

中文