​Instance 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'
const jedison = new Jedison.Create({
  container: document.getElementById('form'),
  schema: mySchema,
  iconLib: 'bootstrap-icons'
})

​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()
const jedison = new Jedison.Create({
  container: document.getElementById('form'),
  schema: mySchema,
  theme: new Jedison.ThemeBootstrap5()
})

​refParser

  • Type: RefParser
  • Default: null

An instance of RefParser to dereference "$ref" keywords in the schema before it's rendered. See the RefParser page for a full walkthrough of internal and recursive references.

  • new Jedison.RefParser()
const jedison = new Jedison.Create({
  schema: mySchema,
  refParser: 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

const jedisonA = new Jedison.Create({
  container: document.getElementById('form-a'),
  schema: mySchema,
  id: 'form-a'
})

const jedisonB = new Jedison.Create({
  container: document.getElementById('form-b'),
  schema: mySchema,
  id: 'form-b'
})

​language

  • Type: string
  • Default: 'en'

Set default language for error messages and UI texts.

const jedison = new Jedison.Create({
  language: 'de'
})

​data

  • Type: object
  • Default: undefined

Initial JSON data to populate the form.

const jedison = new Jedison.Create({
  schema: {
    type: 'object',
    properties: {
      name: { type: 'string' }
    }
  },
  data: { name: 'Ada Lovelace' }
})

​customEditors

  • Type: array
  • Default: []

An array of custom editor classes. See Custom Editors for a complete example.

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 switch between multiple editors.

  • select
  • radios
  • radios-inline
  • modal
  • select-inline

x-option: ✅

const jedison = new Jedison.Create({
  schema: mySchema,
  switcherInput: 'radios'
})

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

const jedison = new Jedison.Create({
  schema: mySchema,
  showErrors: 'always'
})

​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.

x-option: ✅

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

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