{"id":13473308,"url":"https://github.com/jdorn/json-editor","last_synced_at":"2025-05-13T00:08:14.921Z","repository":{"id":12085387,"uuid":"14673229","full_name":"jdorn/json-editor","owner":"jdorn","description":"JSON Schema Based Editor","archived":false,"fork":false,"pushed_at":"2018-04-18T13:46:26.000Z","size":2285,"stargazers_count":5812,"open_issues_count":459,"forks_count":1081,"subscribers_count":225,"default_branch":"master","last_synced_at":"2025-05-13T00:08:06.194Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jdorn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-11-25T01:30:00.000Z","updated_at":"2025-05-09T22:06:07.000Z","dependencies_parsed_at":"2022-09-09T03:23:27.726Z","dependency_job_id":null,"html_url":"https://github.com/jdorn/json-editor","commit_stats":null,"previous_names":[],"tags_count":41,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdorn%2Fjson-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdorn%2Fjson-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdorn%2Fjson-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdorn%2Fjson-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jdorn","download_url":"https://codeload.github.com/jdorn/json-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253843215,"owners_count":21972873,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T16:01:02.524Z","updated_at":"2025-05-13T00:08:14.901Z","avatar_url":"https://github.com/jdorn.png","language":"JavaScript","readme":"# Deprecation notice\n\nThis repo is no longer maintained (see also https://github.com/jdorn/json-editor/issues/800)\n\n**Development is continued at https://github.com/json-editor/json-editor**\n\nFor details please visit https://github.com/json-editor/json-editor/issues/5\n\n---\n\nJSON Editor\n===========\n\n![JSON Schema -\u003e HTML Editor -\u003e JSON](https://raw.github.com/jdorn/json-editor/master/jsoneditor.png)\n\nJSON Editor takes a JSON Schema and uses it to generate an HTML form.  \nIt has full support for JSON Schema version 3 and 4 and can integrate with several popular CSS frameworks (bootstrap, foundation, and jQueryUI).\n\nCheck out an interactive demo (demo.html): http://jeremydorn.com/json-editor/\n\nDownload the [production version][min] (22K when gzipped) or the [development version][max].\n\n[min]: https://raw.github.com/jdorn/json-editor/master/dist/jsoneditor.min.js\n[max]: https://raw.github.com/jdorn/json-editor/master/dist/jsoneditor.js\n\nRequirements\n-----------------\n\nJSON Editor has no dependencies. It only needs a modern browser (tested in Chrome and Firefox).\n\n### Optional Requirements\n\nThe following are not required, but can improve the style and usability of JSON Editor when present.\n\n*  A compatible JS template engine (Mustache, Underscore, Hogan, Handlebars, Swig, Markup, or EJS)\n*  A compatible CSS framework for styling (bootstrap 2/3, foundation 3/4/5, or jqueryui)\n*  A compatible icon library (bootstrap 2/3 glyphicons, foundation icons 2/3, jqueryui, or font awesome 3/4)\n*  [SCEditor](http://www.sceditor.com/) for WYSIWYG editing of HTML or BBCode content\n*  [EpicEditor](http://epiceditor.com/) for editing of Markdown content\n*  [Ace Editor](http://ace.c9.io/) for editing code\n*  [Select2](http://ivaynberg.github.io/select2/) for nicer Select boxes\n*  [Selectize](http://brianreavis.github.io/selectize.js/) for nicer Select \u0026 Array boxes\n*  [math.js](http://mathjs.org/) for more accurate floating point math (multipleOf, divisibleBy, etc.)\n\nUsage\n--------------\n\nIf you learn best by example, check these out:\n\n*  Basic Usage Example - http://rawgithub.com/jdorn/json-editor/master/examples/basic.html\n*  Advanced Usage Example - http://rawgithub.com/jdorn/json-editor/master/examples/advanced.html\n*  CSS Integration Example - http://rawgithub.com/jdorn/json-editor/master/examples/css_integration.html\n\nThe rest of this README contains detailed documentation about every aspect of JSON Editor.  For more under-the-hood documentation, check the wiki.\n\n### Initialize\n\n```js\nvar element = document.getElementById('editor_holder');\n\nvar editor = new JSONEditor(element, options);\n```\n\n#### Options\n\nOptions can be set globally or on a per-instance basis during instantiation.\n\n```js\n// Set an option globally\nJSONEditor.defaults.options.theme = 'bootstrap2';\n\n// Set an option during instantiation\nvar editor = new JSONEditor(element, {\n  //...\n  theme: 'bootstrap2'\n});\n```\n\nHere are all the available options:\n\n\u003ctable\u003e\n  \u003cthead\u003e\n  \u003ctr\u003e\n    \u003cth\u003eOption\u003c/th\u003e\n    \u003cth\u003eDescription\u003c/th\u003e\n    \u003cth\u003eDefault Value\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eajax\u003c/td\u003e\n    \u003ctd\u003eIf \u003ccode\u003etrue\u003c/code\u003e, JSON Editor will load external URLs in \u003ccode\u003e$ref\u003c/code\u003e via ajax.\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003edisable_array_add\u003c/td\u003e\n    \u003ctd\u003eIf \u003ccode\u003etrue\u003c/code\u003e, remove all \"add row\" buttons from arrays.\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003edisable_array_delete\u003c/td\u003e\n    \u003ctd\u003eIf \u003ccode\u003etrue\u003c/code\u003e, remove all \"delete row\" buttons from arrays.\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003edisable_array_reorder\u003c/td\u003e\n    \u003ctd\u003eIf \u003ccode\u003etrue\u003c/code\u003e, remove all \"move up\" and \"move down\" buttons from arrays.\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003edisable_collapse\u003c/td\u003e\n    \u003ctd\u003eIf \u003ccode\u003etrue\u003c/code\u003e, remove all collapse buttons from objects and arrays.\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003edisable_edit_json\u003c/td\u003e\n    \u003ctd\u003eIf \u003ccode\u003etrue\u003c/code\u003e, remove all Edit JSON buttons from objects.\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003edisable_properties\u003c/td\u003e\n    \u003ctd\u003eIf \u003ccode\u003etrue\u003c/code\u003e, remove all Edit Properties buttons from objects.\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eform_name_root\u003c/td\u003e\n    \u003ctd\u003eThe 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.\u003c/td\u003e\n    \u003ctd\u003eroot\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eiconlib\u003c/td\u003e\n    \u003ctd\u003eThe icon library to use for the editor.  See the \u003cstrong\u003eCSS Integration\u003c/strong\u003e section below for more info.\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003enull\u003c/code\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eno_additional_properties\u003c/td\u003e\n    \u003ctd\u003eIf \u003ccode\u003etrue\u003c/code\u003e, objects can only contain properties defined with the \u003ccode\u003eproperties\u003c/code\u003e keyword.\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003erefs\u003c/td\u003e\n    \u003ctd\u003eAn object containing schema definitions for URLs.  Allows you to pre-define external schemas.\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003e{}\u003c/code\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003erequired_by_default\u003c/td\u003e\n    \u003ctd\u003eIf \u003ccode\u003etrue\u003c/code\u003e, all schemas that don't explicitly set the \u003ccode\u003erequired\u003c/code\u003e property will be required.\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003ekeep_oneof_values\u003c/td\u003e\n    \u003ctd\u003eIf \u003ccode\u003etrue\u003c/code\u003e, makes oneOf copy properties over when switching.\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003etrue\u003c/code\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eschema\u003c/td\u003e\n    \u003ctd\u003eA valid JSON Schema to use for the editor.  Version 3 and Version 4 of the draft specification are supported.\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003e{}\u003c/code\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eshow_errors\u003c/td\u003e\n    \u003ctd\u003eWhen to show validation errors in the UI.  Valid values are \u003ccode\u003einteraction\u003c/code\u003e, \u003ccode\u003echange\u003c/code\u003e, \u003ccode\u003ealways\u003c/code\u003e, and \u003ccode\u003enever\u003c/code\u003e.\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003e\"interaction\"\u003c/code\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003estartval\u003c/td\u003e\n    \u003ctd\u003eSeed the editor with an initial value.  This should be valid against the editor's schema.\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003enull\u003c/code\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003etemplate\u003c/td\u003e\n    \u003ctd\u003eThe JS template engine to use. See the \u003cstrong\u003eTemplates and Variables\u003c/strong\u003e section below for more info.\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003edefault\u003c/code\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003etheme\u003c/td\u003e\n    \u003ctd\u003eThe CSS theme to use.  See the \u003cstrong\u003eCSS Integration\u003c/strong\u003e section below for more info.\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003ehtml\u003c/code\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003edisplay_required_only\u003c/td\u003e\n    \u003ctd\u003eIf \u003ccode\u003etrue\u003c/code\u003e, only required properties will be included by default.\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n__*Note__ If the `ajax` property is `true` and JSON Editor needs to fetch an external url, the api methods won't be available immediately.\nListen for the `ready` event before calling them.\n\n```js\neditor.on('ready',function() {\n  // Now the api methods will be available\n  editor.validate();\n});\n```\n\n### Get/Set Value\n\n```js\neditor.setValue({name: \"John Smith\"});\n\nvar value = editor.getValue();\nconsole.log(value.name) // Will log \"John Smith\"\n```\n\nInstead of getting/setting the value of the entire editor, you can also work on individual parts of the schema:\n\n```js\n// Get a reference to a node within the editor\nvar name = editor.getEditor('root.name');\n\n// `getEditor` will return null if the path is invalid\nif(name) {\n  name.setValue(\"John Smith\");\n\n  console.log(name.getValue());\n}\n```\n\n\n### Validate\n\nWhen feasible, JSON Editor won't let users enter invalid data.  This is done by\nusing input masks and intelligently enabling/disabling controls.\n\nHowever, in some cases it is still possible to enter data that doesn't validate against the schema.\n\nYou can use the `validate` method to check if the data is valid or not.\n\n```javascript\n// Validate the editor's current value against the schema\nvar errors = editor.validate();\n\nif(errors.length) {\n  // errors is an array of objects, each with a `path`, `property`, and `message` parameter\n  // `property` is the schema keyword that triggered the validation error (e.g. \"minLength\")\n  // `path` is a dot separated path into the JSON object (e.g. \"root.path.to.field\")\n  console.log(errors);\n}\nelse {\n  // It's valid!\n}\n```\n\nBy default, this will do the validation with the editor's current value.\nIf you want to use a different value, you can pass it in as a parameter.\n\n\n```javascript\n// Validate an arbitrary value against the editor's schema\nvar errors = editor.validate({\n  value: {\n    to: \"test\"\n  }\n});\n```\n\n### Listen for Changes\n\nThe `change` event is fired whenever the editor's value changes.\n\n```javascript\neditor.on('change',function() {\n  // Do something\n});\n\neditor.off('change',function_reference);\n```\n\nYou can also watch a specific field for changes:\n\n```javascript\neditor.watch('path.to.field',function() {\n  // Do something\n});\n\neditor.unwatch('path.to.field',function_reference);\n```\n\n### Enable and Disable the Editor\n\nThis lets you disable editing for the entire form or part of the form.\n\n```js\n// Disable entire form\neditor.disable();\n\n// Disable part of the form\neditor.getEditor('root.location').disable();\n\n// Enable entire form\neditor.enable();\n\n// Enable part of the form\neditor.getEditor('root.location').enable();\n\n// Check if form is currently enabled\nif(editor.isEnabled()) alert(\"It's editable!\");\n```\n\n### Destroy\n\nThis removes the editor HTML from the DOM and frees up resources.\n\n```javascript\neditor.destroy();\n```\n\nCSS Integration\n----------------\nJSON Editor can integrate with several popular CSS frameworks out of the box.\n\nThe currently supported themes are:\n\n*  barebones\n*  html (the default)\n*  bootstrap2\n*  bootstrap3\n*  foundation3\n*  foundation4\n*  foundation5\n*  foundation6\n*  jqueryui\n\nThe default theme is `html`, which does not rely on an external framework.\nThis default can be changed by setting the `JSONEditor.defaults.options.theme` variable.\n\nIf you want to specify your own styles with CSS, you can use `barebones`, which includes almost no classes or inline styles.\n\n```javascript\nJSONEditor.defaults.options.theme = 'foundation5';\n```\n\nYou can override this default on a per-instance basis by passing a `theme` parameter in when initializing:\n\n```js\nvar editor = new JSONEditor(element,{\n  schema: schema,\n  theme: 'jqueryui'\n});\n```\n\n### Icon Libraries\n\nJSON Editor also supports several popular icon libraries.  The icon library must be set independently of the theme, even though there is some overlap.\n\nThe supported icon libs are:\n\n*  bootstrap2 (glyphicons)\n*  bootstrap3 (glyphicons)\n*  foundation2\n*  foundation3\n*  jqueryui\n*  fontawesome3\n*  fontawesome4\n\nBy default, no icons are used. Just like the CSS theme, you can set the icon lib globally or when initializing:\n\n```js\n// Set the global default\nJSONEditor.defaults.options.iconlib = \"bootstrap2\";\n\n// Set the icon lib during initialization\nvar editor = new JSONEditor(element,{\n  schema: schema,\n  iconlib: \"fontawesome4\"\n});\n```\n\nIt's possible to create your own custom themes and/or icon libs as well.  Look at any of the existing classes for examples.\n\n\nJSON Schema Support\n-----------------\n\nJSON Editor fully supports version 3 and 4 of the JSON Schema [core][core] and [validation][validation] specifications.  \nSome of The [hyper-schema][hyper] specification is supported as well.\n\n[core]: http://json-schema.org/latest/json-schema-core.html\n[validation]: http://json-schema.org/latest/json-schema-validation.html\n[hyper]: http://json-schema.org/latest/json-schema-hypermedia.html\n\n### $ref and definitions\n\nJSON Editor supports schema references to external URLs and local definitions.  Here's an example showing both:\n\n```json\n{\n  \"type\": \"object\",\n  \"properties\": {\n    \"name\": {\n      \"title\": \"Full Name\",\n      \"$ref\": \"#/definitions/name\"\n    },\n    \"location\": {\n      \"$ref\": \"http://mydomain.com/geo.json\"\n    }\n  },\n  \"definitions\": {\n    \"name\": {\n      \"type\": \"string\",\n      \"minLength\": 5\n    }\n  }\n}\n```\n\nLocal references must point to the `definitions` object of the root node of the schema.\nSo, `#/customkey/name` will throw an exception.\n\nIf loading an external url via Ajax, the url must either be on the same domain or return the correct HTTP cross domain headers.\nIf your URLs don't meet this requirement, you can pass in the references to JSON Editor during initialization (see Usage section above).\n\nSelf-referential $refs are supported.  Check out `examples/recursive.html` for usage examples.\n\n### hyper-schema links\n\nThe `links` keyword from the hyper-schema specification can be used to add links to related documents.\n\nJSON Editor will use the `mediaType` property of the links to determine how best to display them.  \nImage, audio, and video links will display the media inline as well as providing a text link.  \n\nHere are a couple examples:\n\nSimple text link\n```js+jinja\n{\n  \"title\": \"Blog Post Id\",\n  \"type\": \"integer\",\n  \"links\": [\n    {\n      \"rel\": \"comments\",\n      \"href\": \"/posts/{{self}}/comments/\",\n      // Optional - set CSS classes for the link\n      \"class\": \"comment-link open-in-modal primary-text\"\n    }\n  ]\n}\n```\n\nMake link download when clicked\n```js+jinja\n{\n  \"title\": \"Document filename\",\n  \"type\": \"string\",\n  \"links\": [\n    {\n      \"rel\": \"Download File\",\n      \"href\": \"/documents/{{self}}\",\n      // Can also set `download` to a string as per the HTML5 spec\n      \"download\": true\n    }\n  ]\n}\n```\n\nShow a video preview (using HTML5 video)\n```js+jinja\n{\n  \"title\": \"Video filename\",\n  \"type\": \"string\",\n  \"links\": [\n    {\n      \"href\": \"/videos/{{self}}.mp4\",\n      \"mediaType\": \"video/mp4\"\n    }\n  ]\n}\n```\n\nThe `href` property is a template that gets re-evaluated every time the value changes.\nThe variable `self` is always available.  Look at the __Dependencies__ section below for how to include other fields or use a custom template engine.\n\n### Property Ordering\n\nThere is no way to specify property ordering in JSON Schema (although this may change in v5 of the spec).\n\nJSON Editor introduces a new keyword `propertyOrder` for this purpose.  The default property order if unspecified is 1000.  Properties with the same order will use normal JSON key ordering.\n\n```json\n{\n  \"type\": \"object\",\n  \"properties\": {\n    \"prop1\": {\n      \"type\": \"string\"\n    },\n    \"prop2\": {\n      \"type\": \"string\",\n      \"propertyOrder\": 10\n    },\n    \"prop3\": {\n      \"type\": \"string\",\n      \"propertyOrder\": 1001\n    },\n    \"prop4\": {\n      \"type\": \"string\",\n      \"propertyOrder\": 1\n    }\n  }\n}\n```\n\nIn the above example schema, `prop1` does not have an order specified, so it will default to 1000.\nSo, the final order of properties in the form (and in returned JSON data) will be:\n\n1.  prop4 (order 1)\n2.  prop2 (order 10)\n3.  prop1 (order 1000)\n4.  prop3 (order 1001)\n\n### Default Properties\n\nThe default behavior of JSON Editor is to include all object properties defined with the `properties` keyword.\n\nTo override this behaviour, you can use the keyword `defaultProperties` to set which ones are included:\n\n```json\n{\n  \"type\": \"object\",\n  \"properties\": {\n    \"name\": {\"type\": \"string\"},\n    \"age\": {\"type\": \"integer\"}\n  },\n  \"defaultProperties\": [\"name\"]\n}\n```\n\nNow, only the `name` property above will be included by default.  You can use the \"Object Properties\" button\nto add the \"age\" property back in.\n\n### format\n\nJSON Editor supports many different formats for schemas of type `string`.  They will work with schemas of type `integer` and `number` as well, but some formats may produce weird results.\nIf the `enum` property is specified, `format` will be ignored.\n\nJSON Editor uses HTML5 input types, so some of these may render as basic text input in older browsers:\n\n*  color\n*  date\n*  datetime\n*  datetime-local\n*  email\n*  month\n*  number\n*  range\n*  tel\n*  text\n*  textarea\n*  time\n*  url\n*  week\n\nHere is an example that will show a color picker in browsers that support it:\n\n```json\n{\n  \"type\": \"object\",\n  \"properties\": {\n    \"color\": {\n      \"type\": \"string\",\n      \"format\": \"color\"\n    }\n  }\n}\n```\n\n#### Specialized String Editors\n\nIn addition to the standard HTML input formats, JSON Editor can also integrate with several 3rd party specialized editors.  These libraries are not included in JSON Editor and you must load them on the page yourself.\n\n__SCEditor__ provides WYSIWYG editing of HTML and BBCode.  To use it, set the format to `html` or `bbcode` and set the `wysiwyg` option to `true`:\n\n```json\n{\n  \"type\": \"string\",\n  \"format\": \"html\",\n  \"options\": {\n    \"wysiwyg\": true\n  }\n}\n```\n\nYou can configure SCEditor by setting configuration options in `JSONEditor.plugins.sceditor`.  Here's an example:\n\n```js\nJSONEditor.plugins.sceditor.emoticonsEnabled = false;\n```\n\n__EpicEditor__ is a simple Markdown editor with live preview.  To use it, set the format to `markdown`:\n\n```json\n{\n  \"type\": \"string\",\n  \"format\": \"markdown\"\n}\n```\n\nYou can configure EpicEditor by setting configuration options in `JSONEditor.plugins.epiceditor`.  Here's an example:\n\n```js\nJSONEditor.plugins.epiceditor.basePath = 'epiceditor';\n```\n\n__Ace Editor__ is a syntax highlighting source code editor. You can use it by setting the format to any of the following:\n\n*  actionscript\n*  batchfile\n*  c\n*  c++\n*  cpp (alias for c++)\n*  coffee\n*  csharp\n*  css\n*  dart\n*  django\n*  ejs\n*  erlang\n*  golang\n*  groovy\n*  handlebars\n*  haskell\n*  haxe\n*  html\n*  ini\n*  jade\n*  java\n*  javascript\n*  json\n*  less\n*  lisp\n*  lua\n*  makefile\n*  markdown\n*  matlab\n*  mysql\n*  objectivec\n*  pascal\n*  perl\n*  pgsql\n*  php\n*  python\n*  r\n*  ruby\n*  sass\n*  scala\n*  scss\n*  smarty\n*  sql\n*  stylus\n*  svg\n*  twig\n*  vbscript\n*  xml\n*  yaml\n\n```json\n{\n  \"type\": \"string\",\n  \"format\": \"yaml\"\n}\n```\n\nYou can use the hyper-schema keyword `media` instead of `format` too if you prefer for formats with a mime type:\n\n```json\n{\n  \"type\": \"string\",\n  \"media\": {\n    \"type\": \"text/html\"\n  }\n}\n```\n\nYou can override the default Ace theme by setting the `JSONEditor.plugins.ace.theme` variable.\n\n```js\nJSONEditor.plugins.ace.theme = 'twilight';\n```\n\n#### Booleans\n\nThe default boolean editor is a select box with options \"true\" and \"false\".  To use a checkbox instead, set the format to `checkbox`.\n\n```json\n{\n  \"type\": \"boolean\",\n  \"format\": \"checkbox\"\n}\n```\n\n#### Arrays\n\nThe default array editor takes up a lot of screen real estate.  The `table` and `tabs` formats provide more compact UIs for editing arrays.\n\nThe `table` format works great when every array element has the same schema and is not too complex.\n\nThe `tabs` format can handle any array, but only shows one array element at a time. It has tabs on the left for switching between items.\n\n\nHere's an example of the `table` format:\n\n```json\n{\n  \"type\": \"array\",\n  \"format\": \"table\",\n  \"items\": {\n    \"type\": \"object\",\n    \"properties\": {\n      \"name\": {\n        \"type\": \"string\"\n      }\n    }\n  }\n}\n```\n\nFor arrays of enumerated strings, you can also use the `select` or `checkbox` format.  These formats require a very specific schema to work:\n\n```json\n{\n  \"type\": \"array\",\n  \"uniqueItems\": true,\n  \"items\": {\n    \"type\": \"string\",\n    \"enum\": [\"value1\",\"value2\"]\n  }\n}\n```\n\nBy default, the `checkbox` editor (multiple checkboxes) will be used if there are fewer than 8 enum options.  Otherwise, the `select` editor (a multiselect box) will be used.\n\nYou can override this default by passing in a format:\n\n```json\n{\n  \"type\": \"array\",\n  \"format\": \"select\",\n  \"uniqueItems\": true,\n  \"items\": {\n    \"type\": \"string\",\n    \"enum\": [\"value1\",\"value2\"]\n  }\n}\n```\n\n#### Objects\n\nThe default object layout is one child editor per row.  The `grid` format will instead put multiple child editors per row.\nThis can make the editor much more compact, but at a cost of not guaranteeing child editor order.\n\n```json\n{\n  \"type\": \"object\",\n  \"properties\": {\n    \"name\": { \"type\": \"string\" }\n  },\n  \"format\": \"grid\"\n}\n```\n\n\nEditor Options\n----------------\n\nEditors can accept options which alter the behavior in some way.\n\n*  `collapsed` - If set to true, the editor will start collapsed (works for objects and arrays)\n*  `disable_array_add` - If set to true, the \"add row\" button will be hidden (works for arrays)\n*  `disable_array_delete` - If set to true, all of the \"delete\" buttons will be hidden (works for arrays)\n*  `disable_array_delete_all_rows` - If set to true, just the \"delete all rows\" button will be hidden (works for arrays)\n*  `disable_array_delete_last_row` - If set to true, just the \"delete last row\" buttons will be hidden (works for arrays)\n*  `disable_array_reorder` - If set to true, the \"move up/down\" buttons will be hidden (works for arrays)\n*  `disable_collapse` - If set to true, the collapse button will be hidden (works for objects and arrays)\n*  `disable_edit_json` - If set to true, the Edit JSON button will be hidden (works for objects)\n*  `disable_properties` - If set to true, the Edit Properties button will be hidden (works for objects)\n*  `enum_titles` - An array of display values to use for select box options in the same order as defined with the `enum` keyword. Works with schema using enum values.\n*  `expand_height` - If set to true, the input will auto expand/contract to fit the content.  Works best with textareas.\n*  `grid_columns` - Explicitly set the number of grid columns (1-12) for the editor if it's within an object using a grid layout.\n*  `hidden` - If set to true, the editor will not appear in the UI (works for all types)\n*  `input_height` - Explicitly set the height of the input element. Should be a valid CSS width string (e.g. \"100px\").  Works best with textareas.\n*  `input_width` - Explicitly set the width of the input element. Should be a valid CSS width string (e.g. \"100px\").  Works for string, number, and integer data types.\n*  `remove_empty_properties` - If set to true for an object, empty object properties (i.e. those with falsy values) will not be returned by getValue().\n\n```json\n{\n  \"type\": \"object\",\n  \"options\": {\n    \"collapsed\": true\n  },\n  \"properties\": {\n    \"name\": {\n      \"type\": \"string\"\n    }\n  }\n}\n```\n\nYou can globally set the default options too if you want:\n\n```js\nJSONEditor.defaults.editors.object.options.collapsed = true;\n```\n\n\nDependencies\n------------------\nSometimes, it's necessary to have one field's value depend on another's.  \n\nThe `dependencies` keyword from the JSON Schema specification is not nearly flexible enough to handle most use cases,\nso JSON Editor introduces a couple custom keywords that help in this regard.\n\nThe first step is to have a field \"watch\" other fields for changes.\n\n```json\n{\n  \"type\": \"object\",\n  \"properties\": {\n    \"first_name\": {\n      \"type\": \"string\"\n    },\n    \"last_name\": {\n      \"type\": \"string\"\n    },\n    \"full_name\": {\n      \"type\": \"string\",\n      \"watch\": {\n        \"fname\": \"first_name\",\n        \"lname\": \"last_name\"\n      }\n    }\n  }\n}\n```\n\nThe keyword `watch` tells JSON Editor which fields to watch for changes.\n\nThe keys (`fname` and `lname` in this example) are alphanumeric aliases for the fields.\n\nThe values (`first_name` and `last_name`) are paths to the fields.  To access nested properties of objects, use a dot for separation (e.g. \"path.to.field\").\n\nBy default paths are from the root of the schema, but you can make the paths relative to any ancestor node with a schema `id` defined as well.  This is especially useful within arrays.  Here's an example:\n\n```json\n{\n  \"type\": \"array\",\n  \"items\": {\n    \"type\": \"object\",\n    \"id\": \"arr_item\",\n    \"properties\": {\n      \"first_name\": {\n        \"type\": \"string\"\n      },\n      \"last_name\": {\n        \"type\": \"string\"\n      },\n      \"full_name\": {\n        \"type\": \"string\",\n        \"watch\": {\n          \"fname\": \"arr_item.first_name\",\n          \"lname\": \"arr_item.last_name\"\n        }\n      }\n    }\n  }\n}\n```\n\nNow, the `full_name` field in each array element will watch the `first_name` and `last_name` fields within the same array element.\n\n### Templates\n\nWatching fields by itself doesn't do anything.  For the example above, you need to tell JSON Editor that `full_name` should be `fname [space] lname`.\nJSON Editor uses a javascript template engine to accomplish this.  A barebones template engine is included by default (simple `{{variable}}` replacement only), but many of the most popular template engines are also supported:\n\n*  ejs\n*  handlebars\n*  hogan\n*  markup\n*  mustache\n*  swig\n*  underscore\n\nYou can change the default by setting `JSONEditor.defaults.options.template` to one of the supported template engines:\n\n```javascript\nJSONEditor.defaults.options.template = 'handlebars';\n```\n\nYou can set the template engine on a per-instance basis as well:\n\n```js\nvar editor = new JSONEditor(element,{\n  schema: schema,\n  template: 'hogan'\n});\n```\n\nHere is the completed `full_name` example using the default barebones template engine:\n\n```js+jinja\n{\n  \"type\": \"object\",\n  \"properties\": {\n    \"first_name\": {\n      \"type\": \"string\"\n    },\n    \"last_name\": {\n      \"type\": \"string\"\n    },\n    \"full_name\": {\n      \"type\": \"string\",\n      \"template\": \"{{fname}} {{lname}}\",\n      \"watch\": {\n        \"fname\": \"first_name\",\n        \"lname\": \"last_name\"\n      }\n    }\n  }\n}\n```\n\n### Enum Values\n\nAnother common dependency is a drop down menu whose possible values depend on other fields.  Here's an example:\n\n```json\n{\n  \"type\": \"object\",\n  \"properties\": {\n    \"possible_colors\": {\n      \"type\": \"array\",\n      \"items\": {\n        \"type\": \"string\"\n      }\n    },\n    \"primary_color\": {\n      \"type\": \"string\"\n    }\n  }\n}\n```\n\nLet's say you want to force `primary_color` to be one of colors in the `possible_colors` array.  First, we must tell the `primary_color` field to watch the `possible_colors` array.\n\n```json\n{\n  \"primary_color\": {\n    \"type\": \"string\",\n    \"watch\": {\n      \"colors\": \"possible_colors\"\n    }\n  }\n}\n```\n\nThen, we use the special keyword `enumSource` to tell JSON Editor that we want to use this field to populate a drop down.\n\n```json\n{\n  \"primary_color\": {\n    \"type\": \"string\",\n    \"watch\": {\n      \"colors\": \"possible_colors\"\n    },\n    \"enumSource\": \"colors\"\n  }\n}\n```\n\nNow, anytime the `possible_colors` array changes, the dropdown's values will be changed as well.\n\nThis is the most basic usage of `enumSource`.  The more verbose form of this property supports\nfiltering, pulling from multiple sources, constant values, etc..\nHere's a more complex example (this uses the Swig template engine syntax to show some advanced features)\n\n```js+jinja\n{\n  // An array of sources\n  \"enumSource\": [\n    // Constant values\n    [\"none\"],\n    {\n      // A watched field source\n      \"source\": \"colors\",\n      // Use a subset of the array\n      \"slice\": [2,5],\n      // Filter items with a template (if this renders to an empty string, it won't be included)\n      \"filter\": \"{% if item !== 'black' %}1{% endif %}\",\n      // Specify the display text for the enum option\n      \"title\": \"{{item|upper}}\",\n      // Specify the value property for the enum option\n      \"value\": \"{{item|trim}}\"\n    },\n    // Another constant value at the end of the list\n    [\"transparent\"]\n  ]\n}\n```\n\nYou can also specify a list of static items with a slightly different syntax:\n\n```js+jinja\n{\n  \"enumSource\": [{\n      // A watched field source\n      \"source\": [\n        {\n          \"value\": 1,\n          \"title\": \"One\"\n        },\n        {\n          \"value\": 2,\n          \"title\": \"Two\"\n        }\n      ],\n      \"title\": \"{{item.title}}\",\n      \"value\": \"{{item.value}}\"\n    }]\n  ]\n}\n```\n\nThe colors examples used an array of strings directly.  Using the verbose form, you can\nalso make it work with an array of objects.  Here's an example:\n\n```js+jinja\n{\n  \"type\": \"object\",\n  \"properties\": {\n    \"possible_colors\": {\n      \"type\": \"array\",\n      \"items\": {\n        \"type\": \"object\",\n        \"properties\": {\n          \"text\": {\n            \"type\": \"string\"\n          }\n        }\n      }\n    },\n    \"primary_color\": {\n      \"type\": \"string\",\n      \"watch\": {\n        \"colors\": \"possible_colors\"\n      },\n      \"enumSource\": [{\n        \"source\": \"colors\",\n        \"value\": \"{{item.text}}\"\n      }]\n    }\n  }\n}\n```\n\nAll of the optional templates in the verbose form have the properties `item` and `i` passed into them. `item` refers to the array element.  `i` is the zero-based index.\n\n### Dynamic Headers\n\nThe `title` keyword of a schema is used to add user friendly headers to the editing UI.  Sometimes though, dynamic headers, which change based on other fields, are helpful.\n\nConsider the example of an array of children.  Without dynamic headers, the UI for the array elements would show `Child 1`, `Child 2`, etc..  \nIt would be much nicer if the headers could be dynamic and incorporate information about the children, such as `1 - John (age 9)`, `2 - Sarah (age 11)`.\n\nTo accomplish this, use the `headerTemplate` property.  All of the watched variables are passed into this template, along with the static title `title` (e.g. \"Child\"), the 0-based index `i0` (e.g. \"0\" and \"1\"), the 1-based index `i1`, and the field's value `self` (e.g. `{\"name\": \"John\", \"age\": 9}`).\n\n```js+jinja\n{\n  \"type\": \"array\",\n  \"title\": \"Children\",\n  \"items\": {\n    \"type\": \"object\",\n    \"title\": \"Child\",\n    \"headerTemplate\": \"{{ i1 }} - {{ self.name }} (age {{ self.age }})\",\n    \"properties\": {\n      \"name\": { \"type\": \"string\" },\n      \"age\": { \"type\": \"integer\" }\n    }\n  }\n}\n```\n\n### Custom Template Engines\n\nIf one of the included template engines isn't sufficient,\nyou can use any custom template engine with a `compile` method.  For example:\n\n```js\nvar myengine = {\n  compile: function(template) {\n    // Compile should return a render function\n    return function(vars) {\n      // A real template engine would render the template here\n      var result = template;\n      return result;\n    }\n  }\n};\n\n// Set globally\nJSONEditor.defaults.options.template = myengine;\n\n// Set on a per-instance basis\nvar editor = new JSONEditor(element,{\n  schema: schema,\n  template: myengine\n});\n```\n\nLanguage and String Customization\n-----------------\n\nJSON Editor uses a translate function to generate strings in the UI.  A default `en` language mapping is provided.\n\nYou can easily override individual translations in the default language or create your own language mapping entirely.\n\n```js+jinja\n// Override a specific translation\nJSONEditor.defaults.languages.en.error_minLength =\n  \"This better be at least {{0}} characters long or else!\";\n\n\n// Create your own language mapping\n// Any keys not defined here will fall back to the \"en\" language\nJSONEditor.defaults.languages.es = {\n  error_notset: \"propiedad debe existir\"\n};\n```\n\nBy default, all instances of JSON Editor will use the `en` language.  To override this default, set the `JSONEditor.defaults.language` property.\n\n```js\nJSONEditor.defaults.language = \"es\";\n```\n\nCustom Editor Interfaces\n-----------------\n\nJSON Editor contains editor interfaces for each of the primitive JSON types as well as a few other specialized ones.\n\nYou can add custom editors interfaces fairly easily.  Look at any of the existing ones for an example.\n\nJSON Editor uses resolver functions to determine which editor interface to use for a particular schema or subschema.\n\nLet's say you make a custom `location` editor for editing geo data.  You can add a resolver function to use this custom editor when appropriate. For example:\n\n```js\n// Add a resolver function to the beginning of the resolver list\n// This will make it run before any other ones\nJSONEditor.defaults.resolvers.unshift(function(schema) {\n  if(schema.type === \"object\" \u0026\u0026 schema.format === \"location\") {\n    return \"location\";\n  }\n\n  // If no valid editor is returned, the next resolver function will be used\n});\n```\n\nThe following schema will now use this custom editor for each of the array elements instead of the default `object` editor.\n\n```json\n{\n  \"type\": \"array\",\n  \"items\": {\n    \"type\": \"object\",\n    \"format\": \"location\",\n    \"properties\": {\n      \"longitude\": {\n        \"type\": \"number\"\n      },\n      \"latitude\": {\n        \"type\": \"number\"\n      }\n    }\n  }\n}\n```\n\nIf you create a custom editor interface that you think could be helpful to others, submit a pull request!\n\nThe possibilities are endless.  Some ideas:\n\n*  A compact way to edit objects\n*  Radio button version of the `select` editor\n*  Autosuggest for strings (like enum, but not restricted to those values)\n*  Better editor for arrays of strings (tag editor)\n*  Canvas based image editor that produces Base64 data URLs\n\nSelect2 \u0026 Selectize Support\n----------------\nSelect2 support is enabled by default and will become active if the Select2 library is detected.\n\nSelectize support is enabled via the following snippet:\n```js\nJSONEditor.plugins.selectize.enable = true;\n```\nSee the demo for an example of the `array` and `select` editor with Selectize support enabled.\n\nCustom Validation\n----------------\n\nJSON Editor provides a hook into the validation engine for adding your own custom validation.\n\nLet's say you want to force all schemas with `format` set to `date` to match the pattern `YYYY-MM-DD`.\n\n```js\n// Custom validators must return an array of errors or an empty array if valid\nJSONEditor.defaults.custom_validators.push(function(schema, value, path) {\n  var errors = [];\n  if(schema.format===\"date\") {\n    if(!/^[0-9]{4}-[0-9]{2}-[0-9]{2}$/.test(value)) {\n      // Errors must be an object with `path`, `property`, and `message`\n      errors.push({\n        path: path,\n        property: 'format',\n        message: 'Dates must be in the format \"YYYY-MM-DD\"'\n      });\n    }\n  }\n  return errors;\n});\n```\n\njQuery Integration\n-------------------\n\n__*WARNING__: This style of usage is deprecated and may not be supported in future versions.\n\nWhen jQuery (or Zepto) is loaded on the page, you can use JSON Editor like a normal jQuery plugin if you prefer.\n\n```js\n$(\"#editor_holder\")\n  .jsoneditor({\n    schema: {},\n    theme: 'bootstrap3'\n  })\n  .on('ready', function() {\n    // Get the value\n    var value = $(this).jsoneditor('value');\n\n    value.name = \"John Smith\";\n\n    // Set the value\n    $(this).jsoneditor('value',value);\n  });\n```\n","funding_links":[],"categories":["JavaScript","others","JSON Schema Frontend components","open source json editors"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjdorn%2Fjson-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjdorn%2Fjson-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjdorn%2Fjson-editor/lists"}