API Reference

This page lists the complete public interface of JSONEditor and JSONEditorNode.

JSONEditor

new JSONEditor(config)

Parameter	Type	Required	Default	Description
`id`	`string`	No	—	Target DOM element id to mount into; omit to create a new `<section>` (not auto-attached to the page)
`title`	`string`	No	`""`	Editor title rendered in `<header>`
`description`	`string`	No	`""`	Editor description rendered in `<header>`
`fill`	`boolean`	No	`true`	Whether to set `data-fill="1"` to expand to fill the container
`readonly`	`boolean`	No	`false`	Whether to start in read-only mode (see the read-only mechanics in Core Concepts)
`collapsed`	`boolean`	No	`true`	Initial collapsed state of all nodes
`confirmKeyRemove`	`boolean`	No	`true`	Whether to show a `confirm()` dialog before removing a node
`css`	`string`	No	CDN URL	Custom CSS path to override the default injected stylesheet
`json`	`object`	No	`{}`	Initial data as a JavaScript object
`file`	`File \| string`	No	—	Initial data source (File object or URL string); mutually exclusive with `json`
`path`	`string`	No	—	Alias for `file` when passing a URL string
`button.import`	`boolean`	No	`true`	Show the import button
`button.export`	`boolean`	No	`true`	Show the export button
`button.reset`	`boolean`	No	`true`	Show the reset button
`when.beforeRender`	`() => boolean\|void`	No	—	See Lifecycle Hooks
`when.rendered`	`() => void`	No	—	Same
`when.beforeUpdate`	`() => boolean\|void`	No	—	Same
`when.updated`	`() => void`	No	—	Same
`when.beforeDestroy`	`() => boolean\|void`	No	—	Same (currently never invoked automatically — see the Lifecycle Hooks page)
`when.destroyed`	`() => void`	No	—	Same (also never invoked automatically)

Member	Type	Description
`json`	`getter → string`	Serializes the current data to a 4-space-indented JSON string; keyless root children are dropped (see Core Concepts)
`type`	`getter → string`	Root node type (`"object"` or `"array"`)
`children`	`JSONEditorNode[]`	Array of top-level child nodes
`body`	`HTMLElement`	Editor root DOM element
`editor`	`HTMLElement`	Node container DOM element (`<section>`)
`import(data)`	`async method`	Imports new data (`Object` / `File` / URL `string`) and re-renders (`render(true)`, which triggers `Lifecycle.update`)
`export()`	`method`	Downloads formatted JSON; filename is `NanoJSON-{timestamp}.json`; a single keyless root child is still written (unlike the `json` getter)
`reset()`	`method`	Equivalent to `import({})`
`enable()`	`method`	Disables read-only mode; removes the `disabled` attribute across the whole rendered DOM
`disable()`	`method`	Enables read-only mode; adds the `disabled` attribute across the whole rendered DOM
`render(isUpdate?)`	`method`	Re-renders all nodes; triggers `Lifecycle.update` only when `isUpdate === true` and the initial render has already completed
`insert()`	`method`	Appends an empty node at the root level (defaults to type `"string"`)

Nodes are created and managed internally by JSONEditor and rarely need to be constructed directly; the following public members are safe to access.

Property	Type	Description
`key`	`string`	Node key name; empty string for array children
`type`	`string`	`"string"` / `"number"` / `"boolean"` / `"object"` / `"array"` / `"null"`
`value`	`string`	Raw node value (valid only for non-container types)
`parent`	`JSONEditor \| JSONEditorNode`	Reference to the parent node
`children`	`JSONEditorNode[]`	Child node array (valid only for `object` / `array` types)
`collapsed`	`boolean`	Current collapsed state

Method	Description
`render()`	Renders and returns the DOM element for this node (calls the private `#create()`)
`addChild()`	Appends one empty child node and updates the DOM
`updateChild()`	Rebuilds the DOM and triggers `Lifecycle.update`
`setCollapsed()`	Toggles the collapsed state and re-renders
`json` (getter)	Returns the corresponding JavaScript value for this node (recursive), converted per its `type`

Type	JavaScript Value	Notes
`string`	`String`	Text value; input is rendered as a `textarea`, supports multi-line
`number`	`Number`	Switching to this type attempts `parseFloat` on the existing string value; clears if it can't be parsed
`boolean`	`Boolean`	Selected between `"true"` / `"false"` via a dropdown
`object`	`Object`	Supports unlimited nesting; switching to this type with no children auto-calls `addChild()`
`array`	`Array`	Same as above; children are shown by index, with no key input
`null`	`null`	Only reliably produced for object key values — array items that are `null` behave differently under the type system, see Core Concepts