json-editor

JSON Editor =========== > ** Maintenance Mode Notice** > > This library is now in maintenance mode. While it remains stable and functional, active development has moved to [Jedison](https://github.com/germanbisurgi/jedison). > > We will continue to: > - Accept and review community pull requests > - Address critical bugs and security issues > - Keep the library functional for existing users > > For new projects or those seeking active development, consider using [Jedison](https://github.com/germanbisurgi/jedison). Fork of the inactive [jdorn/json-editor](https://github.com/jdorn/json-editor) using the updated fork [json-editor/json-editor](https://github.com/json-editor/json-editor). Some pull requests added from the original repo. JSON Editor takes a JSON Schema and uses it to generate an HTML form. It has full support for JSON Schema version 3 and 4 and can integrate with several popular CSS frameworks (bootstrap, spectre, tailwind). Take a look at this [example](https://json-editor.github.io/json-editor/form-submission.html) for a simple form submission case study. ### Online Demo Check out an interactive demo: https://json-editor.github.io/json-editor/ Or the JSON-Editor Interactive Playground: https://pmk65.github.io/jedemov2/dist/demo.html Install ----------------- Install package npm install @json-editor/json-editor Using a CDN You can also access older releases from CDN, using the landing page: https://www.jsdelivr.com/package/npm/@json-editor/json-editor For local usage download the [production version](https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.js) or the [development version](https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/nonmin/jsoneditor.js) Requirements ----------------- JSON Editor has no dependencies. It only needs a modern browser (tested in Chrome and Firefox). ### Optional Requirements The following are not required, but can improve the style and usability of JSON Editor when present. * A compatible JS template engine (Mustache, Underscore, Hogan, Handlebars, Lodash, Swig, Markup, or EJS) * A compatible CSS framework for styling (Spectre, Tailwind, Bootstrap4) * A compatible icon library (Spectre, jQueryUI, Font Awesome 3/4/5) * [SCEditor](http://www.sceditor.com/) for WYSIWYG editing of HTML or BBCode content * [SimpleMDE](https://simplemde.com/) for editing of Markdown content * [Ace Editor](http://ace.c9.io/) for editing code * [Jodit](https://xdsoft.net/jodit/) Open Source WYSIWYG editor * [Autocomplete](https://autocomplete.trevoreyre.com/#/javascript-component) Accessible autocomplete component * [Choices](https://github.com/jshjohnson/Choices) for nicer Select & Array boxes * [Select2](http://ivaynberg.github.io/select2/) for nicer Select boxes * [Selectize](https://selectize.github.io/selectize.js/) for nicer Select & Array boxes * [Flatpickr](https://flatpickr.js.org/) lightweight and powerful datetime picker * [Signature Pad](https://github.com/szimek/signature_pad) HTML5 canvas based smooth signature drawing * [Vanilla Picker](https://vanilla-picker.js.org/) A simple, easy to use vanilla JS color picker with alpha selection * [Cleave.js](https://github.com/nosir/cleave.js) for formatting your **<input/>** content while you are typing * [IMask.js](https://imask.js.org/) vanilla javascript input mask * [math.js](http://mathjs.org/) for more accurate floating point math (multipleOf, divisibleBy, etc.) * [DOMPurify](https://github.com/cure53/DOMPurify) DOM-only, super-fast, uber-tolerant XSS sanitizer. (If you want to use HTML format in titles/headers and descriptions.) Usage -------------- If you learn best by example, check these out: * Basic Usage Example - https://json-editor.github.io/json-editor/basic.html * ACE Editor Example - https://json-editor.github.io/json-editor/ace_editor.html * Advanced Usage Example - https://json-editor.github.io/json-editor/advanced.html * CSS Integration Example - https://json-editor.github.io/json-editor/css_integration.html * Base64 Editor Example (Muiltple Upload) - https://json-editor.github.io/json-editor/multiple_upload_base64.html * Choices Editor Example - https://json-editor.github.io/json-editor/choices.html * Cleave.js Editor Example - https://json-editor.github.io/json-editor/cleave.html * Colorpicker Editor Example - https://json-editor.github.io/json-editor/colorpicker.html * Datetime Editor Example - https://json-editor.github.io/json-editor/datetime.html * DescribedBy Hyperlink Editor Example - https://json-editor.github.io/json-editor/describedby.html * iMask.js Editor Example - https://json-editor.github.io/json-editor/imask.html * Radio Button JSON Editor Example - https://json-editor.github.io/json-editor/radio.html * Recursive JSON Editor Example - https://json-editor.github.io/json-editor/recursive.html * Select2 Editor Example - https://json-editor.github.io/json-editor/select2.html * Selectize Editor Example - https://json-editor.github.io/json-editor/selectize.html * Signature Pad Editor Example - https://json-editor.github.io/json-editor/signature.html * Star Rating Editor Example - https://json-editor.github.io/json-editor/starrating.html * Upload Editor Example - https://json-editor.github.io/json-editor/upload.html * WYSIWYG Editor Example - https://json-editor.github.io/json-editor/wysiwyg.html * Meta schema (schema builder) Example - https://json-editor.github.io/json-editor/meta-schema.html More examples can be found at the [JSON-Editor Interactive Playground](https://pmk65.github.io/jedemov2/dist/demo.html) The rest of this README contains detailed documentation about every aspect of JSON Editor. For more [under-the-hood documentation](https://github.com/json-editor/json-editor/wiki), check the wiki. ### Initialize ```js const element = document.getElementById('editor_holder'); const editor = new JSONEditor(element, options); ``` #### Options Options can be set globally or on a per-instance basis during instantiation. ```js // Set an option globally JSONEditor.defaults.options.theme = 'bootstrap4'; // Set an option during instantiation const editor = new JSONEditor(element, { //... theme: 'bootstrap4' }); ``` Here are all the available options:

Option	Description	Default Value
ajax	If true, JSON Editor will load external URLs in $ref via ajax.	false
ajaxBase	Allows schema references to work either with or without cors; set to protocol://host:port when api is served by different host.
ajaxCredentials	If true, JSON Editor will make ajax call with [credentials](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials).	false
ajax_cache_responses	If true, JSON Editor will cache external URLs' schemas in localStorage to avoid subsequent ajax calls.	false
ajax_cache_buster	If ajax_cache_responses is enabled, use this string to invalidate stale caches. E.g., this value should be changed when schemas are updated.	Current date in simplied ISO-8601 format (e.g., "2011-10-05" for October 5, 2011).
compact	If true, the label will not be displayed/added.	false
disable_array_add	If true, remove all "add row" buttons from arrays.	false
disable_array_delete	If true, remove all "delete row" buttons from arrays.	false
disable_array_delete_all_rows	If true, remove all "delete all rows" buttons from arrays.	false
disable_array_delete_last_row	If true, remove all "delete last row" buttons from arrays.	false
disable_array_reorder	If true, remove all "move up" and "move down" buttons from arrays.	false
enable_array_copy	If true, add copy buttons to arrays.	false
disable_collapse	If true, remove all collapse buttons from objects and arrays.	false
disable_edit_json	If true, remove all Edit JSON buttons from objects.	false
disable_properties	If true, remove all Edit Properties buttons from objects.	false
array_controls_top	If true, array controls (add, delete etc) will be displayed at top of list.	false
form_name_root	The first part of the `name` attribute of form inputs in the editor. An full example name is `root[person][name]` where "root" is the form_name_root.	root
iconlib	The icon library to use for the editor. See the CSS Integration section below for more info.	null
remove_button_labels	Display only icons in buttons. This works only if iconlib is set.	false
no_additional_properties	If true, objects can only contain properties defined with the properties keyword unless the property additionalProperties: true is specified in the object schema	false
refs	An object containing schema definitions for URLs. Allows you to pre-define external schemas.	{}
required_by_default	If true, all schemas that don't explicitly set the required property will be required.	false
keep_oneof_values	If true, makes oneOf copy properties over when switching.	true
keep_only_existing_values	If true, copy only existing properties over when switching.	false
schema	A valid JSON Schema to use for the editor. Version 3 and Version 4 of the draft specification are supported.	{}
show_errors	When to show validation errors in the UI. Valid values are interaction, change, always, and never.	"interaction"
startval	Seed the editor with an initial value. This should be valid against the editor's schema.	null
template	The JS template engine to use. See the Templates and Variables section below for more info.	default
theme	The CSS theme to use. See the CSS Integration section below for more info.<