Documentation
Home Live 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.

Loading Initial Data

The json / file / path config fields specify the initial data source; they're mutually exclusive:

// From a JavaScript object
const editor = new JSONEditor({
  id: "editor",
  json: { name: "NanoJSON", version: "1.2.0" },
});

// From a remote URL
const editor = new JSONEditor({
  id: "editor",
  file: "https://example.com/data.json",
});

If none are provided, the editor starts with an empty object {} and automatically calls insert() once to add an empty node.

Next Steps

中文