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

translations: {
  en: {
    errorEnum: '🚨 YIKES! That value is about as valid as a pineapple pizza! 🍍🍕.'
  }
}

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.

domPurifyOptions

Type: object

Default: {}

DOMPurify options.

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.

hiddenInputAttributes

Type: object

Default: {}

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

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.

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: ✅

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: ✅

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: ✅