json-editor

library0.7.28jsnpmunverified

JSON Editor is a JavaScript library that generates HTML forms from JSON Schema (versions 3 and 4). Version 0.7.28 is the latest stable release as of this writing, but the project appears to be in maintenance mode with no recent updates. It supports multiple CSS frameworks (Bootstrap, Foundation, jQueryUI) and template engines (Mustache, Underscore, Handlebars, etc.). Unlike newer alternatives like react-jsonschema-form, JSON Editor is dependency-free and works with vanilla JS, making it suitable for legacy projects or where a lightweight, framework-agnostic solution is needed.

devops

npm install json-editor

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · JSON-EDITOR

json-editor

devopsjavascriptv0.7.28

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

JSONEditor

✓ import JSONEditor from 'json-editor'

✗ const JSONEditor = require('json-editor')

Module is CommonJS-only; the default export is the constructor.

JSONEditor (as class)

✓ var editor = new JSONEditor(element, options);

✗ var editor = JSONEditor.create(element, options);

Must be instantiated with 'new'.

Defaults

✓ JSONEditor.defaults.options.theme = 'bootstrap3';

✗ JSONEditor.options.theme = 'bootstrap3';

Options are nested under 'defaults'.

Creates a JSON Schema-driven form with basic fields, retrieves the current value, and sets up change listener.

import JSONEditor from 'json-editor'; const schema = { type: 'object', properties: { name: { type: 'string', title: 'Name' }, age: { type: 'integer', title: 'Age', minimum: 0 } } }; const start = { name: 'John', age: 30 }; const element = document.getElementById('editor_holder'); const editor = new JSONEditor(element, { schema: schema, startval: start, theme: 'bootstrap3', iconlib: 'fontawesome4', ajax: false, disable_edit_json: true }); // Get value when needed const value = editor.getValue(); console.log(value); // Also available: editor.on('change', () => { /* handle changes */ });

Debug

Known issues

gotchaThe 'getValue()' method may not include fields that are conditionally hidden via 'if/then/else' or 'oneOf'.

fix

Set 'keep_oneof_values: false' to remove unselected options from the output, or check for hidden fields manually.

affects: >=0.0.0

gotchaWhen using 'type: array' with 'enum' values, the editor may not handle duplicates correctly.

fix

Manually deduplicate values after retrieving from editor.

affects: >=0.0.0

deprecatedThe 'disable_edit_json' and 'disable_properties' options are deprecated in favor of 'no_additional_properties'.

fix

Use 'no_additional_properties: true' to disable editing JSON and properties.

affects: >=0.7.0

gotchaTemplate engines are not bundled; you must include e.g. Mustache yourself for them to work.

fix

Include '<script src="mustache.js"></script>' before loading JSON Editor.

affects: >=0.0.0

breakingTheme 'bootstrap2' was removed in a later version; use 'bootstrap3' or 'foundation5' instead.

fix

Switch to 'bootstrap3' or another supported theme.

affects: >=0.7.0

gotchaWhen using 'disable_array_reorder: true', the 'move up' and 'move down' buttons are hidden but the array can still be reordered via drag-and-drop if enabled.

fix

To fully disable reordering, also set 'disable_array_reorder: true' and ensure drag-and-drop is disabled (no built-in option).

affects: >=0.0.0

deprecatedThe 'disable_collapse' option is deprecated; use 'collapsed' property on object/array schemas instead.

fix

Set 'options.collapsed: true' on the schema to default collapsed.

affects: >=0.7.0

Errors

Common errors & fixes

TypeError: JSONEditor is not a constructor

Using CommonJS require in an ESM project or missing the default import correctly.

fix

Use `import JSONEditor from 'json-editor'` or `const JSONEditor = require('json-editor').default` if using TypeScript with esModuleInterop.

Uncaught ReferenceError: Mustache is not defined

A template engine is required but not included.

fix

Include a compatible template engine script before json-editor, or set `template: 'default'` to use the built-in simple template.

Uncaught TypeError: (intermediate value).getValue is not a function

Calling getValue() on an element instead of the editor instance.

fix

Use `editor.getValue()` after instantiating with `new JSONEditor(element, options)`.

Upgrade

Version history

0.7.28latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

12 hits · last 30 days

node

Resources

githubhttps://github.com/jdorn/json-editor ↗

packagejson-editor ↗

homepagehttps://github.com/jdorn/json-editor#readme ↗