Base type editors

Hidden

Description Base editor class for hidden values.

Trigger: "type": "hidden"
Supported Types: N/A
Global options: N/A
Schema options: N/A
Options callback N/A
Required options: none
Source: src/editors/hidden.js

Integer

Description Base editor class for integer values.

Trigger: "type": "integer"
Supported Types: N/A
Global options: N/A
Schema options: N/A
Options callback N/A
Required options: none
Source: src/editors/integer.js

Number

Description Base editor class for numeric values.

Trigger: "type": "number"
Supported Types: N/A
Global options: N/A
Schema options: N/A
Options callback N/A
Required options: none
Source: src/editors/number.js

String

Description Base editor class for string values.

Trigger: "type": "string"
Supported Types: N/A
Global options: N/A
Schema options: N/A
Options callback N/A
Required options: none
Source: src/editors/string.js

Special format editors

ACE

Description Ace is an embeddable code editor written in JavaScript. It matches the features and performance of native editors such as Sublime, Vim and TextMate.
For configuration options, see the ACE homepage.

Triggers:

Click to expand!

"format": "actionscript"
"format": "batchfile"
"format": "c"
"format": "c++"
"format": "cpp"
"format": "coffee"
"format": "csharp"
"format": "css"
"format": "dart"
"format": "django"
"format": "ejs"
"format": "erlang"
"format": "golang"
"format": "groovy"
"format": "handlebars"
"format": "haskell"
"format": "haxe"
"format": "html"
"format": "ini"
"format": "jade"
"format": "java"
"format": "javascript"
"format": "json"
"format": "less"
"format": "lisp"
"format": "lua"
"format": "makefile"
"format": "matlab"
"format": "mysql"
"format": "objectivec"
"format": "pascal"
"format": "perl"
"format": "pgsql"
"format": "php"
"format": "python"
"format": "r"
"format": "ruby"
"format": "sass"
"format": "scala"
"format": "scss"
"format": "smarty"
"format": "sql"
"format": "sqlserver"
"format": "stylus"
"format": "svg"
"format": "twig"
"format": "vbscript"
"format": "xml"
``"format": "yaml"

Supported Types: string
Global options: JSONEditor.defaults.options.ace
Schema options: options.ace
Options callback JSONEditor.defaults.callbacks.ace
Required options: none
Source: src/editors/ace.js

Note: if you use a CDN version of the ACE library, you need to set the ACE basePath variable to the path of the CDN library. You can do it like this. (Tested with jsdelivr.net)

var aceScript = document.querySelector('script[src*="ace-builds"]');
if (aceScript.src && window.ace) {
  window.ace.config.set('basePath', aceScript.src.replace(/(.*\/)[^\/]+$/g, "$1"));
}

Autocomplete

Description Accessible autocomplete component for vanilla JavaScript.
For configuration options, see the Autocomplete homepage.

Trigger: "format": "autocomplete"
Supported Types: string
Global options: JSONEditor.defaults.options.autocomplete
Schema options: options.autocomplete
Options callback JSONEditor.defaults.callbacks.autocomplete
Required options: search (callback)
Source: src/editors/autocomplete.js

Example

Javascript

window.JSONEditor.defaults.callbacks = {
    "autocomplete": {
        // This is callback functions for the "autocomplete" editor
        // In the schema you refer to the callback function by key
        // Note: 1st parameter in callback is ALWAYS a reference to the current editor.
        // So you need to add a variable to the callback to hold this (like the
        // "jseditor_editor" variable in the examples below.)

        // Setup API calls
        "search_za": function search(jseditor_editor, input) {
            var url = '/eiao/api/json-object?filter[or][][data_json][LIKE]=' + encodeURI(input) +'&filter[or][][uuid][LIKE]=' + encodeURI(input);;

            return new Promise(function (resolve) {
                if (input.length < 2) {
                    return resolve([]);
                }

                fetch(url).then(function (response) {
                    return response.json();
                }).then(function (data) {
                    resolve(data);
                });
            });
        },
        "renderResult_za": function(jseditor_editor, result, props) {
            return ['<li ' + props + '>',
                '<div class="eiao-object-title">' + result.data_json + '</div>',
                '<div class="eiao-object-snippet">' + result.uuid.substring(0,7) + ' <small>' + result.schema_uuid.substring(0,5) + '<small></div>',
                '</li>'].join('');
        },
        "getResultValue_za": function getResultValue(jseditor_editor, result) {
            return result.uuid;
        }
    }
};

