​Jedison vs JSON Editor

JSON Editor is a well-known library that also builds forms from JSON Schemas. Its README now says it is in maintenance mode and points to Jedison for active development. This page shows where the two differ and how to move a project over.

​At a glance

Jedison JSON Editor
JSON Schema drafts 4, 6, 7, 2019-09 and 2020-12 3 and 4 (per its README)
Newer keywords prefixItems, unevaluatedItems, unevaluatedProperties, $anchor, $id base URIs Not mentioned in its README
Validation tests Run against the official JSON-Schema-Test-Suite for every supported draft Own test suite
Dependencies None None at runtime, per its README (npm lists core-js)
Themes Barebones, Bootstrap 3, 4 and 5, Tailwind 4 Barebones, HTML, Bootstrap 3, 4 and 5, Spectre, Tailwind
Per-field options in the schema x- prefixed keywords, so they never collide with the spec An options keyword
Project status Actively developed Maintenance mode

JSON Editor still has the larger user base and more third-party editor integrations. If a project depends on a specific editor widget, check that Jedison has an equivalent on the Editors pages first.

​Migrating

The basic API is close. These are the main renames:

JSON Editor Jedison
new JSONEditor(element, options) new Jedison.Create({container: element, ...})
startval data
theme: 'bootstrap4' theme: new Jedison.ThemeBootstrap4()
validate() getErrors()
getEditor('root.name') getInstance('#/name')
getValue(), setValue(), on('change'), enable(), disable(), destroy() Same names

Paths use JSON pointers (#/name) instead of dot paths (root.name). Options set inside the schema move from options to x- keywords, see Schema Options.

// JSON Editor
const editor = new JSONEditor(document.getElementById('form'), {
  schema: mySchema,
  startval: { name: 'Alice' },
  theme: 'bootstrap4',
})

editor.on('change', () => {
  console.log(editor.getValue())
})

const errors = editor.validate()

// Jedison
const jedison = new Jedison.Create({
  container: document.getElementById('form'),
  schema: mySchema,
  data: { name: 'Alice' },
  theme: new Jedison.ThemeBootstrap4(),
})

jedison.on('change', () => {
  console.log(jedison.getValue())
})

const errors = jedison.getErrors()