Jedi - JSON Editing and Data Integrity

Generates forms from JSON schemas. Can be used in backend to validate JSON data too. Check Out the Playground

Key Features

• Dependency free
• JSON Schema Validation: Easily validate your JSON data using JSON schemas.
• JSON Editing: Generate user-friendly forms for smooth JSON editing in the browser.
• 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 - powerful rich text editor
  • Flatpickr - lightweight and powerful datetime picker
  • Awesomplete - Ultra lightweight, customizable, simple autocomplete widget with zero dependencies
  • Jodit - WYSIWYG Editor
  • Raty - star Rating Plugin

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.
assertFormat	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
id	string	''	Used to prefix id and for attributes

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