JSON-schema

{
    "items": {
        "title": "UUID",
        "type": "string",
        "description": "reference (autocomplete)",
        "format": "autocomplete",
        "options": {
            "autocomplete": {
                "search": "search_za",
                "getResultValue": "getResultValue_za",
                "renderResult": "renderResult_za",
                "autoSelect": true
            }
        }
    },
    "title": "Project references",
    "type": "array"
}

Checkbox

Description Checkbox format.

Trigger: "format": "checkbox" + enum
Supported Types: string, integer, number, boolean
Global options: N/A
Schema options: N/A
Options callback N/A
Required options: none
Source: src/editors/checkbox.js

Cleave

Description Format your <input/> content when you are typing.

Credit card number formatting
Phone number formatting
Date formatting
Numeral formatting
Custom delimiter, prefix and blocks pattern

For configuration options, see the Cleave homepage.

Trigger: options.cleave
Supported Types: string, number, integer, boolean
Global options: JSONEditor.defaults.options.cleave
Schema options: options.cleave
Options callback JSONEditor.defaults.callbacks.cleave
Required options: none
Source: src/editors/string.js

IMask

Description Javascript input mask.

For configuration options, see the IMask homepage.

Trigger: options.imask **Supported Types:** string, number, integer, boolean **Global options:** JSONEditor.defaults.options.imask **Schema options:** options.imask **Options callback** JSONEditor.defaults.callbacks.imask **Required options:** none **Special options:** returnUnmasked`` when true, returns the unmasked value
Source: src/editors/string.js

IMask configuration format is not "JSON friendly" as it is possible to set the mask to an object ("Date", "Number", "IMask.MaskedEnum" and "IMask.MaskedRange") or a regular expression. In order for those to work, you will have to enclose them in quotes. And for regular expressions, you will also have to prefix the quoted regular expression with the keyword "regex:"

Example of an iMask mask config:

  mask: [
    {
      mask: 'RGB,RGB,RGB',
      blocks: {
        RGB: {
          mask: IMask.MaskedRange,
          from: 0,
          to: 255
        }
      }
    },
    {
      mask: /^#[0-9a-f]{0,6}$/i
    }
  ]

The same config "converted" to JSON-Editor format:

  "mask": [{
    "mask": "RGB,RGB,RGB",
    "blocks": {
      "RGB": {
        "mask": "IMask.MaskedRange",
        "from": 0,
        "to": 255
      }
    }
  },
    {
      "mask": "regex:/^#[0-9a-f]{0,6}$/i"
    }]

Flatpickr

Description Lightweight and powerful datetime picker.
For configuration options, see the Flatpickr homepage.

Trigger: "format": "datetime-local", "format": "date" or "format": "time"
Supported Types: string, integer
Global options: JSONEditor.defaults.options.flatpickr **Schema options:** options.flatpickr
Options callback ``JSONEditor.defaults.callbacks.flatpickr
Required options: none
Source: src/editors/datetime.js

Jodit

Description An excellent WYSIWYG editor written in pure TypeScript without the use of additional libraries.
For configuration options, see the Jodit homepage.

Trigger: "format": "jodit"
Supported Types: string
Global options: JSONEditor.defaults.options.jodit
Schema options: options.jodit
Options callback JSONEditor.defaults.callbacks.jodit
Required options: none
Source: src/editors/jodit.js

SCEditor

Description A lightweight, open source, WYSIWYG BBCode and (X)HTML editor.
For configuration options, see the SCEditor homepage.

Triggers: "format": "xhtml" or "format": "bbcode"
Supported Types: string
Global options: JSONEditor.defaults.options.sceditor
Schema options: options.sceditor
Options callback JSONEditor.defaults.callbacks.sceditor
Required options: none
Source: src/editors/sceditor.js

Select2

