Documentation v1.2.1
Home GitHub

API Reference

This page lists every constructor config option of JSONEditor (src/model).

Exports

Build How to Get JSONEditor
UMD (dist/NanoJSON.js) Global window.JSONEditor
ES Module (dist/NanoJSON.esm.js) import { JSONEditor } from ".../NanoJSON.esm.js"

JSONEditor is the only exported class; JSONEditorNode and Lifecycle are not exported, and node instances are reachable only through editor.children.

Constructor

new JSONEditor(config)

If config is not an object, it logs Failed to load config. and returns.

Parameter Type Default Description
id string — Id of the DOM element to mount into; its content is replaced. Omit to create a new <section> (not attached to the page)
title string "" Editor title rendered in <header>
description string "" Editor description rendered in <header>; no <header> is rendered when both title and description are empty
fill boolean true Sets data-fill="1" (or "0") to control whether the editor fills its container
readonly boolean false Start in read-only mode; see Read-Only Mode
collapsed boolean true Initial collapsed state for nodes created from initial data, import(), and insert(); children added manually inside a nested node don't get it — see Core Concepts
confirmKeyRemove boolean true Whether to show confirm() before removing a node; same scope as collapsed
css string https://cdn.jsdelivr.net/npm/@pardnchiu/nanojson@1.1.7/dist/NanoJSON.css Custom CSS path; the default is used when missing or empty
file File | string — Initial data source (File object or URL string)
json object {} Initial data as a JavaScript object
path string — URL string source; the first non-null of file ?? json ?? path is used — see Data Loading
button.import boolean true Show the Open button and its hidden file input
button.export boolean true Show the Download button
button.reset boolean true Show the Reset button
when.beforeRender () => boolean | void — See Lifecycle Hooks
when.rendered () => void — Same
when.beforeUpdate () => boolean | void — Same
when.updated () => void — Same
when.beforeDestroy () => boolean | void — Same (currently never invoked automatically)
when.destroyed () => void — Same (currently never invoked automatically)

If button is not an object, all three buttons are shown; keys missing from the object count as true.

Example

Header, button visibility, and node settings come from the constructor config:

<section id="editor"></section>
<script>
  new JSONEditor({
    id: "editor",
    fill: false,
    title: "NanoJSON",
    description: "Configured from the constructor",
    collapsed: false,
    confirmKeyRemove: false,
    button: { import: false, reset: false },
    json: { name: "NanoJSON", tags: ["json", "editor"] },
  });
</script>
Live preview · @pardnchiu/nanojson@1.2.1

Further Reading

中文