Options

Jedison provides various configuration options to customize the behavior and appearance of your form instances. These options can be passed when creating a new Jedison instance.

Some of these options can be set at JSON schema level. Options in schemas are always prefixed with x- (e.g. x-assertFormat) to not collide with future JSON schema spec keywords.

container

Type: HTMLElement

Default: null

The HTML element that will contain the generated form.

iconLib

Type: string

Default: null

Specifies the icon library to use for UI components. Valid options include:

  • 'glyphicons'
  • 'bootstrap-icons'
  • 'fontawesome3'
  • 'fontawesome4'
  • 'fontawesome5'
  • 'fontawesome6'

theme

Type: Theme

Default: null

An instance of Theme to apply to the UI. Valid options include:

  • new Jedison.Theme()
  • new Jedison.ThemeBootstrap3()
  • new Jedison.ThemeBootstrap4()
  • new Jedison.ThemeBootstrap5()

refParser

Type: RefParser

Default: null

An instance of RefParser to handle '$ref' keywords.

  • new Jedison.RefParser

translations

Type: object

Default: '{}'

Used to add new translations or override the default ones. Uses template placeholders that get dynamically replaced with actual values during runtime

const jedison = new Jedison.Create({
  translations: {
    en: {
      errorEnum: 'Value must be one of the allowed options.'
    }
  }
})

parseMarkdown

Type: boolean

Default: false

Transform markdown to html in annotations like title and description if marked.js is available as window.marked.

purifyHtml

Type: boolean

Default: true

Sanitizes html tags from annotations like if DOMPurify.js is available as window.DOMPurify.

purifyData

Type: boolean

Default: true

Sanitizes string values during data input operations if DOMPurify.js is available as window.DOMPurify. This provides security against XSS attacks in user input data, separate from HTML content purification.

domPurifyOptions

Type: object

Default: {}

DOMPurify options.

const jedison = new Jedison.Create({
  domPurifyOptions: {
    ALLOWED_TAGS: ['b', 'i', 'em', 'strong']
  }
})

schema

Type: object

Default: {}

A JSON schema for the form.

id

Type: string

Default: ''

Used to prefix id and for attributes. Useful if you want to have multiple Jedison forms on the page

language

Type: string

Default: 'en'

Set default language for error messages and UI texts.

data

Type: object

Default: undefined

Initial JSON data to populate the form.

customEditors

Type: array

Default: []

An array of custom editor classes.

class MyCustomEditor extends Jedison.Editor {
  static resolves(schema) {
    return schema['x-format'] === 'my-custom'
  }
}

const jedison = new Jedison.Create({
  customEditors: [MyCustomEditor]
})

hiddenInputAttributes

Type: object

Default: {}

Attributes for the hidden input that contains the whole JSON value of the form.

const jedison = new Jedison.Create({
  hiddenInputAttributes: {
    name: 'form-data',
    'data-id': '123'
  }
})

settings

Type: object

Default: {}

An object to store user data and functions. Useful for when there is the need to provide options to configure a plugin but the options can not be used in schemas because of JSON data limitations. Can be used in annotations when using templates.

const jedison = new Jedison.Create({
  settings: {
    apiUrl: 'https://api.example.com',
    formatDate: (value) => new Date(value).toLocaleDateString()
  }
})

btnContents

Type: boolean

Default: true

If buttons texts should be displayed.

btnIcons

Type: boolean

Default: true

If buttons icons should be displayed.

enforceConst

Type: boolean

Default: false

Enforces the const keyword value in editors. Works only in editor mode

x-option: ✅

enforceEnum

Type: boolean

Default: true

When true uses the first item in the enum as the default value. Works only in editor mode

x-option: ✅

enforceRequired

Type: boolean

Default: true

When true required properties are always displayed and added when missing. Works only in editor mode

x-option: ✅

enforceAdditionalProperties

Type: boolean

Default: true

When true the editor removes all properties that are not listed in properties. Works only in editor mode

x-option: ✅

switcherInput

Type: string

Default: 'select'

Sets the input type that will be used to witch between multiple editors.

  • select
  • radios
  • radios-inline

x-option: ✅

enablePropertiesToggle

Type: boolean

Default: false

Enables a toggle to show/hide the properties dialog in the UI.

x-option: ✅

embedSwitcher

Type: boolean

Default: false

When enabled, embeds the type switcher UI inside the selected editor's header instead of displaying it separately above the content. Applies to oneOf and anyOf schemas.

x-option: ✅

enableCollapseToggle

Type: boolean

Default: false

Allows sections to be collapsible in the UI.

x-option: ✅

deactivateNonRequired

Type: boolean

Default: false

Deactivates non-required properties. Useful when working with circular schemas to avoid infinite recursion.

x-option: ✅

showErrors

Type: string

Default: 'change'

Determines when to display validation errors. Options include:

  • 'never' - Never show validation errors automatically
  • 'change' - Show errors when the input loses focus (default)
  • 'input' - Show errors immediately as the user types (for text inputs, textareas, and number inputs)
  • 'always' - Always show validation errors

Note: The 'input' option only affects text-based inputs (string inputs, textareas, number inputs). Selection inputs (dropdowns, checkboxes, radios) continue using the 'change' event as it's more appropriate for their interaction model.

x-option: ✅

assertFormat

Type: boolean

Default: false

Treats 'format' as a validator rather than just an annotation.

x-option: ✅

subErrors

Type: boolean

Default: false

When enabled, validation errors include detailed sub-error information showing which nested property or item failed validation.

x-option: ✅

arrayDelete

Type: boolean

Default: true

If array delete buttons should be displayed.

x-option: ✅

arrayMove

Type: boolean

Default: true

If array move up and move down buttons should be displayed.

x-option: ✅

editJsonData

Type: boolean

Default: false

Enables inline JSON editing mode, allowing users to directly edit the JSON data within form fields.

const jedison = new Jedison({
  schema: {
    type: 'object',
    properties: {
      name: { type: 'string' },
      age: { type: 'number' }
    }
  },
  editJsonData: true
})
jedison.render(document.getElementById('container'))

x-option: ✅

arrayAdd

Type: boolean

Default: true

If array add buttons should be displayed.

x-option: ✅

objectAdd

Type: boolean

Default: true

If the "Add property" button should be displayed on object editors.

x-option: ✅

arrayDeleteConfirm

Type: boolean

Default: true

When enabled, shows a confirmation dialog before deleting an array item.

x-option: ✅

arrayDeleteAll

Type: boolean

Default: false

Adds a "Delete all items" button to the array editor's header actions area.

x-option: ✅

arrayFooterAdd

Type: boolean

Default: false

Adds an "Add item" button in the footer of the array editor.

x-option: ✅

arrayFooterButtonsPosition

Type: string

Default: 'right'

Options: 'left', 'right'

Controls the alignment of footer buttons globally.

x-option: ✅

arrayFooterDeleteAll

Type: boolean

Default: false

Adds a "Delete all items" button in the footer of the array editor.

x-option: ✅

useConstraintAttributes

Type: boolean

Default: true

When enabled, editors will set native HTML constraint attributes based on JSON Schema keywords:

  • Number inputs: min, max
  • Number range: min, max
  • String inputs: minlength, maxlength, pattern
  • Textarea: minlength, maxlength

This enables native browser validation hints and constraints.

x-option: ✅