Description Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.
For configuration options, see the Select2 homepage.

Trigger: "format": "select2"
Supported Types: string, number, integer, boolean (using enum)
Global options: JSONEditor.defaults.options.select2
Schema options: options.select2
Options callback JSONEditor.defaults.callbacks.select2
Required options: none
Source: src/editors/select2.js and src/editors/array/select2.js

Selectize

Description Selectize is the hybrid of a textbox and <select> box. It's jQuery-based and it's useful for tagging, contact lists, country selectors, and so on..
For configuration options, see the Selectize homepage.

Trigger: "format": "selectize"
Supported Types: string, number, integer, boolean (using enum)
Global options: JSONEditor.defaults.options.selectize
Schema options: options.selectize
Options callback JSONEditor.defaults.callbacks.selectize
Required options: none
Source: src/editors/selectize.js and src/editors/array/selectize.js

SimpleMDE

Description SimpleMDE is a simple, embeddable, and beautiful JS markdown editor.
For configuration options, see the SimpleMDE homepage.

Trigger: "format": "markdown"
Supported Types: string
Global options: JSONEditor.defaults.options.simplemde
Schema options: options.simplemde
Options callback JSONEditor.defaults.callbacks.simplemde
Required options: none
Special options: autorefresh when true, fixes problem with Chrome and editor inside Tabs
Source: src/editors/simplemde.js

Starrating

Description Star based rating.

Trigger: "format": "rating"
Supported Types: string, integer
Global options: JSONEditor.defaults.options.rating **Schema options:** options.rating
Options callback N/A
Required options: none
Source: src/editors/starrating.js

Upload

Description Upload files to server.

Trigger: "format": "upload"
Supported Types: string
Global options: JSONEditor.defaults.options.upload **Schema options:** options.upload
Options callback JSONEditor.defaults.callbacks.upload **Required options:** upload_handler``
Source: src/editors/upload.js

Option	Type	Description	Default value
title	string	Title of the Browse button	"Browse"
auto_upload	boolean	Trigger file upload button automatically	false
allow_reupload	boolean	Allow reupload of file (overrides the readonly state)	false
hide_input	boolean	Hide the Browse button and name display (Only works if 'enable_drag_drop' is true)	false
enable_drag_drop	boolean	Enable Drag&Drop uploading.	false
drop_zone_top	boolean	Position of dropzone. true=before button input, false=after button input	false
drop_zone_text	string	Text displayed in dropzone box	"Drag & Drop file here"
alt_drop_zone	string	Alternate DropZone DOM Selector (Can be created inside another property)
mime_type	string/array	If set, restrict upload to mime type(s)
max_upload_size	integer	Maximum file size allowed. 0 = no limit	0
upload_handler	function	Callback function for handling uploads to server

UUID

Description UUID format with autogenerated uuid value. Value must be a valid RFC 4122 uuid (Universally Unique IDentifier). If field has no initial value (startval) then a random uuid will be autogenerated.

Trigger: "format": "uuid"
Supported Types: string
Global options: N/A
Schema options: N/A
Options callback N/A
Required options: none
Source: src/editors/uuid.js

Picker

Description Optional support for color format using vanilla JS color picker with alpha selection.

Trigger: "format": "color"
Supported Types: string
Global options: JSONEditor.defaults.options.colorpicker
Schema options: options.colorpicker
Options callback JSONEditor.defaults.callbacks.colorpicker
Required options: none
Source: src/editors/colorpicker.js

Non-Active editors (Editors that return no results)

Button

Description The Button editor is a special editor that doesn't return any results. It can be used to trigger various JavaScript features, such as a Submit button.

Trigger: "type": "button"
Supported Types: N/A
Global options: N/A
Schema options: text, action, icon, validated
Options callback window.JSONEditor.defaults.callbacks.button
Required options: action
Source: src/editors/button.js

Info

Description The Info editor is a special editor that doesn't return any results. It can be used to insert textual blocks inside the form. Only properties available are title and description (bodytext).

Trigger: "type": "info"
Supported Types: N/A
Global options: N/A
Schema options: N/A
Options callback N/A
Required options: none
Source: src/editors/info.js

Option callback functions

