Jedi - JSON Editing and Data Integrity

Jedi is a lightweight, dependency-free JavaScript library that makes JSON handling simple. Use it in the browser to generate forms for editing and validating JSON with JSON schemas, or in Node.js as a powerful JSON schema validator.

Check Out the Playground

Key Features

• JSON Validation: Easily validate your JSON data using JSON schemas.
• JSON Editing: Generate user-friendly forms for smooth JSON editing in the browser.
• Lightweight $ref parser: Dereferences JSON Schema $ref pointers.
• CSS libraries Integration:
  • Bootstrap 3
  • Bootstrap 4
  • Bootstrap 5
• Icon libraries Integration:
  • Glyphicons
  • Bootstrap icons
  • FontAwesome 3
  • FontAwesome 4
  • FontAwesome 5
  • FontAwesome 6
• Plugin Editors:
  • Quill
  • Flatpickr
  • Awesomplete
  • Jodit

Getting Started

As a Validator

const refParser = new Jedi.RefParser()

const init = async () => {
  await refParser.dereference(schema)

  const jedi = new Jedi.Create({
    refParser: refParser,
    schema: {
      "type": "string"
    }
  })
}

init()

As an Editor

<div id="jedi-container"></div>

const refParser = new Jedi.RefParser()

const init = async () => {
  await refParser.dereference(schema)

  const jedi = new Jedi.Create({
    container: document.querySelector('#jedi-container'),
    theme: new Jedi.ThemeBootstrap3(),
    refParser: refParser,
    schema: {
      "type": "string"
    }
  })
}

init()

Instance Options

Option	Type	Default	Description
container	HTMLElement	null	The HTML element that will contain the generated form.
iconLib	string	'null'	Specifies the icon library to use for UI components. Valid options include: 'glyphicons' 'bootstrapIcons' 'fontAwesome3' 'fontAwesome4' 'fontAwesome5' 'fontAwesome6'
theme	Theme	null	An instance of Theme to apply to the UI. Valid options include: new Jedi.Theme() new Jedi.ThemeBootstrap3() new Jedi.ThemeBootstrap4() new Jedi.ThemeBootstrap5()
refParser	new Jedi.RefParser	null	An instance of RefParser to handle '$ref' keywords.
enablePropertiesToggle	boolean	false	Enables a toggle to show/hide properties in the UI.
enableCollapseToggle	boolean	false	Allows sections to be collapsible in the UI.
startCollapsed	boolean	false	If set to true, the UI starts in a collapsed state.
deactivateNonRequired	boolean	false	Deactivates non-required properties.
schema	object	{}	A JSON schema for the form.
showErrors	string	'change'	Determines when to display validation errors. Options include: 'never' 'change' 'always'
data	object	undefined	Initial data to populate the form.
validateFormat	boolean	false	Treats 'format' as a validator rather than just an annotation.
mergeAllOf	boolean	false	If set to true, merges all allOf schemas into one.
enforceConst	boolean	false	Enforces the const keyword value in editors.
customEditors	array	[]	An array of custom editor classes.
hiddenInputAttributes	object	{}	Attributes for hidden inputs in the form.
enforceEnumDefault	boolean	true	When true uses the first item in the enum as the default value

Events

coming soon

Schema options

coming soon

Development

Install dependencies:

yarn install

Start dev server, watch for changes and opens the playground page in the browser.

yarn dev

Builds the production-ready version of the library.

yarn build

Runs end-to-end tests using CodeceptJS with the barebones theme.

yarn e2e

Runs end-to-end tests using CodeceptJS with the bootstrap 3 theme.

yarn e2e:b3

Runs end-to-end tests using CodeceptJS with the bootstrap 4 theme.

yarn e2e:b4

Runs end-to-end tests using CodeceptJS with the bootstrap 5 theme.

yarn e2e:b5

Runs end-to-end tests using CodeceptJS with all the themes.

yarn e2e:*

Runs unit tests using Jest.

yarn unit

Runs ESLint to check for linting errors.

yarn lint

Runs ESLint with the --fix option to automatically fix linting errors.

yarn lint:fix

License

Jedi is released under the MIT License, making it free for commercial and non-commercial use.

Resources

• Understanding JSON Schema
• JSON-Schema-Test-Suite