The JSON Schema format doesn't support function values, but some 3rd-Party libraries has callback functions as options. To enable/use those type of options, you can create global callback functions and then refer to then by name in the schema options.

Note: The 1st parameter passed to the callback function is ALWAYS the current edtor instance. So you need to modify the callback functions to accommodate this.

Example option callback for Cleave.js

Click to expand!

This example defines a callback function named "showCreditCardType" and shows how it is used inside the schema options.

JavaScript:

// Add Cleave.js options namespace to Global callback list
window.JSONEditor.defaults.callbacks.cleave = {
  // 1st parameter in callback is ALWAYS a reference to current editor instance.
  "showCreditCardType": function(jseditor_editor, type) {
    var el = jseditor_editor.element.nextSibling;
    if (el) el.innerHTML = 'Card type: <strong>' + type + '</strong>';
  }
};

Schema:

{
  "type": "object",
  "properties": {
    "creditcard": {
      "type": "string",
      "title": "Credit Card",
      "description": " ",
      "options": {
        "inputAttributes": {
          "placeholder": "enter credit card number"
        },
        "cleave": {
          "creditCard": true,
          "onCreditCardTypeChanged": "showCreditCardType"
        }
      }
    }
  }
}

Themes

Themes have own options for changing various aspects of the display.

Bootstrap 4

Option	Default	Description
`input_size`	`normal`	Changes `input` size, can be `normal`, `small` or `large`
`custom_forms`	`false`	Apply Bootstrap custom forms
`object_indent`	`true`	Indent nested object elements (use nested `.card` layout)
`object_background`	`bg-light`	Bootstrap 4 card background modifier class
`object_text`	`''`	Bootstrap 4 card text color modifier class modifier class
`table_border`	`false`	Add border to array "table" row and cells
`table_zebrastyle`	`false`	Add "zebra style" to array "table" rows
`tooltip`	`bootstrap`	how to display tooltips (infoText). Can be `browser` for native `[title]`, `css` for simple CSS Styling, or `bootstrap` for TWBS/Popper.js handling

Spectre

Option	Default	Description
`input_size`	`normal`	Changes `input` size, can be `normal`, `small` or `large`
`label_bold`	`true`	Labels in bold
`object_indent`	`false`	Indent nested object elements
`object_border`	`false`	Add border around object elements
`align_bottom`	`false`	Align elements to bottom of flex container
`table_border`	`false`	Add border to array "table" row and cells
`table_zebrastyle`	`false`	Add "zebra style" to array "table" rows

Tailwind

Option	Default	Description
`input_size`	`normal`	Changes `input` size, can be `normal`, `small` or `large`
`label_bold`	`false`	Labels in bold
`object_panel_default`	`true`	Indicates whether to use rules as default or alternate style
`object_indent`	`false`	Indent nested object elements
`object_border`	`false`	Add border around object elements
`align_bottom`	`false`	Align elements to bottom of flex container
`table_border`	`false`	Add border to array "table" row and cells
`table_hdiv`	`false`	Add bottom-border to array "table" cells
`table_zebrastyle`	`false`	Add "zebra style" to array "table" rows

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

README_ADDON.md

README_ADDON.md

Base type editors

Hidden

Integer

Number

String

Special format editors

ACE

Autocomplete

Example

Checkbox

Cleave

IMask

Flatpickr

Jodit

SCEditor

Select2

Selectize

SimpleMDE

Starrating

Upload

UUID

Picker

Non-Active editors (Editors that return no results)

Button

Info

Option callback functions

Example option callback for Cleave.js

Themes

Bootstrap 4

Spectre

Tailwind

Files

README_ADDON.md

Latest commit

History

README_ADDON.md

File metadata and controls

Base type editors

Hidden

Integer

Number

String

Special format editors

ACE

Autocomplete

Example

Checkbox

Cleave

IMask

Flatpickr

Jodit

SCEditor

Select2

Selectize

SimpleMDE

Starrating

Upload

UUID

Picker

Non-Active editors (Editors that return no results)

Button

Info

Option callback functions

Example option callback for Cleave.js

Themes

Bootstrap 4

Spectre

Tailwind